New update is available. Click here to update.

CSS Interview Questions(2022)

Kushleen Waraich
Last Updated: Aug 13, 2022
Difficulty Level :
EASY

Introduction

A modern-day website comprises three different files or codes: HTML (Hyper Text Markup Language), Javascript, and CSS(Cascading Style Sheets). 

  • HTML is a standard markup language used to define the structure of a website.
  • Javascript is a lightweight interpreted programming language that is used to create dynamic and interactive web applications and browsers. 
  • CSS is used to change the overall appearance and style of the website to make it more attractive.
     

In this blog, we have consolidated the top 25 CSS interview questions. But before that, we will discuss what CSS is.

What Is CSS?

CSS stands for Cascading Style Sheets; it helps determine colors, fonts, positioning of certain elements, and even animations. It is used with markup languages like HTML(HyperText Markup Language) or an XML(Extensible Markup Language) document. It is used to make the website more attractive cause why not? You don't want your website to be hideous. There is a tremendous demand for frontend developers who have excellent HTML and CSS skills. CSS concepts are asked in front-end interviews to test if the candidate is comfortable changing styles in the product. CSS interview questions can be tricky sometimes, so candidates need to have a firm grasp of CSS.

CSS Interview Questions
 

1. Name some CSS Frameworks.

CSS framework is a library used to design a website easily, and more functional frameworks come with more features and additional javascript-based functions. Some of them are Foundation, Blueprint, Bootstrap, Gumby, etc.
 

2. What are the different types of CSS?

The different types of CSS are-
Inline- It is used to style a specific HTML element.
Embedded- Also known as Internal CSS, it is used to add <style> tag in the <head> section of HTML.
Linked- Also known as External CSS, it is used to link the webpage to an external .css file.

 

3. Define Universal Sector.

The universal selector selects all the elements and applies the CSS properties to them.

Syntax:

* { style properties }

Example:

* {
  color: blue;
}

 

4. What is the CSS Ruleset?

A CSS ruleset is used to apply a set of properties with some definite values to a single or a specific set of elements in the linked HTML page.

There are two parts of the CSS ruleset-

Declaration Block- Contain one or more declarations that are separated by semicolon and specify the CSS property and property's value applied to the element. 

Selector- Indicates the HTML element that is needed to be styled.

 

5. What are the elements of the CSS Box Model?

The CSS box model is used to create the design and layout of the web pages. The box contains multiple properties like Content, Padding, Border, and Margin.

Content- The text and the images appear in the content of the box.

Padding- Clears an area around the content.

Border- It is a border that goes around the padding and content. 

Margin- Clears an area outside the border.

Both padding and margin are transparent.

 

6. What are the advantages of using CSS?

Below are some of the advantages of CSS-

Multiple device compatibility

Better website speed

Easy to maintain

Flexible positioning of design elements

Offline Browsing

 

7. What is VH/VW in CSS?

VH stands for viewport height, and VW stands for viewport width. They are used to measure CSS units. It is used to improve the responsiveness of the design. The measure VW is equal to 1/100 of the width of the viewport. Similarly, VH is equal to 1/100 of the height of the viewport. 

 

8. What are the different components of CSS style?

The components of CSS style are:
Selectors- The target is a class name, element name, and id name.
Property- The name of the attribute to be styled like border, background color, position, etc.
Values- values allocated to the property.

 

9. What is the difference between a class and an ID?

Class is an attribute that defines a group of HTML elements to apply unique styling and formatting to those elements. Class is not unique and has multiple elements.
The ID selectors style the element with the specified ID. ID is unique, and it can be assigned to a single element.

 

10. Is it possible to make a class selector for a particular elements? If so how?

Yes, it is possible to make a class selector for a particular element- write a period (.) character, followed by the name of the class. 

 

11. How to use External Style Sheet?

An external style sheet defines the style for many HTML pages.
Add a link to the <head> section of each HTML page to use external style sheet.

Example:


<head>
<link rel=���stylesheet” href=”mystyles.css”>
</head>

 

12. How to use grouping in CSS?

Grouping is used for applying CSS styles for more than one HTML element, and this can be done with a single declaration.

Example:

h2,h3
{
Color: #FFFFFF;
}

 

13. What is the difference between reset and normalize CSS?

Reset CSS: It aims to remove all built-in browser styling. For example, margins, paddings, and font sizes of all elements are reset to be the same. 

Normalize CSS: It aims to make built-in browser styling consistent across browsers and correct bugs for common browser dependencies.

 

14. Define gradients in CSS.

The gradient is a property of CSS that allows displaying smooth transformation between more than one specified color. 

There are three types of gradients:
Linear- Goes down/up/left/right/diagonally
Radial- Defined by the center
Conic- Rotated around a center point 



15. What is the use of the “float” property in CSS?

The float property allows an HTML element to be positioned horizontally. It can only take “left” or “right” values.

Example:

h1,h2
{
Float: left;
}

 

16. Explain the different types of selectors in CSS?

A CSS selector is a string that identifies the elements to which a particular CSS property is applied. The different types of selectors are:-

  • Universal Selector: The universal selector selects all the elements and applies the CSS properties to them.
  • Element Type Selector: It matches one or more HTML elements of the same element type.
  • ID Selector: It matches the HTML element with an ID attribute the same as the selector value.
  • Class Selector: It matches all page elements with their class attribute same as the selector value.
  • Descendant Combinator: The descendant combinator combines two or more selectors so that elements can be selected more specifically. It selects all HTML elements: children, grandchildren, great-grandchildren, and so on.
  • Child Combinator: A child combinator targets immediate child elements of a parent element. 
  • General Sibling Combinator: It matches elements based on sibling relationships. The selected elements stay beside each other in the HTML document.
  • Adjacent Sibling Combinator: It targets an element that must be an immediate sibling.
  • Attribute Selector: It targets elements based on HTML attributes' presence and/or value.
  • Pseudo-class: It uses a colon character to identify a pseudo-state that an element might be in, for example, the stage of being hovered.

 

Style Code:


<style>
    /* universal selector */
    * {
     color: blue;
    }

    /* element type selector */
    p {
     font-weight: 900;
    }

    /* id selector */
    #idElement {
     color: green;
    }

    /* class selector */
    .classElement {
     padding: 20px;
     width: 120px;
     height: 50px;
     background-color: green;
     text-align: center;
     border: 2px solid blue;
     margin: 10px;
     color: white;
     align-items: center;
     display: flex;
    }

    /* descendant combinator */
    #container > .classElement {
      background-color: yellow;
      color: black;
    }

    /* child combinator */
    div > p {
      font-size: 1.2rem;
    }

    /* general sibling combinator */
    h1 ~ p {

     text-align: center;
    }

    /* adjacent sibling combinator */
    p + p {
     text-indent: 2.4em;
     margin-bottom: 0;
    }

    /* attribute selector */
    input[type="text"] {
     background-color: black;
     color: white;
     font-weight: bold;
     font-size: 1.4rem;
     width: 200px;
    }

    /* Pseudo-class */
    h1:hover {
     background-color: red;
    }
  </style>

 

Body Code:

<body>
  <h1>CSS Selector</h1>
  <p>Element type Selector</p>
  <p id = "idElement">ID Selector</p>
  <div class="classElement">Class Element 1</div>
  <div class="classElement"><p>Class Element 2</p></div>
  <div class="classElement">Class Element 3</div>
  <div id = "container">
   <div class="classElement">Class Element 4</div>
   <div class="classElement"><p>Class Element 5</p></div> 
  </div>
  <p>Adjacent sibling combinator</p>

  <p>Adjacent sibling combinator</p>
  <input type="text" placeholder = "Attribute Selector"/>
</body>


Output:


Selectors in CSS
 

17. What are the different ways to hide the element using CSS?

The different ways to hide the element using CSS are:

(display: none)- The element will not exist in the DOM if this property is used and it is not available for screen users.
(visibility: hidden)- The element will be present in the DOM bus is not shown on the screen, and it is available to the screen users.
(position: absolute)- Make it available outside the screen.

 

18. Explain browser style sheets, user style sheets, and author style sheets in brief.

Browser style sheets: The browsers, by default, apply style sheets to all web pages. This style sheet varies from browser to browser. Common characteristics in all browser style sheets include black text, blue links, purple visited links, etc. The author style sheet overrides the browser's style sheet.
User style sheets: Most browsers allow users to set their style sheets within their browser. These style sheets will override the browser's default style sheets - for that user only.

Author style sheets: The style sheet created by the developer is the author style sheet. Choosing fonts, colors, etc., in CSS is done using author style sheets.

 

19. What do CSS Custom properties variables mean?

Custom properties are also called CSS variables or cascading variables, and they are defined by users that contain some specific values to be reused throughout a document. -- notion is used to set the value, and the values are accessed using the var() function.

 

20. Mention the difference between the nth-child() and nth-of-type() selectors?

The nth-child() pseudo-class matches an element based on a number, where the number represents the number of siblings that exist before the element in the document tree.

The nth-of-type() pseudo-class matches an element based on a number, where the number represents the element's position within only those of its siblings of the same element type.

Style Code:

p {
     font-size: 2rem;
     font-weight: bold;
    }

    /* works if the second child element is of type p */
    p:nth-child(2) {
     color: red;
    }


    /* does not work as the fourth child element is not of type p */
    p:nth-child(4) {
     color: blue;
    }

    /* applied to second p element */
    p:nth-of-type(2) {
     color: green;
   }

 

Body Code:

<h1>A</h1>  
 <p>B</p> 
 <p>C</p> 
 <h1>D</h1>
 <p>E</p>

 

Output:

Selectors Depiction


21. Name media types allowed by CSS.

Media type specifies how a document is to be presented on different media. Given below is a list of various media types−

  • All- Used for all media type devices.
  • Aural- Used for speech and sound synthesizers.
  • Braille- Used for braille tactile feedback devices.
  • Embossed- Used for paged braille printers.
  • Handheld- Used for small or handheld devices — usually small screen devices such as mobile phones or PDAs.
  • Print- Used for printers.
  • Projection- Used for projected presentations, for example projectors.
  • Screen- Used primarily for color computer screens.
  • Tty- Used for media using a fixed-pitch character grid — such as teletypes, terminals, or portable devices with limited display capabilities.
  • Tv- Used for television-type devices — low resolution, color, limited-scrollability screens, sound available.

 

22. How does !important work in CSS?

!important gives the highest priority to the style rule and overrides the cascaded property.

Style Code:

p {
     font-size: 2rem;
     font-weight: bold;
     color: red;
}

.important {
color: blue !important;
}

 

Body Code:

<p>Coding</p>
/* color is blue instead of red */

<p class="important">Ninjas</p>

 

Output:

          Output Image

 

23. What are the benefits of CSS Sprites?

CSS image sprites are used for merging multiple images into a single larger image. The main advantages of using sprites are:

  • Reduces the number of HTTP requests to get data of multiple images as they are acquired only by sending a single request.
  • Helps in downloading assets in advance that help display icons or images upon hover or other pseudo-states.
  • The browser makes separate calls to get the image for each of them when there are multiple images. Using sprites, the images are combined in one, and we can call for that image using one call.

 

24Explain the difference between margin and padding?

Margin is applicable outside the element and affects the distance with the nearby elements.

Padding is applicable inside elements and affects how far the element's content is away from the border.


Depiction of Margin and Padding

25. Define z-index

Z-index is used to specify the stack order of elements that overlap each other. Its default value is zero and can take both negative and positive values. A higher z-index value is stacked above the lower index element. It takes the following values- auto, number, initial, and inherit. 

Conclusion

This blog covered the top 25 CSS interview questions for 2022 that can help a fresher to go through a basic CSS interview. All the interview questions are explained in detail.

Was this article helpful ?
0 upvotes