5 Essential CSS Interview Questions *

Toptal sourced essential questions that the best CSS developers and engineers can answer. Driven from our community, we encourage experts to submit questions and offer feedback.

Hire a Top CSS Developer Now
Toptal logois an exclusive network of the top freelance software developers, designers, marketing experts, product managers, project managers, and finance experts in the world. Top companies hire Toptal freelancers for their most important projects.
1.

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

Provide some usage examples.

View answer

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;
2.

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
View answer
  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
3.

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

  • cm
  • em
  • in
  • mm
  • pc
  • pt
  • px
View answer
  • 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)
4.

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”.
View answer

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

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

View answer

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

These sample questions are intended as a starting point for your interview process. If you need additional help, explore our hiring resources—or let Toptal find the best developers, designers, marketing experts, product managers, project managers, and finance experts for you.

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

Looking for CSS Developers?

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

Peter Bolemant

Freelance CSS Developer
Slovakia
Toptal Member Since January 8, 2020

Peter is a full-stack developer with over 15 years of experience working on various projects from simple websites, mobile apps, eCommerce, and enterprise portals to mission-critical back-end services. His primary tech stack consists of PHP, JavaScript, SQL, HTML, and (S)CSS. Peter loves clean, tested code and enjoys innovating and making software beautiful from the inside and outside to achieve high maintainability and superb user experiences.

Show More

Abhilash Sandi

Freelance CSS Developer
United States
Toptal Member Since December 20, 2021

Abhilash is a senior software engineer with 10+ years of experience, specializing in React front-end development for the past three years. His technical strengths include React, JavaScript, Node.js, Angular, HTML, and CSS. Abhilash's industry experience is backed by a bachelor's degree in computer science from the National Institute of Technology in Nagpur, India.

Show More

Giulia Cardieri

Freelance CSS Developer
Canada
Toptal Member Since September 19, 2018

Giulia is a creative and detail-oriented freelancer with a passion for front-end development and UI/UX design. She has over six years of experience developing web applications for professional, academic, and personal projects. Giulia is a CSS enthusiast, and she is always learning new technologies. She is a good communicator and values empathy between co-workers.

Show More

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

Join the Toptal community.

Learn more