Five CSS interview questions you will be asked every time.

CSS can be one of the tricky topics in interviews. Whenever I have taken interviews and asked people to rate them in javascript and CSS, I have always found that people usually rate them lower in CSS than in Javascript.

In this article, we are going to tackle the 5 basic CSS questions I get every time.

So let’s start.

1. What is the difference between absolute and relative positioning?

By default, all the elements have a position: static. First, we will come to position absolute. An element with position: absolute is positioned relative to its nearest positioned ancestor. Remember, it is not placed relative to an element with position: relative, but relative to the nearest positioned ancestor. And if no positioned element then what? It will take the HTML body as the nearest positioned element.

So here is the code example for the same.

<div class=”outer”>
 <div class=”inner”>
 
 </div>
</div>
.outer {
 width:100px;
 height: 200px;
 border: 1px solid black;
 margin: 0px auto;
 position: relative;
 background: orangered;
}
.inner {
 width:50px;
 height: 50px;
 border: 1px solid black;
 position: absolute;
 background: green;
 left: 10px;
}

This will give us a layout something like this :

CSS position relative vs absolute.

Remember the outer element can be fixed or absolute and this will produce the same effect.

2. How to center align an element vertically and horizontally without using flex or grid?

We will take the previous example in this as well. Suppose we need to center align green box inside our orange-red.

So one might say since green is absolutely positioned, we can give top: 50%and left: 50% but if you did so, you are forgetting one thing. That is the green box has a height and width of its own. So this will give you something like this.

Top: 50% and bottom 50%

To fix this issue we use CSS translate to translate our green box as per x-axis and y-axis. So our updated CSS looks like this:

.outer {
  width:100px;
  height: 200px;
  border: 1px solid black;
  position: relative;
  background: orangered;
}
.inner {
  width:50px;
  height: 50px;
  border: 1px solid black;
  position: absolute;
  left: 10px;
  background: green;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

And we get our solution:

Center align

3. What is the difference between rem, em, and why we need them?

In simple terms, em is relative to its parent whereas rem is relative to root font size. To remember this simply remember r in rem stands for root.

Personally, I prefer rem over em because of the ability to use it across the entire page rather than with em, which can control a particular area of design.

Now the second question, why we need them, this question holds right? We can use px and that will do the job.

One of the use cases I have found is in responsive layouts. Responsive layouts tend to use different font sizes for different screen sizes. Now if we use pixel we have to right media query for every place where we use pixel, but if we use rem we can set the root size, and then for every place the rem will take effect according to the root size.

Example

html {
font-size: 62.5%; //1 rem = 10px; 10px/16px = 62.5%
}

Now in our whole application 1rem = 10px. And now we want to change the font size in our media query

@some_media_query (mobile) {
   font-size: 50%; //1 rem = 8px, 8/16 = 50%
}

So as we can see we changed the rem to 8px and now it will take effect in the whole of the application where rem is used.

4. What is the box model?

This is the one question I am certain you will be asked and why?

Because every element is represented as a rectangular box by the browsers rendering engine. If you have ever debugged CSS code, you might have seen the below image:

This is a representation of the CSS box model and we can see what other properties it comprises of like padding, border, margin, etc.

The box-sizing property allows us to include the padding and border in an element’s total width and height.

5. What is the difference between display: inline and display: inline-block?

We use inline-block to access some properties of block elements that we cannot use with inline elements.

Here is a code example.

<span>Hello</span>
span {
  border: 1px solid black;
  width:200px;
  height: 300px;
  padding: 2px;
  margin: 10px;
}

It gives us this :

So as we can see, that span being an inline element does not have any effect of width, height, margins, and padding. The moment we add display: inline-block we will see these properties in action.