Top CSS Interview Questions Top CSS Interview Questions

Ashish Lahoti
Interview Questions
Page content

These CSS and CSS3 interview questions are based on my personal interview experience and feedback from other interviewees. Keep following this post for regular updates.

What do you understand from CSS?

CSS stands for Cascading Style Sheet, which is used to beautify and paint HTML elements. It tells the browser about HTML element’s style such as color, size, margin, padding etc.

Cascading means that multiple styles can be applied to same HTML element. These styles can be cascaded down to multiple style sheets.

In practice, styling on a single HTML elements can be applied from:-

  1. Browser’s default style sheet
  2. Imported styles sheets from thirdparty (for e.g. bootstrap.css)
  3. Imported style sheets from application’s theme (for e.g. dark-theme.css)
  4. Styles defined in the same HTML document using <style> element
  5. Element’s inline styles using style attribute

Which style to be applied on HTML element is decided based on CSS Precedence Rules and CSS Specificity.

What are different ways to apply CSS styles?

You will, of course, need to know how to add CSS to a page, and there are three main ways:

  1. Using the inline style attribute on an element

    <div style="width:100%; padding:10px; font-size:1.2em; text-align:center;">
    CSS Tutorial
</div>

  2. Using a <style> block in the <head> section of your HTML

    <head>
    <style>
        div {
          width: 100%;
          padding: 10px;
        }
        .heading {
          font-size: 1.2em;
          text-align: center;
        }
    </style>
</head>
<body>
    <div class="heading">CSS Tutorial</div>
</body>

  3. Loading an external CSS file using the tag

    <head>
    <link rel="stylesheet" href="/css/styles.css" />
</head>
<body>
    <div class="heading">CSS Tutorial</div>
</body>

    /css/styles.css

    div {
    width: 100%;
    padding: 10px;
}
.heading {
    font-size: 1.2em;
    text-align: center;
}

The first two are useful but you’ll almost always be loading external CSS files. It’s more maintainable to keep your styles in separate files, not to mention it’s a nice separation of concerns.

What are different ways to use CSS selectors?

There are mainly three ways to use CSS selector to specify element to apply CSS.

  • Element Selector use the HTML element tag name in css like h1, p, div
  • Class Selector define a Class using class="heading" attribute on an element and use like .heading
  • Id Selector define an Id using id="title" attribute on an element and use like #title
  • Universal Selector used as a wildcard character * applied to all the elements on the page.
  • Group Selector multiple selectors using comma separated Elements, Classes, Ids.
<head>
    <style>
        /* Element Selector */
        div {
          width: 100%;
          padding: 10px;
        }
        /* Class Selector */
        .heading {
          font-size: 1.2em;
          text-align: center;
        }
        /* Id Selector */
        #title {
          color: red; 
        }
        /* Universal Selector */
        * {
          color: black;
          font-family: Arial, sans-serif;
        }
        /* Group Selector */
        h1, h2, .heading, #title {
          text-align: center;
          color: blue;
        }
    </style>
</head>
<body>
    <div id="title" class="heading">CSS Tutorial</div>
</body>

What are the CSS Precedence Rules and CSS Specificity?

CSS specificity is the set of rules applied to determine which style is applied to an element. Order of css specificity from highest to lowest is as follows:-

  1. A css rule with !important always takes precedence.
  2. Element’s inline style overrides all other styles (1,0,0,0)
  3. Css selector using element’s #id (0,1,0,0)
  4. Css selector using element’s .class, pseudo class or attribute (0,0,1,0)
  5. Css selector using element name h1, p, div (0,0,0,1)
  6. Css selector appear later in the code override earlier one if both have the same specificity

Good read to understand how to calculate specificity

Should you use !importance

As we know now that !importance has highest specificity, nothing can beat that, apart from another !importance. Sometimes there is no way escaping this one when you are struggling with specificity but then it makes debugging difficult. You should avoid it wherever possible.

How to specify element position using CSS selector?

  • div, p   - Selects all <div> elements and all <p> elements
  • div p     - Selects all <p> elements that are anywhere inside a <div> element
  • div > p - Selects all <p> elements where the immediate parent is a <div> element
  • div + p - Selects <p> element that is immediate sibling of <div> and come afterwards
  • div ~ p - Selects all <p> elements that are siblings of <div> element and come afterwards

Let’s understand them looking at the example:-

<style>
  div  p {
    background-color: yellow;
  }
  div > p {
    color: red;
  }
  div + p {
    color: blue;
  }
  div ~ p {
    background-color: orange;
  } 
</style>
<h6>Element Position CSS Selector Example</h6> 
<div>
  <p>I am immediate child of div</p>
  <section>
    <p>I am grand child of div</p>
    <section>
      <p>I am great grand child of div</p>
    </section>
  </section>
</div>
<p>I am immediate sibling of div</p>
<p>I am another sibling of div<p>

Element Position CSS Selector Example

I am immediate child of div

I am grand child of div

I am great grand child of div

I am immediate sibling of div

I am another sibling of div

What are pseudo elements?

Pseudo elements are used to style particular parts of an element, rather than the whole thing. For example, you can use it to style the first line or first letter of a paragraph, text you’ve selected, or you can use it to insert text or shapes before or after an element.

They always start with a double colon ::, although a single colon : is still allowed for backwards compatibility. Few examples:-

p::first-line {}
span::first-letter {}
p::selection {}
.header::after {}
.tooltip::before {}

What are pseudo classes?

Pseudo classes are similar to pseudo elements, but instead of styling a part of an element, they apply styles when an element is in a certain state. For example, you could style a button differently based on whether the user has their mouse pointer over it, or when they click the button.

Another common use case is to style only certain occurrences of elements in a row. For example, styling the first tab in a series of tabs, or every second tab.

They all start with a single colon ::. Few Examples:-

button:hover {}
a:link {}     /* Unvisited links */
a:active {}   /* Active links */
a:visited {}  /* Visited links */

input:focus {}
input:disabled {}
input:invalid {}
input:required {}
input:read-only {}
input[type="checkbox"]:checked {}

tr:first-child {}     /* First row of table */
tr:last-child {}      /* Last row of table */
tr:nth-child(2) {}    /* Second row of table */
tr:nth-child(2n) {}   /* All even number rows */
tr:nth-last-child(2) {}   /* Second last row */

Explain CSS Box Model?

The CSS box model is essentially a box that wraps around every HTML element such as div. It consists of following:-

  • Content - The content of the box, where text and images appear
  • Padding - A transparent area outside the content
  • Border - A border that goes around the padding and content
  • Margin - A transparent area outside the border
Margin
Border
Padding
Content

CSS box model example

A typical css to create a box model

div {
    width: 100px;
    height: 100px;
    margin: 20px;
    border: 5px solid red;
    padding: 10px;
}

CSS Tricks to apply margin and padding

Single value margin and padding applies to all sides top, right, bottom and left. Following are different ways to apply margin or padding to individual side or in pairs or in groups.

/* same padding on all 4 sides */
div {
    padding: 10px;
}

/* padding in pair, top/bottom (10px), left/right (20px) */
div {
    padding: 10px 20px;
}

/* three values padding, top (10px), bottom (20px) and left/right (30px) */
div {
    padding: 10px 20px 30px;
}

/* individual padding , in TRBL (top-right-bottom-left) order */
div {
           /* top right bottom left */
    padding: 10px  20px  30px  40px;
}

/* individual padding css */
div {
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;
}

CSS box-sizing

By default width and height property of a box only includes content and do not consider border and padding. This is default css box-sizing:content-box. In this case actual width of box would become 100px (width) + 10px (padding) + 5px (border) = 115px;

If you do not want padding and border to change the width of the box, box-sizing:border-box is your css. This css adjust the width of the content to to include padding and border in same width. In this case actual width of the box would remain 100px (width) and content width will be adjusted to 100px (width) - 10px (padding) - 5px (border) = 85px;

Difference between visibility:hidden and display:none?

visibility:hidden; display:none;
Hides the element Hides the element
Occupy Space Do not occupy space
Affect the layout Do not affect the layout

How would you use media query in CSS3 ?

We can not avoid media queries in responsive web applications. We can provide different styling for different devices such as Mobile, Tablet, Laptop and Desktop using media queries.

The most common approach is mobile first where all styles targeted for mobile devices and we progressively change styles for other devices using media queries.

CSS media query example
/* Mobile */
body { 
    font-size: 1em;
}
/* Tablet */
@media only screen and (min-width: 768px) {
    body {
        font-size: 1.25em;
    }
}
/* Desktop and Laptop */
@media only screen and (min-width : 1224px) {
    body {
        font-size: 1.5em;
    }
}
/* Large Screen */
@media only screen and (min-width : 1824px) {
  body {
        font-size: 1.75em;
    }
}

Difference between inline, inline-block and block display?

inline inline-bock block
Start on a new line No No Yes
Can set hight and width No Yes Yes
Can set left/right margin & padding Yes Yes Yes
Can set top/bottom margin & padding No Yes Yes
Example
display:inline;
inline inline inline
display:inline-block;
inline-block inline-block inline-block
display:block;
block
block

What do you understand from Static, Relative, Absolute and Fixed position?

  • Static - this is the default value, the element is positioned according to normal flow of the page.
  • Relative - the element is positioned relative to its normal position.
  • Absolute - the element is positioned absolutely to its first positioned parent.
  • Fixed - the element is positioned related to the browser window.
  • Sticky - the element is positioned based on the user’s scroll position.
/* block 1, 2, 4, and 6 are at their default static normal position */
div.block-1, div.block-2, div.block-4, div.block-6 {
  position: static;
}

/* block 3 is relative to its normal position b/w block 2 and 4. 
Consume the space of normal position b/w 2 and 4 */
div.block-3 {
  position: relative;
  top: 20px;
  left: 20px;
}

/* block 5 is absolute to its parent container (red border) */
div.block-5 {
  position: absolute;
  top: 80px;
  left: 0px;
}

/* block 7 sticks to the top when you scroll down in parent container (red border) */
div.block-7 {
  position: sticky;
  top: 0px;
}
1
2
3
4
5
6
7

We see absolute 5, relative 3 and sticky 7

Which unit of measurement you use for font-size?

Something that has almost always come up for me is the way you size your text, mainly focused on the units you use. You can of course use pixels (px), but there’s also em, rem, %, vs and vh, along with a few others. Some people still don’t like using pixels, but browsers have improved and they’re generally handled pretty well.

Defining your font sizes in em allows you to change the size of your text based on the size defined at a higher level. For example, if a container has specified a font-size of 2em, and you specify a font-size of 2em on an element inside that container, that element has an effective font-size of 4em! However, this can be a little confusing as you might not always see the size you expect!

.container {
    font-size: 2em;
}

.container > p {
    font-size: 2em; /* this is 2em x 2em = 4em! */
}

The rem unit was created to remedy that confusion. It scales well in the browser, just like em and px, but it uses a base size. From that, all further rem values are calculated. For example, if your base rem value is equal to 16px, then 1rem will always be equal to 16px, 2rem will always be equal to 32px, and so on.

Note: While I’ve explained these units using font-sizes, the same rules apply to any dimensions where you use px, em or rem.

Also read CSS units for font-size: px, em and rem

Do you know about Normalize CSS and Reset CSS?

Each browser like Chrome, Firefox, IE has their own default styling for HTML elements also known as browser’s user agent styles.If you render a pure HTML page like below without any styling, page will look different in different browser as their user agent styling is applied.

<h1>H1 Title</h1>
<h2>H2 Title</h2>
<h3>H3 Title</h3>
<h4>H4 Title</h4>
<h5>H5 Title</h5>
<h6>H6 Title</h6>
<a href="https://codingnconcepts.com/">Coding N Concepts</a>
<code>CSS</code>

Reset CSS

Reset CSS resets all the default styles of browser. It says we don’t need browser’s default at all, we will define as per our need. One of the example is Eric Meyer’s reset.css

reset.css
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Normalize CSS

Normalize CSS is an alternate for CSS reset. Instead of wiping out all styles, provides cross-browser consistency in the default styling of HTML elements.

That means, that if we look at the W3C standards of the styles applied by the browsers, and there is an in inconsistency in one of the browsers, the normalize.css styles will fix the browser style that has the difference. Some part of Necolas normalize.css

normalize.css
/* Add the correct font weight in Chrome, Edge, and Safari. */
b, strong {
  font-weight: bolder;
}
/* Remove the border on images inside links in IE 10. */
img {
  border-style: none;
}
/* Correct the padding in Firefox. */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

What are CSS sprites and why would use them?

If a web page has a large number of images that take a longer time to load because each image separately sends out an HTTP request. The concept of CSS sprites is used to reduce the loading time for a web page because it combines the various small images into one image. It reduces the number of HTTP requests and hence the loading time.

Say you have to show flags of 100 countries on web page, instead of making 100 HTTP requests from browser, combine all the flags in one image known as sprite flags.png and load them in single HTTP request. Each flag will be shown on the HTML page by displaying a part of sprite image using background-position CSS property.

CSS Sprite Example
.flags-canada, .flags-london, .flags-usa {
  background-image: url('../images/flags.png');
  background-repeat: no-repeat;
}
.flags-canada {
  height: 128px;
  background-position: -5px -5px;
}
.flags-usa {
  height: 135px;
  background-position: -5px -143px;
}
.flags-london {
  height: 147px;
  background-position: -5px -288px;
}

What is the z-index in CSS?

The z-index helps to specify the stack order of positioned elements that may overlap one another.

Higher the z-index of an element means,

  • higher stack order,
  • more visibility,
  • cover elements with smaller z-index if overlapping.
CSS Syntax
z-index: auto | number | initial | inherit
Property Values
  • auto: Sets the stack order equal to its parents. This is default.
  • number: Can have zero, positive or negative number. Higher the number, higher stack order.
  • initial: Sets this property to its default value.
  • inherit: Inherits this property from its parent element.