Top 50 CSS Interview Questions You Should Prepare For In 2023

CSS Interview Questions

1. Name some CSS frameworks. 

There are many CSS frameworks available, some of the most popular ones include:

1. Bootstrap: a popular front-end framework that includes a wide range of CSS and JavaScript components for building responsive websites.
2. Foundation: a responsive front-end framework that includes a grid system, typography styles, and UI components.
3. Bulma: a modern CSS framework based on Flexbox and designed to be easy to use and customize.
4. Semantic UI: a framework that uses natural language conventions to style elements, making it easy to create clean and intuitive interfaces.
5. Materialize: a responsive front-end framework based on Google’s Material Design guidelines.
6. Tailwind CSS: a utility-first CSS framework that provides low-level styles for building custom user interfaces.
7. Pure.css: a minimalist CSS framework that includes a basic set of styles for common HTML elements.
8. Milligram: a lightweight CSS framework that includes a minimal set of styles for typography and layout.
9. Skeleton: a simple and lightweight CSS framework that includes a responsive grid system and basic styles for common elements.
10. Montage: a front-end framework that includes a grid system and styles for common UI elements, and is designed to be easy to customize.

2. What do you understand by the universal sector?

A universal selector is a selector that matches any element type’s name instead of selecting elements of a particular type. 

Example: 

<style>    

* {    
   color: blue;    
   font-size: 10px;    
}     
</style>    

3. Tell us about the use of the ruleset.

The ruleset is used for the identification of selectors, which can be attached with other selectors. The two parts of a ruleset are:

• Declaration block: contains one or more semicolon-separated declarations
• Sector: indicates the HTML element needed to be styled

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

The CSS box model defines the layout and design of CSS elements. The elements are content (like text and images, padding (the area around content), border (the area around padding), and margin (the area around the border). 

5. Differentiate between CSS3 and CSS2.

Here is a table that summarizes the main differences between CSS2 and CSS3:

Feature	CSS2	CSS3
Supports media types	Yes	Yes
Supports pseudo-classes and pseudo-elements	Yes	Yes
Supports selectors	Yes	Yes
Supports box model	Yes	Yes
Supports web fonts	No	Yes
Supports multi-column layouts	No	Yes
Supports transitions	No	Yes
Supports animations	No	Yes
Supports rounded corners	No	Yes
Supports box-shadows	No	Yes

CSS3 is the third version of the Cascading Style Sheets (CSS) language and is an extension of CSS2. It introduces several new features and improvements over CSS2, including support for web fonts, multi-column layouts, transitions, animations, rounded corners, and box-shadows.

6. How can CSS be integrated into an HTML page?

There are three ways of integrating CSS into HTML: using style tags in the head section, using inline-styling, writing CSS in a separate file, and linking into the HTML page by the link tag. 

7. Explain a few advantages of CSS. 

CSS (Cascading Style Sheets) is a stylesheet language used for describing the look and formatting of a document written in HTML or XML. Here are a few advantages of using CSS:

1. Separation of content and presentation: With CSS, you can separate the content of a webpage (written in HTML) from its presentation (defined in CSS). This makes it easier to maintain and update the appearance of a website, as you only need to modify the CSS files instead of making changes to the HTML for every page.
2. Improved accessibility: CSS allows you to specify the font size, color, and other visual aspects of web content, which can make it more accessible for users with disabilities.
3. Better search engine optimization (SEO): By separating the content and presentation of a webpage, you can make it easier for search engines to crawl and index the content of your site, which can improve its ranking in search results.
4. Increased speed and performance: Using CSS can help to reduce the size of your HTML files, which can improve the loading time and performance of your website.
5. Reusability: With CSS, you can define styles that can be reused throughout a website, which can save time and improve consistency.
6. Improved browser compatibility: CSS allows you to create styles that are compatible with different browsers, which can make your website look consistent across different platforms.

New Course: Full Stack Development for Beginners

Learn Git Command, Angular, NodeJS, Maven & MoreENROLL NOW

8. What is meant by RGB stream?

RGB represents colors in CSS. The three streams are namely Red, Green, and Blue. The intensity of colors is represented using numbers 0 to 256. This allows CSS to have a spectrum of visible colors. 

9. What was the purpose of developing CSS?

CSS was developed to define the visual appearances of websites. It allows developers to separate the structure and content of a website that was not possible before. 

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

Classes and IDs are two types of selectors in CSS that can be used to style specific elements on a webpage. Here is a table that summarizes the main differences between classes and IDs:

Feature	Class	ID
Syntax	.	#
Can be applied to	Multiple elements	One element
Can be used in HTML	Yes	Yes
Can be used in CSS	Yes	Yes

• Classes are denoted by a period (.) followed by the class name, and can be applied to multiple elements on a webpage.
• IDs are denoted by a hash (#) followed by the ID name, and can only be applied to a single element on a webpage.

Here is an example of how you can use classes and IDs in HTML:

Copy code<!-- Using a class in HTML -->
<div class="box">This element has the "box" class.</div>
<div class="box">This element also has the "box" class.</div>

<!-- Using an ID in HTML -->
<div id="header">This element has the "header" ID.</div>

And here is an example of how you can use classes and IDs in CSS:

Copy code/* Using a class in CSS */
.box {
  background-color: red;
}

/* Using an ID in CSS */
#header {
  font-size: 36px;
}

Intermediate CSS Interview Questions

In the next section, let us learn some intermediate level CSS interview questions!

1. Define z-index.

Classes and IDs are two types of selectors in CSS that can be used to style specific elements on a webpage. Here is a table that summarizes the main differences between classes and IDs:

Feature	Class	ID
Syntax	.	#
Can be applied to	Multiple elements	One element
Can be used in HTML	Yes	Yes
Can be used in CSS	Yes	Yes

• Classes are denoted by a period (.) followed by the class name, and can be applied to multiple elements on a webpage.
• IDs are denoted by a hash (#) followed by the ID name, and can only be applied to a single element on a webpage.

Here is an example of how you can use classes and IDs in HTML:

Copy code<!-- Using a class in HTML -->
<div class="box">This element has the "box" class.</div>
<div class="box">This element also has the "box" class.</div>

<!-- Using an ID in HTML -->
<div id="header">This element has the "header" ID.</div>

And here is an example of how you can use classes and IDs in CSS:

Copy code/* Using a class in CSS */
.box {
  background-color: red;
}

/* Using an ID in CSS */
#header {
  font-size: 36px;
}

2. What are the benefits of CSS Sprites?

CSS sprites are a technique for combining multiple images into a single image file, and using CSS to display a specific part of that image on a webpage. Here are some benefits of using CSS sprites:

Benefit	Description
Improves performance	By reducing the number of HTTP requests made by the browser, CSS sprites can improve the loading time of a webpage.
Reduces server load	By reducing the number of HTTP requests made to the server, CSS sprites can reduce the load on the server.
Allows for easy maintenance	If you need to update an image, you only need to update a single image file instead of multiple files.
Allows for easy styling	You can use the CSS background-position property to specify which part of the sprite to display, which makes it easy to style and customize the appearance of elements.
Allows for image hover effects	You can use the CSS transition property to create hover effects by changing the background-position of an element on hover.

Here is an example of how you can use CSS sprites in your HTML and CSS:

Copy code<!-- HTML -->
<div class="icon"></div>

Copy code/* CSS */
.icon {
  width: 50px;
  height: 50px;
  background-image: url("sprite.png");
  background-position: -50px 0; /* Display the second image in the sprite */
}

In this example, the icon element will display the second image in the sprite, which is 50 pixels to the right of the first image.

3. How can you target h3 and h2 with the same styling?

To target h3 and h2 elements with the same styling in CSS, you can use a group selector. A group selector is a list of selectors separated by a comma, and it allows you to apply the same styles to multiple elements.

Here is an example of how you can use a group selector to target h3 and h2 elements:

Copy code/* Group selector */
h3, h2 {
  color: red;
  font-size: 24px;
}

In this example, the color and font-size properties will be applied to both h3 and h2 elements.

You can also use a class or an ID to target h3 and h2 elements with the same styling. For example:

Copy code<!-- HTML -->
<h3 class="large-header">Heading 3</h3>
<h2 class="large-header">Heading 2</h2>

Copy code/* CSS */
.large-header {
  color: red;
  font-size: 24px;
}

In this example, both the h3 and h2 elements will have the same styling because they both have the class “large-header”.

4. Name media types allowed by CSS.

CSS allows you to specify different styles for different media types, such as screens, printers, and handheld devices. Here is a list of media types that are supported by CSS:

1. all: This media type is used to apply styles to all media types.
2. print: This media type is used to apply styles when the document is printed.
3. screen: This media type is used to apply styles for computer screens, tablets, and smartphones.
4. speech: This media type is used to apply styles for screen readers and other speech synthesizers.

You can use the @media rule in CSS to specify different styles for different media types. For example:

Copy code/* Apply styles for screens */
@media screen {
  body {
    font-size: 16px;
  }
}

/* Apply styles for printers */
@media print {
  body {
    font-size: 12px;
  }
}

In this example, the font-size of the body element will be 16px when the document is displayed on a screen, and 12px when the document is printed.

5. How can you use CSS to control image repetition?

The background-repeat property is used to control the image. Example:

h3 {
background-repeat: none;
 }

6. Tell us about the property used for image scroll controlling?

The background-attachment property is used to set whether the background image is fixed or it scrolls with the rest of the page. Example for a fixed background-image:

body {
  background-image: url(‘url_of_image’);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

7. Name some font-related CSS attributes. 

The font-related attributes are Font- style, variant, weight, family, size, etc. 

8. Define contextual selectors.

In CSS, contextual selectors allow developers to specify styles of different parts of the document. Styles can be assigned directly to specific HTML tags or create independent classes and assign tags to them. 

9. Explain responsive web design. 

Responsive Design is a web page creation approach that uses flexible images, flexible layouts, and CSS media queries. This design approach aims to build web pages that detect the orientation and screen size of the visitors so that the layout can be changed accordingly.  

Caltech Coding Bootcamp

Become a full stack developer in 6 monthsENROLL NOW

10. Tell us about the general CSS nomenclature.

In CSS, the styling commands are written in value and property fashion. CSS includes a system terminator- semicolon. The entire style is wrapped in curly braces and attached to the selector. This creates a style sheet that can be applied to an HTML page.

11. What are the limitations of CSS?

1. CSS cannot always assure compatibility with every browser; you need to be cautious while choosing the style selector.
2. The parent selector tag is not available, thus you can’t select the parent selector tag.
3. Some selectors can lead to cross-browser issues due to their less browser-friendly behavior.
4. We cannot request a webpage through CSS.

12. How to include CSS in the webpage?

1. With the help of a link tag, you can include an external style sheet file as a CSS file into your HTML file.
2. You can add CSS styles included within your HTML page and write it in the stand-alone stylesheet form of CSS.
3. CSS can be included directly in the HTML tag by adding an inline style to HTML elements.
4. One can import an external stylesheet file as a new CSS file by using the @import rule. 

13. What are the different types of Selectors in CSS?

There are several types of selectors in CSS that you can use to target specific elements on a webpage. Here is a table that lists the different types of selectors:

Selector type	Description
Type selector	Selects elements based on their element type (e.g. p, h1, div).
Class selector	Selects elements based on their class attribute (e.g. .classname).
ID selector	Selects elements based on their ID attribute (e.g. #idname).
Attribute selector	Selects elements based on their attribute and attribute value (e.g. [type=”text”]).
Pseudo-class selector	Selects elements based on their state or position (e.g. :hover, :first-child).
Pseudo-element selector	Selects a specific part of an element (e.g. ::before, ::after).
Universal selector	Selects all elements on the page (e.g. *).
Combinator selector	Combines multiple selectors to select elements that are related to each other in some way.

Here are a few examples of how you can use the different types of selectors in CSS:

Copy code/* Type selector */
p {
  color: red;
}

/* Class selector */
.error {
  color: red;
}

/* ID selector */
#header {
  font-size: 36px;
}

/* Attribute selector */
input[type="text"] {
  width: 200px;
}

/* Pseudo-class selector */
a:hover {
  color: red;
}

/* Pseudo-element selector */
p::first-line {
  font-weight: bold;
}

/* Universal selector */
* {
  margin: 0;
  padding: 0;
}

/* Combinator selector */
h1 + p {
  color: red;
}

In these examples, the selectors are used to apply styles to specific elements on a webpage. For example, the p type selector will apply styles to all p elements, and the .error class selector will apply styles to all elements with the class “error”.

14. What is a CSS Preprocessor? What are Sass, Less, and Stylus? Why do people use them?

CSS preprocessor is a tool used to enhance the basic functionality and let us use the complex logical syntax such as variables, functions, mixins, and code nesting within vanilla CSS scripts themselves.

1. Sass (Syntactically Awesome Style Sheets) uses .sass extension. It is used for indentation; it doesn’t use semicolons or curly brackets.
2. Less (Leener Stylesheets) uses .less extension. It is easy to add to any JavaScript Project by using NPM or less.js file. Here, @ is used to define the variables. 
3. Stylus provides great flexibility in writing syntax. It is able to use native CSS as well as the exclusion of brackets, colons, and semicolons. There is no need to use @ or $ to define the variables.

People use SASS, LESS, and Stylus in order to extend the basic functionality of vanilla CSS.

15. What is VH/VW (viewport height/ viewport width) in CSS?

VH and VW are CSS units used to measure viewport height and viewport width respectively in percentage form in the responsive design techniques. E.g. If the height of the browser is 1000px, then VH is 1/100 of the height of the viewport that is 1000px*(1/100) = 10px, which is the height of the browser.  The same applies to VW (viewport width).

16. Difference between reset vs normalize CSS? How do they differ?

1. Reset CSS is used to remove all built-in styles in the browser such as paddings, margins, and font sizes, and can be reset using all the elements.
2. Normalize CSS is used to make all built-in styles in the browser consistent and correct bugs as per varying browsers.

17. What is the difference between inline, inline-block, and block?

1. Block Elements are <div> and <p>. They usually start on a new line and can take space for an entire row or width.
2. Inline elements are <a>, <span>, <strong>, and <img> tags. They don’t start on a new line. However, they appear on the same line as the content and tags beside them.
3. Inline block elements have padding and margins and set height and width values. Though, they are similar to inline elements. 

18. Is it important to test the webpage in different browsers?

Yes, it is the most crucial thing or the most important trial to do when you design a webpage for the first time and make changes to it. Testing your website periodically in different browsers will help you make every webpage compatible with it as browsers have been going through many updates.

19. What are Pseudo classes?

Pseudo-classes are the type of pseudo-elements that don’t exist in a normal document tree. It allows selecting the regular elements under certain conditions especially when we try to hover over the link; the anchor tags are :link, :visited, :hover, :active, :focus

In this example, the color will be red on the anchor tag when it’s hovered.

/* mouse over link */
a:hover {
color: #FFOOFF;
}

CSS Interview Questions

20. How do you specify units in the CSS? What are the different ways to do it?

There are mainly four different units in the CSS that are px, em, pt, and percentage (%).

1. Px (Pixel) is used for fine-grained control and alignment and not cascade. To get it sharp, we can use 1px or multiple of px.
2. Em is used to maintain relative size and responsive fonts. 1em = 16px having also the same font size. It is advisable to set the font size to 10px in common practice.
3. Pt (point) is a fixed-size unit that is used in print. 1pt = 1/72 inch.
4. Percentage (%) is used to set the font size with respect to the font size of the body. Thus, it is necessary to set the reasonable font size of the body.

21. Does margin-top or margin-bottom have an effect on inline elements?

No, mMargin-top or margin-bottom does not have an effect on the inline elements.

22. What property is used for changing the font face?

The font-family property is used for changing the font face that is applied to the element in the DOM.

23. What are the differences between adaptive design and responsive design?

Adaptive Design:

• Main focus is to develop a website in multiple fixed layout sizes.
• Offers good control over the design to develop variation in screens.
• It is very time-consuming and takes a lot of effort to build the best possible adaptive design as examining it will need to go for many options with respect to the realities of the end user.
• There are six standard screen sizes for the appropriate layouts; they are 320px, 480px, 760px, 960px, 1200px, 1600px to design.

Responsive Design

• Main focus is to show content with respect to browser space.
• Offers less control over the design.
• It takes less time to build the design and there is no screen size issue irrespective of content.
• It uses CSS media queries to design the screen layouts with respect to specific devices and property changes in the screen.

24. How are the CSS selectors matched against the elements by the browser?

Initially, there is a filtration of elements in the DOM via browsers with respect to key selectors that are traversed until we get parents’ elements to determine the matches. Then the browser works on finding all the span elements present in the DOM and traverses them to parent elements to check whether they are matched to paragraph p elements. At last, when the browser finds all matches as parents, the matching process will be stopped and there will be black color applied to the content.

25. How is the border-box different from the content box?

Border-box consists of properties such as content, padding, and the border with respect to height and width. However, Content-box is a default value property used for the box-sizing as well as it helps to add border and padding to give proper height and width to the box without having a border and padding properties.

26. How is opacity specified in CSS3?

Opacity is the measure of content transparency. It is measured in the range from 0 to 1. Value 1 means the content is completely opaque. It is not supportable in the internet browser. Also, the 60% of opacity is applicable in the div section where we need to apply the filter property (polyfill) to make it completely opaque.

27. What is cascading in CSS?

Cascading is defined as the process of style declaration and its weight that will help the browser in selecting the styling rules with respect to time.

28. When does DOM reflow occur?

DOM reflow occurs when you insert, move, update, remove, and animate the elements in the DOM as well as when you modify content on the page and change style.

29. Different Box Sizing Property?

Content-box, Padding-box and Border-box

30. How to center align a div inside another div?

A div inside another div A is center aligned with the help of aligning div property to content via HTML script and CSS to the element in the DOM.

31. What is the grid system?

The CSS grid system is a type of powerful layout of 2 dimensional systems with respect to columns and rows.

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

display: none, visibility: hidden, position: absolute

33. What does the: root pseudo-class refer to?

The: root selector pseudo-class refers to the CSS selector level 3. It helps to target the highest-level parent element present in the DOM.

34. What does Accessibility (a11y) mean?

Accessibility is to make the system accessible in such a manner that the website should have the text-to-speech capability, for people with physical disabilities, designed with the help of software or hardware combinations.

35. How do I restore the default value of a property?

keyword “initial” is used to restore the default value of a property.

36. Difference between CSS grid vs flexbox?0

1. CSS Grid Layout is a two-dimensional system along with rows and columns. It is used for large-sized layouts.
2. Flexbox is a Grid layout with a one-dimensional system either within a row or a column. It is used for the components of an application.

37. How does Calc work?

Calc can be used to specify the result of the mathematical operation of two or more elements. For example to specify the width elements by the addition of two or more elements, we can write as

.foo {
Width: calc(100px+50px)
}

38. What do CSS Custom properties variables mean?

CSS Custom properties variables are defined for CSS variables as well as cascading variables with specific values that can be reused.

39. What is the difference between CSS variables and pre-processor (SASS, LESS, Stylus) variables?

1. CSS variables don’t need a pre-processor. It is cascaded, accessed, and manipulated in JavaScript.
2. Preprocessor variables don’t cascade.

40. What does * { box-sizing: border-box; } do? What are its advantages?

Box-sizing: border-box is used to provide the inner dimension for the elements in the document by providing padding and border with respect to the height and width of the content.

41. What does !important mean in CSS?

The style “!important” in the CSS has the highest precedence. Also, the cascaded property will be overridden with it.

42. What is progressive rendering? How do you implement progressive rendering on the website? What are its advantages?

Progressive rendering is the process of improving the performance of a webpage with respect to loading time in order to display the content speedily. The use of loading the lazy loading of the image with the help of Intersection Observer API via viewport. 

43. Does style1.css have to be downloaded and parsed before style2.css can be fetched?

No. The CSS file will be downloaded via browser in order to appear on the HTML page.

44. How to determine if the browser supports a certain feature?

@support tag in the CSS is used to scan and determine whether the browser supports a certain feature or not.

45. How does absolute positioning work?

Absolute positioning is used to place the element which is then removed from the HTML document from the normal workflow without creating any space for the element in the HTML page layout. The element can be positioned respectively to the closest positioned ancestor; otherwise, if the ancestor is not found, the element is placed with respect to the initial container box. The values provided to the top, right, left and bottom determine the final position of the element.

46. Does this property work overflow: hidden?

Overflow: the hidden property is used to specify the content’s clipping. We need to add scrollbars to the content area at the time of specified container size exceeding the content limit where the content gets enclosed. This makes the content invisible via clipping; also the overflow value will be hidden.

47. When should you use translate () instead of absolute positioning?

Translate is a CSS transform value. On changing opacity or transform, browser reflow or repaint is not triggered. Transform requires the browser to create a GPU layer for elements but using the CPU changes absolutes positioning properties. Translate () is more efficient and results in shorter paint times. On using translate (), element occupies original space, unlike in changing absolute positioning. 

48. Name different ways to position some aspects in CSS. 

The positioning property specifies the positioning method type. The five different position values are fixed, static, absolute, sticky, and relative. The elements are positioned using top, left, right, and bottom properties. These properties need to be set first, and they work depending on position value. 

49. What are mixins?

A mixin is similar to a function block of code returning a single value—mixin output lines of Sass code that directly compiles into CSS styles. At the same time, the function returns a value that becomes the value for a CSS property or something that can be passed to another mixin.

50. How can you optimize the webpage for prints?

Identify and control ‘content areas’ of the website. A website generally has a footer, header, sidebar, navbar, and main content area. Most of the work is done by controlling the content area. So, conquer print media without changing the website’s integrity by using page breaks, creating a stylesheet for print, size your page for print, and avoid unnecessary HTML tables.