HTML and CSS Interview Questions

Last Updated: December 03, 2019

Author: Full Stack Tutoorials

Home >> Interviews >> HTML and CSS Interview Questions
HTML and CSS Interview Questions: HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for building an interactive web page.
HTML CSS Interview Questions
Q:- What is HTML?

HTML stands for Hypertext Markup Language is the standard markup language for creating web pages and web applications etc.

HTML5 is the latest version of Hypertext Markup Language (HTML)

Q:- What is the Importance of the HTML DOCTYPE?
  • HTML DOCTYPE declaration should be written at the top of an HTML document.
  • HTML DOCTYPE declaration tells the Browser about the version of the markup language(HTML) in the which the page is written.
DOCTYPE Declarations:
HTML5:

In HTML5 DOCTYPE declaration is written as

<!DOCTYPE html>
HTML 4.01 Strict:

In HTML 4.01 Strict DOCTYPE declaration is written as

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional:

In HTML 4.01 Transitional DOCTYPE declaration is written as

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Q:- What is CSS?
  • CSS short form of Cascading Style Sheet
  • CSS is basically used to describe the style of an HTML document.
You can use CSS in a webpage using following Methods:
  1. Inline:
    Inline, used to style only a small piece of code
    2. 
	HTML and CSS Interview Questions
  2. Internal:
    Internal css are Embedded in HTML Pages.
    3.
  3. External:
    it is used from external sources
    4.
Q:- What is difference between inline vs inline-block?

Key differences between inline and inline-block:

  • An inline element has no line break before or after it, so elements sits next to others.

  • An inline-block element is placed as an inline element but it behaves as a block element because a line break happens after the element. (elements displayed side by side)

Q:- What is difference between absolute and relative position?
  1. Static - this is the default value, all elements are in order as they appear in the document.
  2. Relative - the element is positioned relative to its normal position.
  3. Absolute - the element is positioned absolutely to its first positioned parent.
  4. Fixed - the element is positioned related to the browser window.
  5. Sticky - the element is positioned based on the user's scroll position.
Q:- How can we align a div Center?

  Center Aligned Div!
Q:- How many ways you can define color in CSS?

Defining Colors in CSS: There are many ways to to so, few of them is given below:

  • HEX: #rrggbb In HTML/CSS, a color can be define using a hexadecimal value in the form: #rrggbb. Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff.
  • RGB: rgb(red, green, blue)
    • RGB colors have three values that represent: red, green, and blue
    • Each value can be a number between 0 and 255 or a percentage from 0 to 100%
    • A value of 0 means none of that color is being used
  • By Name: A color can also be define by color name too. like red, green, blue, yellow, black etc
Q:- Compare RGB with Hexadecimal color code?

In CSS, a color can be specified in two ways:

  1. Hexadecimal color code:
    A color is represented by 6 characters is hexadecimal color coding. It is a combination of numbers and letters and is preceded by #.
    2. .my-breadcrumb a {
    color: #f44a56;
    font-weight: bold;
}
  2. RGB color code:
    A mixture of red, green and blue represents a RGB color. The value of a color can also be specified.
    3. rgb(r,g,b):
Q:- What is Opacity?
The opacity property sets the opacity level of an element.

In other words, opacity property in CSS specifies how transparent an element is

.my-class { opacity: 0.5; }
Q:- What is Z-Index?

In CSS, z-index property is used to displace elements on the z-axis i.e In or Out of the screen. It is used to define the order of elements if they overlap on each other.

z-index: auto|number|initial|inherit;
Q:- What is CSS Preprocessor?
A CSS preprocessor is basically a scripting language that use it's own unique syntax and then compiles it into regular CSS.

CSS is primitive and incomplete. so building a function, reusing a definition or inheritance are hard to achieve. for very big projects, or complex systems, maintenance is a very big problem.

Preprocessor, with their advanced features, helped to achieve writing reusable, maintainable and extensible codes in CSS.

To use a CSS preprocessor, you must install a CSS compiler.

Following are the types of CSS preprocessors:

  1. Sass (Syntactically Awesome Style Sheet) - Sass is the most mature, stable, and powerful CSS preprocessor, compatible with all versions of CSS.
  2. LESS (Leaner Style Sheets ) - LESS is a preprocessor language that is compiled into CSS. It's design is influenced by Sass
  3. Stylus - Stylus is a preprocessor language that is compiled into CSS. It's design is influenced by Sass and LESS
Sass Installation:

If you use Node.js, you can also install Sass using npm by running

  1. Install Anywhere (npm) Install by using command. npm install -g sass
  2. Command to compile to CSS. sass styles.sass:styles.css

Ruby Sass has reached end of life (EOL) and is now totally unmaintained. So you can switch to Dart Sass or LibSass.

LESS Installation:

LESS is written in JavaScript so you will need Node.js to run it.

  1. Linux and Mac: Install by using command. npm install -g less
  2. Windows: Open Cmd and Run npm install less
  3. Command to compile to CSS. lessc styles.less styles.css
Advantage of Preprocessor:
  1. Easy to Setup
  2. Easy to Maintain
  3. Code Reusability
  4. Reduced development time
Q:- What is Mixins?

Mixins provides the facilities to use properties of one rule set into another rule set in CSS.

Mixins - "mix-in" properties from existing styles

Let's understand by following example:

.div_color {
  background-color: #000;
  color: #fff;
}

.container{
  width: 100%;
  .div_color();
}

.footer{
  width: 100%;
  .div_color();
}

In above example we are mixin property div_color