50+ CSS Interview Questions and Answers

Introduction

CSS (Cascading Style Sheets) is a cornerstone technology of the web, which is used to describe the presentation of web pages, including colors, layout, and fonts. In this guide to help you prepare for your next interview, we've compiled a list of 50 CSS interview questions and answers.

CSS fundamentals

1. What is CSS?

CSS stands for Cascading Style Sheets and is used to style and layout web pages. It controls the design and feel of websites, from colors and fonts to spacing and layout. A simple example in real life would be a building that hasn't yet been renovated or awaiting professionals like painters to transform the building into an aesthetic pleasing and functional space.

2. How do you include CSS in a web page?

You can include CSS using an external stylesheet, internal stylesheet, or inline styles.

<!-- External -->
<link rel="stylesheet" href="styles.css">

<!-- Internal -->
<style>
  body { background-color: lightblue; }
</style>

<!-- Inline -->
<div style="color: red;">This is a red text.</div>

Selectors and Specificity

3. What is a CSS selector?

A CSS selector is a pattern used to select the elements you want to style.

4. What is specificity in CSS?

Specificity determines which CSS rule is applied by the browser when multiple rules could apply to the same element. It's calculated based on the types of selectors used.

/* ID selector (more specific) */
#header { color: blue; }

/* Class selector */
.header { color: green; }

5. What are the different types of CSS selectors?

• Element Selector: div
• Class Selector: .className
• ID Selector: #idName
• Attribute Selector: [type="text"]

Box Model

6. Explain the concept of CSS Box Model?

The CSS Box Model describes the rectangular boxes generated for elements in the document tree. It usually defines the element's content, padding, border, and margin.

The four essential components of the box model are content, padding, border, and margin.

7. How do you center a block element horizontally?

You can center a block element horizontally using margin: auto. Block elements take up the whole width, remember that.

.center {
  width: 50%;
  margin: 0 auto;
}

8. What is the difference between padding and margin?

Padding is the space between the content and the border, while margin is the space outside the border.

Flexbox and Grid

9. What is Flexbox?

Flexbox is a CSS layout module designed to make it easy to align and distribute space among items in a container.

10. How do you create a Flexbox container?

You can create a Flexbox container by setting the display property to flex.

11. What is CSS Grid?

CSS Grid is a layout system optimized for creating two-dimensional grid-based layouts.

12. How do you create a Grid container?

You can create a Grid container by setting the display property to grid.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Responsive Design

13. What is responsive design?

Responsive design ensures that web pages look good on all devices by using flexible layouts, images, and CSS media queries.

14. What is a media query?

A media query is a CSS technique used to apply styles based on the conditions of the viewport, such as width or height.

@media (max-width: 600px) {
  body {
    background-color: lightgreen;
  }
}

Positioning

15. What are the different CSS positioning schemes?

• Static: Default position, elements are positioned according to the normal flow of the document.
• Relative: Positioned relative to its normal position.
• Absolute: Positioned relative to the nearest positioned ancestor.
• Fixed: Positioned relative to the viewport.
• Sticky: Switches between relative and fixed, depending on scroll position.

16. How do you create a sticky element?

A sticky element toggles between relative and fixed positioning, depending on the user's scroll position.

.sticky {
  position: -webkit-sticky; /* For Safari browser*/
  position: sticky;
  top: 0;
}

Advanced Concepts

17. What is a CSS preprocessor?

A CSS preprocessor extends CSS with variables, nested rules, and functions. Common preprocessors include SASS, LESS, and Stylus.

18. What is the difference between SASS and SCSS?

SASS uses indentation for nesting, while SCSS uses curly braces and semicolons, making it more similar to standard CSS.

19. How do you use a CSS variable?

CSS variables are defined using the -- prefix and accessed using the var() function.

:root {
  --main-color: blue;
}

.header {
  color: var(--main-color);
}

20. What are pseudo-classes?

Pseudo-classes are used to define the special states of an element e.g. hover.

a:hover {
  color: red;
}

21. What are pseudo-elements?

Pseudo-elements are used to style specific parts of an element.

p::first-line {
  font-weight: bold;
}

22. How do you create animations in CSS?

You can create animations using the @keyframes rule and the animation property.

@keyframes example {
  from { background-color: red; }
  to { background-color: yellow; }
}

.animated {
  animation: example 5s infinite;
}

Performance

23. How do you optimize CSS performance?

• Minimize CSS files
• Combine multiple CSS files into one
• Use CSS shorthand properties
• Avoid CSS expressions

24. What is Critical CSS?

This refers to the CSS required to render the above-the-fold content of a webpage, improving initial load times.

Common Problems and Solutions

25. How do you resolve cross-browser compatibility issues in CSS?

• Use CSS resets
• Use vendor prefixes
• Validate your CSS
• Test on multiple browsers

26. How do you make a background image cover the entire screen?

You can use the background-size: cover; property.

body {
  background-image: url('image.jpg');
  background-size: cover;
}

27. How do you create a CSS triangle?

You can create a CSS triangle using the border property.

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

28. How do you hide an element but keep it in the DOM?

You can use the visibility: hidden; property.

.hidden {
  visibility: hidden;
}

29. How do you use CSS transitions?

CSS transitions allow you to change property values smoothly over a given duration.

.transition {
  transition: width 2s;
}
.transition:hover {
  width: 200px;
}

30. What is the difference between display: none; and visibility: hidden;?

display: none; removes the element from the document flow, while visibility: hidden; hides the element but keeps it in the flow.

Miscellaneous

31. How do you create a CSS-only dropdown menu?

You can use the :hover pseudo-class to show and hide the dropdown content.

.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
}
.dropdown:hover .dropdown-content {
  display: block;
}

32. What is the box-sizing property?

The box-sizing property defines how the width and height of an element are calculated.

.box {
  box-sizing: border-box;
}

33. What is the z-index property?

The z-index property specifies the stack order of an element.

.layer1 {
  position: absolute;
  z-index: 1;
}
.layer2 {
  position: absolute;
  z-index: 2;
}

34. How do you style a checkbox?

You can style a checkbox using the :checked pseudo-class.

input[type="checkbox"]:checked + label {
  color: green;
}

35. What is a CSS sprite?

A CSS sprite is a technique for combining multiple images into one, reducing the number of HTTP requests.

.sprite {
  background-image: url('sprite.png');
  background-position: -50px -100px;
  width: 50px;
  height: 50px;
}

36. What is the calc() function?

The calc() function performs calculations to determine CSS property values.

.container {
  width: calc(100% - 50px);
}

37. How do you create a gradient background?

You can create a gradient background using the linear-gradient or radial-gradient functions.

.gradient {
  background: linear-gradient(to right, red, yellow);
}

38. What is the clip-path property?

The clip-path property defines a clipping region to display only a portion of an element.

.clip {
  clip-path: circle(50% at 50% 50%);
}

39. How do you create a responsive image gallery?

You can create a responsive image gallery using Flexbox or CSS Grid.

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

40. What is the object-fit property?

The object-fit property specifies how an element's content should be resized to fit its container. Mostly used together with images.

img {
  object-fit: cover;
}

41. How do you create a parallax scrolling effect?

You can create a parallax scrolling effect using background images and the background-attachment property.

.parallax {
  background-image: url('parallax.jpg');
  background-attachment: fixed;
  background-size: cover;
}

42. What is the filter property?

The filter property applies graphical effects like blur, brightness, and contrast to an element.

.blur {
  filter: blur(5px);
}

43. How do you create a CSS-only tooltip?

You can create a CSS-only tooltip using the :hover pseudo-class and the ::after pseudo-element.

.tooltip {
  position: relative;
}

.tooltip::after {
  content: 'Tooltip text';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: black;
  color: white;
  padding: 5px;
  border-radius: 3px;
  display: none;
}

.tooltip:hover::after {
  display: block;
}

44. What is the backface-visibility property?

The backface-visibility property determines whether the back face of an element is visible when rotated.

.flip {
  transform: rotateY(180deg);
  backface-visibility: hidden;
}

45. How do you create a CSS-only modal?

You can create a CSS-only modal using the :target pseudo-class.

.modal {
  display: none;
}

.modal:target {
  display: block;
}

46. What is the appearance property?

The appearance property allows you to change the default styling of an element to match a native UI element.

button {
  appearance: none;
}

47. How do you create a responsive navigation menu?

You can create a responsive navigation menu using Flexbox and media queries.

nav ul {
  display: flex;
  list-style: none;
}

@media (max-width: 600px) {
  nav ul {
    flex-direction: column;
  }
}

48. What is the counter-reset property?

The counter-reset property creates or resets a CSS counter.

.counter {
  counter-reset: section;
}

.counter h2::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}

49. How do you style a range input?

You can style a range input using the ::-webkit-slider-thumb pseudo-element.

input[type="range"]::-webkit-slider-thumb {
  background: red;
  border-radius: 50%;
}

50. What is the @supports rule?

The @supports rule allows you to apply styles based on whether the browser supports a specific CSS feature.

@supports (display: grid) {
  .grid-container {
    display: grid;
  }
}

51. Describe the difference between block and inline elements in CSS.

Block elements in CSS always start on a new line and occupy the full width available, stretching out to the left and right as far as possible. Inline elements do not start on a new line and only take up as much width as necessary.

want to learn more about flex and grid?

To get deeper into CSS flex and grid, you can check these two guides to improve your understanding on how CSS really works with layouts.

• Flexbox the complete guide
• Grid the complete guide

Wrap up

Hurray! You must be confident enough by going through these questions, all you need to know to tackle any interview questions. Practice makes improvements, not perfect. Keep practicing and good luck with your interviews!