Top 17 frequently asked CSS Interview questions and answers

The box-sizing property defines how the width and height of an element are calculated (related to the box model in CSS).
As you know by default:
- Width of an element = border left + padding left + width of content + border right + padding right.
- Height of an element = border top + padding top + height of content + border bottom + padding bottom.

Let see an example:

div.content {
   width: 150px;
   height: 200px;
   float: left;
   border: 0;
   padding: 0
}

Okay, you can see that:
- Width of div.content element = 0 + 0 + 150 + 0 + 0 = 150px;
- Height of div.content element = 0 + 0 + 200 + 0 + 0 = 200px;

Now we change padding 0 to 20px

div.content {
   width: 150px;
   height: 200px;
   float: left;
   border: 0;
   padding: 20px;
}

Now the width and height of this div has changed:
- Width of div.content element = 0 + 20 + 150 + 0 + 20 = 190px;
- Height of div.content element = 0 + 20 + 200 + 0 + 20 = 240px;

* Summary : you will see a problem total width and height of that element is inscrease when add more padding and border, This will cause the boxes to the right of it to be pushed back to the right or down the line.
It may be broken GUI of your page if you add more padding or border. To fix this problem please follow more below.

Now we will try to add more box-sizing to this box.

div.content {
   width: 150px;
   height: 200px;
   float: left;
   border: 0;
   padding: 20px;
   box-sizing: border-box;
}

You will see some change as below:
- Width of div.content element = 0 + 20 + 110 + 0 + 20 = 150px;
- Height of div.content element = 0 + 20 + 160 + 0 + 20 = 200px;

So you can see that the box-sizing property allows us to include the padding and border in an element's total width and height. It not make change total width and height of an element, instead it subtracts its own  width/height of content.

The CSS Box Model All HTML elements can be considered as boxes. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.
You can see the picture below: 

This is a <div> tag, it has content w : 794px and h: 160px, padding : 50px 20px 50px 20px, border 5px and margin: 50px 30px;

So what is the total width and height of this box?

To calculate the width & height of a box we have formula is :

- Width of an element = border left + padding left + width of content + border right + padding right.
- Height of an element = border top + padding top + height of content + border bottom + padding bottom.

Now we apply this formula to calculate the width and height of the above box:

- Total width = 5 + 20 + 794 + 20 + 5 = 844px

- Total height = 5 + 50 + 160 + 50 + 5 =270px

1. Display block

The display block always displays 100% of the line. even if the total content does not show 100% of the line, it will replace with margin and do not allow other elements to display on the same line as it.

See an example :

<p style="width: 200px"> write html in here </p>

<p> tag is a block tag and I set width to 200px. 

You can see it always display all of the line, although I have set the width to it.

2. Display inline-block

Inline block it only displays width depends on the content inside of it or depends on you set the width to it. You can display many tags inline-block in the same line.

You can see the example below to understand:

Using @font-face of css3 to import font. See an example below:

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-Regular.eot');
    src: local('Roboto Regular'), 
        url('../font/Roboto-Regular.eot?#iefix') format('embedded-opentype'), 
        url('../font/Roboto-Regular.woff') format('woff'), 
        url('../font/Roboto-Regular.ttf') format('truetype'), 
        url('../font/Roboto-Regular.svg') format('svg');
    font-weight: 400;
    font-style: normal;
} 

You can refer below q&a to get more info:

How to add custom font into Html using CSS?

We have 3 ways to import CSS in Html page:

- Inline style

- Internal style

- External file style 

Also, you can use javascript to add CSS in the Html page.

You can refer below article to get more info:

How to add css to html page for BEST performance

Because of some reasons below:

- Scalable
- Easy maintain
- Reuseable
- Change the CSS file will affect all Html file
- Increases time load site (can minify, gzip....)

Selectors are patterns used to select one or more elements in your Html page which you want to style.

We have many selector support in CSS some popular selectors are:

- Element 

- Class

- Id

- Attribute

- Pseudo-elements

- Pseudo class...

you can refer here to see more

- The id stands for identity, in an HTML page you can not have more than one HTML tag with the same id. So id is unique.

- The class is not unique so many tags can have the same class value.

You can refer below Q&A to get more info:

 Between class and id selector in CSS

A CSS pseudo-element is used to style specified parts of an element.

For example:
- Style the first letter, or line of an element
- Insert content before or after the content of an element

We have 5 pseudo-elements are:

- ::after
- ::before
- ::first-letter
- ::first-line
- ::selection

For example: I style for the first letter of <p> tag

 p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

See the result here.

Color of <h1> is blue.

Because it is the child tag of div.heading so it will inherit the color of its parent.

See the result here.

- Margin is a space outside of an element, it also essentially a box that wraps around every HTML element and helps make space between elements.

- Padding is a space inside the border of an element, it makes space between content and border of the box.

You can read again question 2 to get more information.

*{ } : The style in this block will apply for all tags in your HTML document.

div.menu *{ } : Style will apply for all tags inside div tag has class is “menu”.

A responsive website is an approach to web design that makes web pages render well on a variety of devices and windows or screen sizes. It must auto adjust and adapt to any device screen size such as laptop, tablet, and mobile.

To make a responsive website use can using CSS, In Css3 has supported @media screen to help you make responsive websites easily.

To get more code and step by step to do you can refer below article:

Best way to design web responsive with Grid View in CSS

To center a div we have many ways to do, I can write down 6 ways as below:

1. Using text-align: center

2. Using margin auto.

3. Using position absolute.

4. Using display flex in CSS.

5. Transform/Translate method.

6. Display table & vertical-align.

You can refer below article to see details for each way.

How to center a div tag in CSS

To create a circle with a <div> tag you can use border-radius property of CSS to do. but have a note width and height of the <div> tag must be the same.

For example:

<style>
 div.heading{
    width: 150px;
    height: 150px;
    border-radius: 100%;
    background-color: #ccc;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
 }
</style>

<div class="heading">
   Circle
</div>

You can see the result here.

Both two properties help float some Html elements and it depends on the screen and document of HTML. To understand them we need to discuss the screen and document of the web page.

I take an example your laptop has screen with 1366x768 and your HTML document has a lot of content and it has width 768px and height 2000px.

- Fixed is set by screen, not by document, so when you scroll it not move

- Absolute is by document or only in some parent box, this box will move when scroll page.

A pseudo-class is used to define a special state of an element.

For example:
- Style an element when a user mouses over it
- Style visited and unvisited links differently
- Style an element when it gets focus
- Select the first child or last child element...

Some  pseudo-classes are:

:active
:checked
:disabled
:empty
:first-child
:focus
:hover
:visited ...