5 Essential CSS Interview Questions *

Looking for Freelance CSS Developer jobs? Design your lifestyle as a CSS developer with Toptal.

Submit an Interview Question

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, right, bottom, 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;

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

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)

Apply to Join Toptal's Development Network

and enjoy reliable, steady, remote Freelance CSS Developer Jobs.

Apply as a Freelancer

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"]

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;
}

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

Sean McCall

Freelance CSS Developer

United StatesToptal Member Since May 14, 2019

Sean is a senior developer with a broad and versatile skillset and works heavily in React, React Native, and Node.js. He has an entrepreneurial spirit and a midwest work-ethic and has worked with a large range of companies of different size and scope. His strong theoretical and practical background in software architecture, UI design, DevOps, and business consulting make him extremely capable on projects of any size.

Show More

Nick Day

Freelance CSS Developer

United KingdomToptal Member Since July 29, 2019

Nick is a front-end specialist who also has over a decade of back-end experience. He’s highly committed to quality and use of best practices and enjoys crafting simple solutions to complex problems.

Show More

Amanda Vilela

Freelance CSS Developer

BrazilToptal Member Since August 13, 2017

Amanda is a front-end developer who has been working for over nine years designing usable UIs and implementing them by writing scalable and high-performance JavaScript code. She's widely experienced working with a variety of clients from startups to enterprise companies like AT&T, IBM, and Sprint. She also has experience with continuous integration, testing, Git workflows, agile methodologies, and SEO.

Show More

Looking for CSS Developers?

Looking for CSS Developers? Check out Toptal’s CSS developers.

Toptal Connects the Top 3% of Freelance Talent All Over The World.

Join the Toptal community.

Learn more