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

`z-index` works only when the ________ property is defined.

<p><code>z-index</code> works only when the ________ property is defined.</p>


The element with the higher `z-index` is stacked _________ the smaller `z-index` element.

<p>The element with the higher <code>z-index</code> is stacked _________ the smaller <code>z-index</code> element.</p>


<html>
<head>
</head>
<body style="">
  <div style="display: flex; height: 150px;">
<div id="box-1" style="position: relative;
  top: 0px;
  left: 10px;
  width: 50px;
  height: 50px;
  background: #ccc;">  </div>
    <div id="box-2" style=" position: relative;
  top: 10px;
  left: -20px;
  width: 50px;
  height: 50px;
  background: #a00;
  z-index: 5;">  </div>
    <div id="box-3" style="position: relative;
  top: 30px;
  left: -40px;
  width: 50px;
  z-index: 2;
  height: 50px;
  background: #111;">  </div>
    </div>
</body> 
</html>

Which of the following boxes has the highest `z-index` value?

<html>
<head>
</head>
<body style="">
  <div style="display: flex; height: 150px;">
<div id="box-1" style="position: relative;
  top: 0px;
  left: 10px;
  width: 50px;
  height: 50px;
  background: #ccc;">  </div>
    <div id="box-2" style=" position: relative;
  top: 10px;
  left: -20px;
  width: 50px;
  height: 50px;
  background: #a00;
  z-index: 5;">  </div>
    <div id="box-3" style="position: relative;
  top: 30px;
  left: -40px;
  width: 50px;
  z-index: 2;
  height: 50px;
  background: #111;">  </div>
    </div>
</body> 
</html>
<p>Which of the following boxes has the highest <code>z-index</code> value?</p>


What is the default value of the `z-index` property?

<p>What is the default value of the <code>z-index</code> property?</p>


Is it possible for the `z-index` property to have a negative value?

<p>Is it possible for the <code>z-index</code> property to have a negative value?</p>


Given the following code, which color box will be on top?


```css
<html>
<head>
<style>
#outer {
  display: flex;
  height: 150px;
}
#box-1 {
  position: relative;
  top: 0px;
  left: 10px;
  width: 50px;
  height: 50px;
  z-index: 5;
  background: blue;
}
#box-2 {
  position: relative;
  top: 10px;
  left: -20px;
  width: 50px;
  z-index: 3;
  height: 50px;
  background: #red;
}
#box-3 {
  position: relative;
  top: 30px;
  left: -50px;
  width: 50px;
  z-index: 150;
  height: 50px;
  background: black;
}
</style>
</head>
<body>
  <div id="outer">
    <div id="box-1">  </div>
    <div id="box-2">
      <div id="box-3">  </div>
    </div>
  </div>
</body> 
</html>
```


<p>Given the following code, which color box will be on top?</p>
<pre><code class="language-css">&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
#outer {
  display: flex;
  height: 150px;
}
#box-1 {
  position: relative;
  top: 0px;
  left: 10px;
  width: 50px;
  height: 50px;
  z-index: 5;
  background: blue;
}
#box-2 {
  position: relative;
  top: 10px;
  left: -20px;
  width: 50px;
  z-index: 3;
  height: 50px;
  background: #red;
}
#box-3 {
  position: relative;
  top: 30px;
  left: -50px;
  width: 50px;
  z-index: 150;
  height: 50px;
  background: black;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div id=&quot;outer&quot;&gt;
    &lt;div id=&quot;box-1&quot;&gt;  &lt;/div&gt;
    &lt;div id=&quot;box-2&quot;&gt;
      &lt;div id=&quot;box-3&quot;&gt;  &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt; 
&lt;/html&gt;
</code></pre>


## Can you think of some other ways to create a stacking context other than the `z-index` property?

Evaluate yourself with a quiz on the concepts of z-index and the stacking context of CSS in this lesson.

Introduction

Basic Styling

Intermediate Styling

Advance Styling

Advance Concepts

Responsive Design

Wrapping Up

z-index and Stacking Context

Quiz on z-index and stacking context

Can you think of some other ways to