25 CSS Interview Questions for Experienced in 2021: Part 2

Table of Contents

Introduction

CSS (Cascading Style Sheets) is widely used to design the webpage and make it attractive. A company will always prefer a frontend developer with solid skills in CSS as they make the webpage more presentable to the users. CSS concepts are asked in frontend interviews to test if the candidate is comfortable changing styles in the product. CSS interview questions can be tricky sometimes, and hence candidates need to have a firm grasp of CSS.

This blog contains a list of the advanced CSS interview questions generally asked in a frontend interview. Would you please go through the 25 CSS Interview Questions For Beginner in 2021 | Part – 1 so that you get the maximum benefit?

Now let’s go through the advanced CSS interview questions.

Advanced CSS Interview Questions

Explain the CSS Box Model and the elements present in it.

Ans:- The CSS box model is a rectangle box wrapped around every HTML element. It describes the rectangular boxes in the document tree and presents the element according to the visual formatting model. Each box in HTML contains content like text, image, video, etc. It is responsible for calculating the space taken up by the block and the box dimensions.

The elements associated with the box model are:-

Content: The part where content like text, image, etc., is placed.
Padding: The area that surrounds the content.
Border: The area that surrounds the padding.
Margin: The area that surrounds the border.

Briefly, explain the z-index property in CSS.

Ans:- The z-index property is used to specify the stack order of positioned elements that may overlap one another. Z-index can be assigned both negative and positive values; by default, it is zero. An element with a lower z-index is always stacked below an element with a higher index.

The following values can be taken by z-index can take following values:

Number: It orders the stack order.
auto: It sets the stack order equal to its parents.
initial: The property is set to its default value.
inherit: It inherits the property from its parent element.

Explain the CSS position property.

Ans:- The type of positioning that has to be used for an element is determined using the CSS position property. By default, it is static. The various values for this property are:-

static: Elements are displayed in the same order as they appear in the document flow.
absolute: It set’s the element’s position relative to the element’s parent.
relative: It set’s the element’s position relative to its normal position.
fixed: It set’s the element’s position relative to the browser window.
sticky: It set’s the element’s position based on the user’s scroll position. It behaves like a relative until a given offset position is met in the viewport and after that behaves like fixed.
initial: It sets the position property to the default value.
inherit: Inherits the position property of the parent element.

How does CSS work?

Ans:- The browser displays the document after combining the content and style of the document. The steps involved are:-

The browser loads the HTML document.
The HTML document is converted into a DOM (Document Object Model) by the browser.
The browser fetches the resources linked to by the HTML document, like CSS stylesheets, embedded images, etc.
The browser parses the fetched CSS and sorts the different rules based on the selector types into categories like element, class, ID, etc. Based on the selectors it finds, it works out which rules should be applied to which nodes in the DOM and attaches style to them as required. This process is called rendering the tree.
The rendered tree is laid out in the structure it should appear in after the rules are applied.
The visual display of the webpage is shown on the screen. This step is called painting.

When does DOM reflow occur?

Ans:- Reflow is the web browser process of re-calculating the positions and geometries of elements in the document. This is done to re-render a part of the document or the whole document.

Reflow occurs in the following scenarios:

Insert, update, or remove an element in the DOM.
Modifying the content on the document
Move a DOM element.
Animate a DOM element.
Take measurements of an element such as offset height or get computed style.
Change in the CSS style.

Mention the types of @media properties.

Ans:- The @media rule is used to apply different styles for different devices, improving responsiveness. By default, it is all. The different types of @media properties are:

all: It is used for all types of media devices.
screen: It is used for computer screens, tablets, smartphones, etc.
print: It is used for printers.
speech: It is used for screen readers.

What are the different box-sizing properties?

Ans:- The box-sizing CSS property defines how an element’s total width and height are calculated. The default value of the property is the content-box. The various property values are:-

content-box: The width and height properties includes only the content, i.e., excluding the border and padding.
border-box: The width and height properties include the content, border, and padding.
initial: It sets the property to the default value.
inherit: Inherits the box-sizing property of the parent element.

Mention the differences between grid and flexbox in CSS

Ans:- The difference between grid and flexbox in CSS are:-

CSS Grid	CSS Flexbox
Grid layout is a 2-D system, i.e., it can handle both rows and columns.	Flexbox layout is a 1-D system, i.e., it can either handle row or column.
It follows a layout-first approach.	It follows a content-first approach.
It is intended for large-scale layouts which are non-linear.	It is intended for small-scale layouts and components of an application that are linear.
It is used to define a grid and fit content into it in two dimensions.	It is used to define a row or a column layout.

What is specificity, and how to calculate specificity?

Ans:- Specificity is the process by which browsers decide which CSS property values are the most relevant to an element and apply them to the element. It is based on the matching rules, which are composed of different types of CSS selectors.

When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element. Specificity only applies when multiple declarations target the same element. As per CSS rules, directly targeted elements will always take precedence over rules which an element inherits from its ancestor.

Precedence order: inline styles > IDs > classes, attributes, pseudo-classes > elements, pseudo-elements

Why is translate() preferred over absolute position?

Ans:- translate() gives better performance due to the following reasons :-

translate() is a value of CSS transform that does not cause the browser to trigger reflow or repaint; instead it only acts on the compositor. The absolute position triggers the repaint or DOM reflow.

Changing absolute positioning properties uses the CPU while transform causes the browser to create a GPU(Graphics Processing Unit) layer for the element. Therefore translate() is more efficient and will result in shorter paint times for smoother animations.

Consider a scenario where style1.css is declared before style2.css in the head tag. In this case, is style1.css downloaded before style2.css is fetched?

Ans:- No, the CSS files will be downloaded by the browsers according to the appearance of CSS style on the HTML page.

How are CSS variables different from CSS preprocessor variables?

Ans:- The difference between CSS variables and CSS preprocessor variables are as follows:-

The preprocessor produces the corresponding CSS output before the browser interprets the code and is replaced with its values. While in CSS variables, properties are evaluated by the browser at runtime.

CSS variables can cascade, but the preprocessor variables cannot cascade.

CSS variables can be accessed and manipulated using javascript, but it is not possible in preprocessor variables.

Explain CSS Custom properties variables.

Ans:- Custom properties variables (also called cascading variables or CSS variables) are user-defined variables containing specific values. They are reused throughout the document. The value is set using — and accessed using the var() function.

Example:

:root {
   --main-bg-color: blue;
}
 
.container {
   color: white;
   background-color: var (--main-bg-color);
}

Why is calc() used?

Ans:- The calc() function is used to perform mathematical operations like addition, subtraction, multiplication, and division calculations with numeric property values on property values. It is generally used with <length>, <frequency>, <angle>, <time>, <number>, or <integer> data types.

Example:

:root {
   --main-bg-color: blue;
}
 
.container {
   color: white;
   background-color: var (--main-bg-color);
}

How is inheritance applied in CSS?

Ans:- Inheritance is used in CSS to define the hierarchy from top to bottom. The child class can override the inherited properties if the child uses the same name.

Example:

span {
   color: blue;
}
 
.child span {
   color: inherit;
}

How are functions and mixins different?

Ans:- Mixins gives the output of the SASS code that directly compiles into CSS styles. Whereas a function returns a value that can become the value for a CSS property or be passed to another mixin or function.

Explain the CSS vendor prefixes.

Ans:- The CSS Vendor prefixes (or CSS browser prefixes) are extensions to CSS standards. They were introduced to prevent incompatibilities from arising when the standard is extended. CSS vendor prefixes for some of the common platforms are as follows:-

-webkit-: Android, Chrome, iOS, and Safari
-o-: Opera
-moz-: Mozilla Firefox
-ms-: Internet Explorer

What is cascade?

Ans:- Cascade defines the importance of individual styling rules. This allows conflicting rules to be sorted when applied to the same selector.

Example:

p {color: white ! important} /* increased weight */
p (color: black} /* normal weight */

Explain the difference between pseudo-classes and pseudo-elements?

Ans:- A pseudo-class is used to select a regular element under certain conditions, like when they’re under a particular state or when their position is relative to siblings. For example, :focus, :enabled, :first-child.

A pseudo-element is used to create items that do not normally exist in the document tree. For example ::after, ::first-letter, etc.

Explain the concept of tweening in CSS.

Ans:- Tweening (or in-betweening) is the process of creating intermediary frames between two images to provide the appearance that the first image smoothly evolved into the second image. This is achieved by using a few keyframes throughout the sequence and filling in the gaps later. These gaps are filled through tweening.

Example:

p {
 animation-duration: 5s;
 animation-name: slideIn;
}
 
@keyframes slideIn {
 from {
   margin-left: 100%;
   width: 300%;
 }
 
 to {
   margin-left: 0%;
   width: 100%;
 }
}

What is clearfix in CSS?

Ans:- Clearfix is a way by which an element clears its child elements automatically. It is generally used in float layouts where elements are floated to be stacked horizontally. If clearfix is not used, a container will not wrap around its floated children and will collapse, just as if it had been positioned absolutely.

Example:

<style>
   div {
     border: 3px solid orange;
     padding: 5px;
   }
  
   .img1 {
     float: right;
   }
  
   .img2 {
     float: right;
   }
  
   .clearfix {
     overflow: auto;
   }
</style>

<body>
   <h2>Without Clearfix</h2>
  
   <div>
     <img class="img1" src="https://picsum.photos/100/100">
     Coding Ninjas
   </div>
  
   <h2 style="clear:right">With Clearfix</h2>
   <div class="clearfix">
     <img class="img2" src="https://picsum.photos/100/100">
     Coding Ninjas
   </div>
</body>

How is responsive design different from adaptive design?

Ans:- The difference between responsive design and adaptive design are:-

Responsive Design	Adaptive Design
Responsive design uses CSS media queries to modify styles for the target device based on display type, width, height, etc. One of these criteria determines the style to be used for different screens.	Adaptive design uses static layouts based on breakpoints. Adaptive design works to detect the screen size and load the appropriate layout for it. Generally, the adaptive site uses six common screen widths: 320 px, 480 px, 760 px, 960 px, 1200 px, 1600 px.
Responsive design doesn’t offer as much control but takes much less work to build and maintain.	Adaptive design is useful for adding new features to an existing site to make it more mobile-friendly. This allows the developer to take control of the design and develop for specific and multiple viewports.
Responsive designs are fluid.	Adaptive design uses percentages to make it more fluid feel while scaling, which can cause a jump when a window is resized.

Explain progressive rendering?

Ans:- The technique used to improve a web page’s performance by rendering the content for display as quickly as possible is called progressive rendering. The following methods are used to implement progressive rendering:-

Lazy loading of images: JavaScript loads an image when the user scrolls into the part of the page where the image is used.
Async HTML fragments: Parts of HTML are flushed into the browser as the webpage is built on the backend.
Prioritizing visible content: This refers to the practice of including only the necessary scripts, stylesheets, etc., to render the initial pages quickly. After that, deferred scripts or listen for the DOMContentLoaded/load event loads the remaining resources.

Mention some techniques to serve the webpage for feature-constrained browsers.

Ans:- Some of the techniques used to serve the webpage for feature-constrained browsers are as follows:-

Graceful degradation: Build an application for modern browsers while ensuring it remains functional in older browsers.
Progressive enhancement: Build an application for basic user experience, then add functional enhancements when the browser supports it.
Check if support is available for the feature using caniuse.
Automatically insert vendor prefix using autoprefixer.
Detects the features using Modernizr.
@supports CSS at-rule can be used to determine if support for the CSS property is present in the browser or not. If not present, an alternative is given.

What is meant by accessibility (a11y)?

Ans:- Accessibility refers to designing software or hardware combinations to make the system accessible to differently-abled people. For example, a website developed with accessibility in mind would have an output for special braille hardware or text-to-speech capabilities for people with visual impairments.

Important concepts

Some of the important topics frequently asked in a CSS interview are:

1. Flexbox

2. Specificity

3. Media queries

4. SASS / SCSS / LESS

5. Make div shapes with CSS

6. Viewport metric

7. Box Model

8. Transforms

9. Different selectors

10. Content overflow

11. Position property

12. Grid

Key Takeaways

This blog covered the top 25 advanced interview questions that can be asked for a frontend interview in 2021, along with a detailed explanation. In the previous part of this blog, we covered the basic CSS interview questions in the blog 25 CSS Interview Questions For Beginner in 2021 | Part – 1, please go through them.

Don’t stop here. Check out our Full-stack development course to learn web development from scratch. You can also check out the blog on the JavaScript Interview Questions.

By: Hari Sapna Nair