CSS Interview Questions

CSS Interview Questions for Freshers

What is the Box model in CSS? Which CSS properties are a part of it?
What are the advantages of using CSS?
What are the limitations of CSS?
How to include CSS in the webpage?
What are the different types of Selectors in CSS?
What is a CSS Preprocessor? What are Sass, Less, and Stylus? Why do people use them?
What is VH/VW (viewport height/viewport width) in CSS?
Difference between reset vs normalize CSS? How do they differ?
What is the difference between inline, inline-block, and block?
How do you test the webpage in different browsers?
What is a Pseudo element? What is pseudo-class?
How do you specify units in CSS? What are the different ways to do it?
Does margin-top or margin-bottom have an effect on inline elements?

Advanced CSS Interview Questions

Explain CSS position property.
What does DOM reflow occur?
Different box-sizing properties?
How to center align a div inside another div?
Can you name the four types of @media properties?
What is the grid system?
What are the different ways to hide an element using CSS?
What does the :root pseudo-class refer to?
What does Accessibility (a11y) mean?
How do I restore the default value of a property?
Difference between CSS Grid vs Flexbox?
How does calc() work?
What do CSS Custom Properties (variables) mean?
What is the difference between CSS variables and preprocessor (Sass, Less, Stylus) variables?
What does * { box-sizing: border-box; } do? What are its advantages?
What does !important mean in CSS?
What is specificity? How to calculate specificity?
What is progressive rendering? How do you implement it in a website? What are the advantages?
What are the advantages of using translate() instead of absolute positioning?
Does style1.css have to be downloaded and parsed before style2.css can be fetched?
How to determine if the browser supports a certain feature?
What is the Box model in CSS? Which CSS properties are a part of it?
- The CSS Box Model describes the rectangular boxes that are generated for elements in the document tree. It consists of:
  - Content: The actual content of the box, where text and images appear.
  - Padding: The space between the content and the border.
  - Border: The border that wraps the padding and content.
  - Margin: The space outside the border, separating the element from other elements.
What are the advantages of using CSS?
- Separation of Content and Presentation: CSS allows developers to separate the content of a webpage (HTML) from its presentation (CSS), making it easier to maintain and update the design without affecting the content.
- Consistency: CSS enables the application of consistent styles across multiple pages of a website, ensuring a uniform look and feel.
- Improved Load Times: By using external CSS files, browsers can cache stylesheets, reducing the amount of data that needs to be downloaded for subsequent page loads.
- Flexibility and Control: CSS provides a wide range of styling options, allowing developers to create complex layouts and designs with precision.
- Accessibility: CSS can enhance the accessibility of web content by allowing for better control over font sizes, colors, and layouts that cater to different user needs.
What are the limitations of CSS?
- Browser Compatibility: Different browsers may interpret CSS rules differently, leading to inconsistencies in how a webpage is displayed across various platforms.
- Limited Dynamic Capabilities: CSS is primarily a styling language and lacks the ability to handle complex logic or dynamic content manipulation, which often requires JavaScript.
- Specificity Issues: The cascading nature of CSS can lead to specificity conflicts, making it challenging to manage styles in large projects.
- Performance Concerns: Excessive use of CSS, especially with complex selectors and large stylesheets, can impact page load times and rendering performance.
- Learning Curve: While basic CSS is easy to learn, mastering advanced concepts like Flexbox, Grid, and responsive design can be challenging for beginners.
How to include CSS in the webpage?
- Inline CSS: Using the style attribute directly within HTML elements. Example: <div style="color: blue;">Hello World</div>
- Internal CSS: Using the <style> tag within the <head> section of the HTML document. Example:
```
<head>
  <style>
    body { background-color: lightgrey; }
  </style>
</head>
```
- External CSS: Linking to an external stylesheet using the <link> tag within the <head> section. Example:
```
<head>
  <link rel="stylesheet" href="styles.css">
</head>
```
What are the different types of Selectors in CSS?
- Universal Selector (*): Selects all elements on the page.
- Type Selector: Selects all elements of a specific type (e.g., div, p).
- Class Selector (.): Selects elements with a specific class attribute (e.g., .classname).
- ID Selector (#): Selects a single element with a specific ID attribute (e.g., #idname).
- Attribute Selector: Selects elements based on the presence or value of an attribute (e.g., [type="text"]).
- Descendant Selector: Selects elements that are descendants of a specified element (e.g., div p).
- Child Selector (>): Selects direct child elements of a specified element (e.g., div > p).
- Pseudo-class Selector (:): Selects elements based on their state (e.g., :hover, :first-child).
- Pseudo-element Selector (::): Selects specific parts of an element (e.g., ::before, ::after).
What is a CSS Preprocessor? What are Sass, Less, and Stylus? Why do people use them?
- A CSS Preprocessor is a scripting language that extends the capabilities of standard CSS by adding features such as variables, nested rules, functions, and mixins. Preprocessors allow developers to write more maintainable and reusable CSS code.
- Sass (Syntactically Awesome Stylesheets), Less (Leaner Style Sheets), and Stylus are popular CSS preprocessors that provide additional functionality to streamline the CSS development process.
- People use CSS preprocessors because they:
  - Improve code organization and maintainability.
  - Enable the use of variables for consistent styling.
  - Allow for nesting of selectors, making the code more readable.
  - Provide functions and mixins for reusable styles.
What is VH/VW (viewport height/viewport width) in CSS?
- VH (viewport height) and VW (viewport width) are relative units in CSS that are based on the size of the viewport (the visible area of a web page).
- 1 VH is equal to 1% of the viewport’s height, and 1 VW is equal to 1% of the viewport’s width.
- These units are useful for creating responsive designs that adapt to different screen sizes.
Difference between reset vs normalize CSS? How do they differ?
- Reset CSS: A reset stylesheet removes all default browser styling by setting all margins, paddings, and other properties to zero. This creates a blank slate for developers to build their styles from scratch.
- Normalize CSS: A normalize stylesheet preserves useful default styles while providing consistency across different browsers. It aims to make built-in browser styles more uniform without completely removing them.
- The key difference is that reset CSS eliminates all default styles, while normalize CSS adjusts them for better cross-browser consistency.
What is the difference between inline, inline-block, and block?
- inline: Elements with display: inline do not start on a new line and only take up as much width as necessary. They cannot have width and height set.
- inline-block: Elements with display: inline-block behave like inline elements but can have width and height set. They do not start on a new line.
- block: Elements with display: block start on a new line and take up the full width available. They can have width and height set.
How do you test the webpage in different browsers?
- Use cross-browser testing tools like BrowserStack, Sauce Labs, or CrossBrowserTesting to test the webpage on various browsers and devices.
- Manually test the webpage on different browsers installed on your local machine (e.g., Chrome, Firefox, Safari, Edge).
- Use browser developer tools to simulate different screen sizes and resolutions.
- Check for compatibility issues using online resources like Can I Use to ensure that the CSS features used are supported across target browsers.
What is a Pseudo element? What is pseudo-class?
- Pseudo-element: A pseudo-element is used to style specific parts of an element. It is denoted by a double colon (::). Examples include ::before and ::after, which allow you to insert content before or after an element’s content.
- Pseudo-class: A pseudo-class is used to define a special state of an element. It is denoted by a single colon (:). Examples include :hover, which applies styles when the user hovers over an element, and :first-child, which targets the first child of a parent element.
How do you specify units in CSS? What are the different ways to do it?
- CSS supports various units for specifying lengths, including:
  - Absolute Units: px (pixels), cm (centimeters), mm (millimeters), in (inches), pt (points), pc (picas).
  - Relative Units: em (relative to the font size of the element), rem (relative to the font size of the root element), % (percentage of the parent element), vh (viewport height), vw (viewport width), vmin (minimum of viewport height and width), vmax (maximum of viewport height and width).
Does margin-top or margin-bottom have an effect on inline elements?
- No, margin-top and margin-bottom do not have an effect on inline elements. Inline elements only respect horizontal margins (margin-left and margin-right). To apply vertical margins, the element needs to be changed to a block or inline-block display type.

Advanced CSS Interview Questions

Explain CSS position property.
- The position property in CSS specifies how an element is positioned in the document. It can take the following values:
  - static: The default position; elements are positioned according to the normal flow of the document.
  - relative: The element is positioned relative to its normal position, allowing for offsetting using top, right, bottom, and left properties.
  - absolute: The element is positioned relative to its nearest positioned ancestor (not static). It is removed from the normal document flow.
  - fixed: The element is positioned relative to the viewport and remains in the same position even when the page is scrolled.
  - sticky: The element toggles between relative and fixed positioning based on the user’s scroll position.
What does DOM reflow occur?
- DOM reflow (or layout) occurs when the browser recalculates the positions and geometries of elements in the document. This can happen when elements are added, removed, or modified, or when styles that affect layout (like width, height, margin, padding) are changed. Reflow can be an expensive operation in terms of performance, especially for complex layouts.
Different box-sizing properties?
- The box-sizing property in CSS determines how the total width and height of an element are calculated. It has two main values:
  - content-box: The default value. The width and height properties only include the content area, excluding padding and border.
  - border-box: The width and height properties include the content, padding, and border, making it easier to manage element sizes.

How to center align a div inside another div?

To center align a div inside another div, you can use Flexbox:

.parent {
  display: flex;
  justify-content: center; /* Horizontal centering */
  align-items: center;    /* Vertical centering */
  height: 100vh;          /* Full viewport height */
}
.child {
  width: 200px;
  height: 100px;
}

Alternatively, you can use CSS Grid or absolute positioning with transforms.

Can you name the four types of @media properties?
- The four types of @media properties are:
  - all: Suitable for all devices.
  - print: Intended for printed material and documents viewed on screen in print preview mode.
  - screen: Intended primarily for computer screens.
  - speech: Intended for speech synthesizers.
What is the grid system?
- The grid system is a layout structure that divides a webpage into a series of rows and columns, allowing for the organized placement of content. It provides a flexible way to create responsive designs that adapt to different screen sizes. CSS Grid is a powerful layout module that enables developers to create complex grid-based layouts with ease.
What are the different ways to hide an element using CSS?
- display: none;: Completely removes the element from the document flow.
- visibility: hidden;: Hides the element but retains its space in the layout.
- opacity: 0;: Makes the element fully transparent but still occupies space and can be interacted with.
- Positioning off-screen: Using position: absolute; left: -9999px; to move the element out of the visible area.
What does the :root pseudo-class refer to?
- The :root pseudo-class refers to the highest-level parent element in the document, which is typically the <html> element. It is often used to define global CSS variables (custom properties) that can be accessed throughout the stylesheet.
What does Accessibility (a11y) mean?
- Accessibility (a11y) refers to the practice of designing and developing websites and applications that can be used by people with disabilities. This includes ensuring that content is perceivable, operable, understandable, and robust for all users, regardless of their abilities or the devices they use.
How do I restore the default value of a property?
- You can restore the default value of a CSS property by using the initial keyword. For example:
```
element {
  color: initial; /* Restores the default color */
}```
```
Difference between CSS Grid vs Flexbox?
- CSS Grid is a two-dimensional layout system that allows for the creation of complex grid-based layouts, managing both rows and columns simultaneously.
- Flexbox is a one-dimensional layout system that focuses on arranging items in a single row or column, providing flexibility in distributing space among items.
How does calc() work?
- The calc() function in CSS allows you to perform calculations to determine CSS property values. It can combine different units (e.g., percentages, pixels) and perform basic arithmetic operations (addition, subtraction, multiplication, division). Example:
```
width: calc(100% - 50px);```
```
What do CSS Custom Properties (variables) mean?
- CSS Custom Properties, also known as CSS variables, are entities defined by CSS authors that contain specific values to be reused throughout a stylesheet. They are defined using the -- prefix and accessed using the var() function. Example:
```
:root {
  --main-color: #3498db;
}
element {
  color: var(--main-color);
}```
```
What is the difference between CSS variables and preprocessor (Sass, Less, Stylus) variables?
- CSS variables are defined and used directly in CSS and can be dynamically changed using JavaScript. They are scoped to the element they are defined on and can be inherited.
- Preprocessor variables are defined in the preprocessor language (like Sass or Less) and are compiled into static CSS values during the build process. They do not exist in the final CSS and cannot be changed at runtime.
What does * { box-sizing: border-box; } do? What are its advantages?
- The rule * { box-sizing: border-box; } sets the box-sizing property to border-box for all elements on the page. This means that the width and height of elements will include padding and border, making it easier to manage layouts.
- Advantages:
  - Simplifies layout calculations by including padding and border in the element’s total size.
  - Prevents unexpected element sizes when adding padding or borders.
  - Makes responsive design and grid layouts more predictable.
What does !important mean in CSS?
- The !important declaration in CSS is used to give a CSS property higher priority than other declarations. When a property is marked with !important, it overrides any other declarations for that property, regardless of specificity or source order. Example:
```
element {
  color: red !important; /* This will override other color declarations */
}```
```
What is specificity? How to calculate specificity?
- Specificity is a set of rules that browsers use to determine which CSS rule applies when multiple rules target the same element. It is calculated based on the types of selectors used in the rule.
- Specificity is calculated using a four-part value (a, b, c, d):
  - a: Inline styles (1 if present, 0 otherwise)
  - b: Number of ID selectors
  - c: Number of class, attribute, and pseudo-class selectors
  - d: Number of type and pseudo-element selectors
- The specificity is compared from left to right, with higher values taking precedence.
What is progressive rendering? How do you implement it in a website? What are the advantages?
- Progressive rendering is a technique where content is loaded and displayed incrementally, allowing users to see and interact with parts of the webpage before the entire page has fully loaded.
- Implementation can include techniques like lazy loading images, deferring non-critical CSS and JavaScript, and using skeleton screens.
- Advantages:
  - Improved user experience by reducing perceived load times.
  - Faster initial rendering of content.
  - Reduced bandwidth usage by loading only necessary resources initially.
What are the advantages of using translate() instead of absolute positioning?
- translate() allows for smoother animations and transitions, as it leverages the GPU for rendering.
- It does not affect the document flow, meaning other elements are not impacted by the transformation.
- It provides better performance for moving elements compared to changing top, left, bottom, or right properties.
Does style1.css have to be downloaded and parsed before style2.css can be fetched?
- No, style1.css does not have to be downloaded and parsed before style2.css can be fetched. Browsers can download multiple CSS files in parallel, allowing for faster loading times. However, the order of CSS files can affect how styles are applied, as later styles can override earlier ones.
How to determine if the browser supports a certain feature?
- You can use feature detection libraries like Modernizr to check for support of specific CSS features.
- You can also use JavaScript to check for feature support by testing for the existence of specific properties or methods. Example:
```
if ('grid' in document.body.style) {
  // CSS Grid is supported
}```
```