Top 17 frequently asked CSS Interview questions and answers

Dung Do Tien - Jun/03/2020

We have selected 17 frequently asked questions in the CSS interview to help you synthesize your knowledge of CSS and prepare well for your interview. We hope it helpful to you.

CSS Interview questions and answers

1. What is the box-sizing in CSS?

Answer:

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 have 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 increase when adding 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 does not make change the total width and height of an element, instead it subtracts its own width/height of the content.

2. What is the box model in CSS?

Answer:

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

3. What is the difference between the display block and inline-block in CSS?

Answer:

• 3.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> tag is a block tag and I set width to 200px.

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

3.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:

4. How to import a custom font into the Html page using CSS?

Answer:

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?

5. How many ways to import CSS in the Html page?

Answer:

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

6. Why is the external file style sheet most useful?

Answer:

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….)

7. What is the selector in CSS? and how many selectors in CSS?

Answer:

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

8. What is the difference between the Id and class in CSS?

Answer:

• 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

9. What are pseudo-elements in CSS? Explain and provide some pseudo.

Answer:

• 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.

10. Observe the example below and select the right option about what is the color of <h1> tag?

<style>
   body{ 
       font-size: 15px;
       color: gray;
   }
body div.heading{
       color: blue;
   }
</style>
<div class="heading">
   <h1>This is heading 1</h1>
</div>

Answer:

• 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.

11. What is the difference between padding and margin in CSS?

Answer:

• 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.

12. What is the mean of *{} in CSS? Looking example below

*{
   font-size: 15px;
   box-sizing: border-box;
}

Answer:

• *{ } : The style in this block will apply for all tags in your HTML document.
• div.menu *{ } : The style will apply for all tags inside the div tag has the class is "menu"

13. What is a responsive website? And how to make a website responsive using CSS?

Answer:

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

14. How to center a div tag using CSS? and how many ways to do?

Answer:

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

15. How to create a circle using CSS? Assume with a div tag. Please provide an example.

Answer:

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.

16. What is the difference between the position absolute and fixed?

Answer:

• 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 a 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.

17. What are pseudo-classes and what are they used for?

Answer:

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 …

Originally published at https://quizdeveloper.com.