5 Essential CSS Interview Questions*

Explain the CSS “box model” and the layout components that it consists of.

Provide some usage examples.

The CSS box model is a rectangular layout paradigm for HTML elements that consists of the following:

  • Content - The content of the box, where text and images appear
  • Padding - A transparent area surrounding the content (i.e., the amount of space between the border and the content)
  • Border - A border surrounding the padding (if any) and content
  • Margin - A transparent area surrounding the border (i.e., the amount of space between the border and any neighboring elements)

Each of these properties can be specified independently for each side of the element (i.e., top, bottom, right, left) or fewer values can be specified to apply to multiple sides. For example:

/*       top   right  bottom left  */
padding: 25px  50px   75px   100px;

/* same padding on all 4 sides: */
padding: 25px;

/* top/bottom padding 25px; right/left padding 50px */
padding: 25px 50px;

/* top padding 25px; right/left padding 50px; bottom padding 75px */
padding: 25px 50px 75px;
Fields marked with an asterisk (*) are required
Comment submitted succesfully. Thank you.
We are going to review the comment and get back to you as soon as possible.

Explain what elements will match each of the following CSS selectors:

  1. div, p
  2. div p
  3. div > p
  4. div + p
  5. div ~ p
  1. div, p - Selects all <div> elements and all <p> elements
  2. div p - Selects all <p> elements that are anywhere inside a <div> element
  3. div > p - Selects all <p> elements where the immediate parent is a <div> element
  4. div + p - Selects all <p> elements that are placed immediately after a <div> element
  5. div ~ p - Selects all <p> elements that are anywhere preceded by a <div> element
Fields marked with an asterisk (*) are required
Comment submitted succesfully. Thank you.
We are going to review the comment and get back to you as soon as possible.

Explain the meaning of each of these CSS units for expressing length:

  • cm
  • em
  • in
  • mm
  • pc
  • pt
  • px
  • cm - centimeters
  • em - elements (i.e., relative to the font-size of the element; e.g., 2 em means 2 times the current font size)
  • in - inches
  • mm - millimeters
  • pc - picas (1 pc = 12 pt = 1/6th of an inch)
  • pt - points (1 pt = 1/72nd of an inch)
  • px - pixels (1 px = 1/96th of an inch)
Fields marked with an asterisk (*) are required
Comment submitted succesfully. Thank you.
We are going to review the comment and get back to you as soon as possible.

Find top CSS talent today. Toptal can match you with the best developers to finish your project.

Hire Toptal’s CSS Developers

In CSS3, how would you select:

  • Every <a> element whose href attribute value begins with “https”.
  • Every <a> element whose href attribute value ends with “.pdf”.
  • Every <a> element whose href attribute value contains the substring “css”.

Select every <a> element whose href attribute value begins with “https”:

a[href^="https"]

Select every <a> element whose href attribute value ends with “.pdf”:

a[href$=".pdf"]

Select every <a> element whose href attribute value contains the substring “css”:

a[href*="css"]
Fields marked with an asterisk (*) are required
Comment submitted succesfully. Thank you.
We are going to review the comment and get back to you as soon as possible.

Given the following HTML:

<div id="page">
  <h1>Heading Title</h1>
  <h2>Subheading Title</h2>
  <h2>Subheading Title</h2>
  <h1>Heading Title</h1>
  <h2>Subheading Title</h2>
  <h1>Heading Title</h1>
</div>

How could you use CSS to achieve the following automatic numbering:

1) Heading Title
1.1) Subheading Title
1.2) Subheading Title

2) Heading Title
2.1) Subheading Title

3) Heading Title

The following CSS will achieve this type of automatic numbering:

#page {
  counter-reset: heading;
}

h1:before {
  content: counter(heading)") ";
  counter-increment: heading;
}

h1 {
  counter-reset: subheading;
}

h2:before {
  content: counter(heading)"." counter(subheading)") ";
  counter-increment: subheading;
}
Fields marked with an asterisk (*) are required
Comment submitted succesfully. Thank you.
We are going to review the comment and get back to you as soon as possible.
* There is more to interviewing than tricky technical questions, so these are intended merely as a guide. Not every “A” candidate worth hiring will be able to answer them all, nor does answering them all guarantee an “A” candidate. At the end of the day, hiring remains an art, a science — and a lot of work.
Submit an interview question
Submitted questions and answers are subject to review and editing, and may or may not be selected for posting, at the sole discretion of Toptal, LLC.
All fields are required
Thanks for submitting your question.
Our editorial staff will review it shortly. Please note that submitted questions and answers are subject to review and editing, and may or may not be selected for posting, at the sole discretion of Toptal, LLC.
Mikael Kessler
United States
Mikael is a detail-oriented front-end engineer that uses technologies like HTML5, CSS3, and jQuery to deliver high quality, standard-compliant builds. He has extensive experience and proficiency with Ruby on Rails, MySQL, and Heroku, among other server-side technologies and app deployment platforms.
Gleb Polushkin
Russia
Gleb is a front-end developer with over a decade of experience developing for browsers and Flash and nearly as much with Photoshop and graphic design. He is very skilled with responsive web design. He is a relaxed but careful communicator, equally comfortable in leadership and collaborative roles, and works well in diverse teams.
Asael Arenas
Colombia
Asael has over fifteen years of experience in information science and internet media. Since the late 90's, he has been committed to using technology to develop applications that are attractive and useful for users and efficient for customers, for the benefit of trade, research, entertainment, and education. Asael is a pleasant communicator, equally comfortable leading a team, collaborating with colleagues, and working independently.