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

# Solution review

Let's have a look at the solution first:

body {
  font: 1.2em / 1.5 Helvetica Neue;
  padding: 1em 0;
}

* {
  margin: 0;
  box-sizing: border-box;
  color: white;
}

p {
  background-color: rgba(200, 222, 244, 0.3); 
}

h2 {
  background-color: rgba(115, 119, 125, 0.5); 
  text-align: center;
}

.box {
  background: url(/api/collection/10370001/4796942564458496/page/6339660860096512/image/5203157496889344) center;
  width: 70%;
  height: 400px;
  margin:  auto;
  border-radius: 15px;
  border: 8px #555 solid;
  padding: 0.5em;
}

<html>
 <head>
 </head>
 <body>
  <div class="box">
    <h2>American Football History</h2>
    <p>American football evolved from the sports of soccer and rugby.
       Rugby, like American football, is a sport where two competing teams vie for 
       control of a ball, which can be kicked through a set of goalposts or run into
      the opponent's goal area to score points.</p>
  </div>
 </body>
</html>
















codemirror

## Explanation

```css
body {
  font: 1.2em / 1.5 Helvetica Neue;
  padding: 1em 0;
}
```
The `font` shorthand property is used where `1.2em` is the font-size, `1.5` is the line-height, and the `font-family` is `Helvetica Neue`. The `padding` property is adding `1em` space on the top and left side of the body and `0` on the left and right sides. 

```css
* {
  margin: 0;
  box-sizing: border-box;
  color: white;
}
```

All the elements must have a `border-box` around them so that the `padding` and `border` are included in an element’s total `width` and `height`. The default `margin` of all the elements is set to `0` because we want to add our custom values. The text `color` of all the elements is set to `white`. 


```css
p {
  background-color: rgba(200, 222, 244, 0.3); 
}
```

We used the `rgba(200, 222, 244, 0.3)` background color to add transparency in the background.

```css
h2 {
  background-color: rgba(115, 119, 125, 0.5); 
  text-align: center;
}
```

We used the `rgba(115, 119, 125, 0.5)` background color to add transparency in the background. The text of `h2` is aligned in the `center`.


```css
.box {
  background: url(/api/collection/10370001/4796942564458496/page/6339660860096512/image/5203157496889344) center;
  width: 70%;
  height: 400px;
  margin:  auto;
  border-radius: 15px;
  border: 8px #555 solid;
  padding: 0.5em;
}
```

The image is added using the `background` shorthand property, which positions the image in the `center`. The `width` of the box is `70%` of the total available space. The `height` of the box is `400` pixels. The `margin: auto` positions the box in the center of the webpage. For the rounded corners, we use the `border-radius` property. The `8px #555 solid` border is added around the box. The `padding` property pushes the text inside of the box by `0.5em`.

The solution to the challenge of the background and border properties is discussed in this lesson.

Introduction

Basic Styling

Intermediate Styling

Advance Styling

Advance Concepts

Responsive Design

Wrapping Up

Solution Review: CSS Background and Border Challenge 1

Solution review

Explanation