The ultimate guide to CSS interviews, developed by FAANG engineers. Prep faster and get interview-ready in hours with battle-tested, real-world questions and a structured approach to styling and advanced concepts.

In front-end interviews there’s a lot to cover. You have to study up on JavaScript, HTML, and then there’s CSS, and that’s the focus of this course.

This course compiles a comprehensive range of questions that you are most likely to be tested on during front-end interviews. This is an intermediate course with more than 250 coding challenges and multiple choice questions, so there’s plenty of opportunities to get your hands dirty.

You will start by going through several self-assessment exams to get an idea of what you’ll need to study up on. From there, you’ll go into interview questions on styling such as text, colors, backgrounds, and display.

In the latter half of the course, you’ll focus on advanced concepts like Flexbox, block formatting, and working with SVG. In all, this course serves as a stand-alone guide for those who are starting to prepare for front-end interviews.

By the end of this course, you will have gained the confidence to go in and answer any question.

CSS for Front-end Interviews

Suppose we have defined the same rules using external, internal, and inline CSS. Which of the following has a higher specificity and will be applied?

Suppose we have defined the same rules using external, internal, and inline CSS. Which of the following has a higher specificity and will be applied?

What is the default value of the `background-origin` property?

What is the default value of the <code>background-origin</code> property?

The _______ method moves an element from its current position.

The _______ method moves an element from its current position.

Purple

If we define the `<div> Hello </div>` element and add the color properties as follows:

```css
div { color: purple; }

div { color: red; }

div { color: blue; }
```

Which color is applied to "Hello?"

If we define the <code>&lt;div&gt; Hello &lt;/div&gt;</code> element and add the color properties as follows:
<pre><code class="language-css">div { color: purple; }

div { color: red; }

div { color: blue; }
</code></pre>
Which color is applied to “Hello?”

With `box-sizing`, the ______ and ______ properties are included in the width and height of an actual element. 

With <code>box-sizing</code>, the ______ and ______ properties are included in the width and height of an actual element.

Which of the following is not a property of the flexbox model?

Which of the following is not a property of the flexbox model?

With the ________ property, we can set the HTML element to behave as a grid container.

With the ________ property, we can set the HTML element to behave as a grid container.

Which of the following is not a combinator?

Which of the following is not a combinator?

________ is the default value of the `object-fit` property.

________ is the default value of the <code>object-fit</code> property.

What is the unit of value used in the `rotate()` function?


What is the unit of value used in the <code>rotate()</code> function?

```css
<head name="viewport" content="width=device-width, initial-value=1.0">
```

```css
<meta name="viewports" content="size=device-width, initial-scale=5.0">
```

```css
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```

```css
<link name="viewport" content="width=device-width, initial-scale=3.0">
```

Which of the following syntax is correct for displaying a viewport element in web pages?

Which of the following syntax is correct for displaying a viewport element in web pages?

Which CSS rule is used to define the behavior of an animation?

Which CSS rule is used to define the behavior of an animation?

Which CSS selector is used to select elements with an attribute value containing a specified word?

Which CSS selector is used to select elements with an attribute value containing a specified word?

Which rule makes it possible to define different styles for different media types in the same stylesheet?

Which rule makes it possible to define different styles for different media types in the same stylesheet?

Which CSS property resets all the stylings of a selected element?

Which CSS property resets all the stylings of a selected element?

Which pseudo-class is used to select an element based on an index which represents the element’s position amongst its siblings?

Which pseudo-class is used to select an element based on an index which represents the element’s position amongst its siblings?

The _________ property is used for overriding the styles that are previously declared in other style sources.

The _________ property is used for overriding the styles that are previously declared in other style sources.

Quiz yourself by answering some questions on the intermediate concepts of CSS, such as pseudo-class, position, floats, and transform properties.

Introduction

Basic Styling

Intermediate Styling

Advance Styling

Advance Concepts

Responsive Design

Wrapping Up

Self Evaluation: CSS Intermediate Quiz

Quiz on CSS intermediate concepts