Coding Interview Questions Interview Questions and Answers

Latest 70 CSS Interview Questions

Deepak Vishwakarma July 5, 2023Last Updated: July 5, 2023

0 3 6 minutes read

Table of Contents

Introduction

CSS (Cascading Style Sheets) is a fundamental technology used to design and present the visual aspects of a website. During a CSS interview, you can expect questions that assess your knowledge and understanding of CSS properties, selectors, box model, layout techniques, responsiveness, and browser compatibility. These questions aim to gauge your ability to create appealing and user-friendly web designs, solve layout challenges, and ensure consistent presentation across different devices and browsers. Being well-prepared for a CSS interview will help you demonstrate your expertise in this essential web development skill.

Introduction
Basic Questions
Intermediate Questions
Advanced Questions
Coding Questions
MCQ Questions

Basic Questions

1. What is CSS and what is its purpose?

CSS stands for Cascading Style Sheets. It is a styling language used to describe the presentation and layout of HTML documents. CSS is used to control the visual appearance of web pages, including colors, fonts, spacing, and positioning of elements. Its purpose is to separate the structure (HTML) of a web page from its presentation (CSS), making it easier to maintain and update the styling across multiple pages.

2. Can you explain what is meant by CSS selectors?

CSS selectors are patterns used to select and target specific HTML elements for styling. They allow you to specify which elements in the HTML markup should be affected by CSS rules. Selectors can target elements based on their element type, class, ID, attributes, and hierarchical relationships with other elements. Here are some examples of CSS selectors:

Element selector: p selects all <p> elements.
Class selector: .my-class selects all elements with the class “my-class” (<div class="my-class">).
ID selector: #my-id selects the element with the ID “my-id” (<h1 id="my-id">).
Attribute selector: [type="submit"] selects all elements with the attribute type set to “submit” (<input type="submit">).
Descendant selector: div p selects all <p> elements that are descendants of <div> elements.

3. What are the different types of CSS?

There are three main types of CSS:

Inline CSS: Inline styles are applied directly to individual HTML elements using the style attribute. For example:

CSS

   <p style="color: blue;">This is a paragraph with inline CSS.</p>

Inline CSS has the highest specificity and overrides other styles.

Internal CSS: Internal styles are defined within the <style> tags in the <head> section of an HTML document. Multiple styles can be defined, and they apply to the entire document or a specific section. For example:

CSS

   <style>
     p {
       color: blue;
     }
   </style>
   <p>This is a paragraph with internal CSS.</p>

Internal CSS has medium specificity.

External CSS: External styles are defined in separate CSS files and linked to HTML documents using the <link> tag. The CSS rules in external files can be reused across multiple HTML pages. For example:

CSS

   <link rel="stylesheet" href="styles.css">
   <p class="my-class">This is a paragraph with external CSS.</p>

External CSS has the lowest specificity and is the recommended approach for applying styles to web pages.

4. How would you include an external CSS in an HTML file?

To include an external CSS file in an HTML file, you can use the <link> tag in the <head> section of the HTML document. The href attribute specifies the path to the external CSS file. Here’s an example:

CSS

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- HTML content goes here -->
</body>
</html>

In this example, the CSS file “styles.css” is linked to the HTML document. Make sure to provide the correct path to the CSS file in the href attribute.

5. Can you differentiate between a class selector and an ID selector?

Class Selector: Class selectors are prefixed with a dot (.) and target elements based on their class attribute. Multiple elements can have the same class, and a single element can have

both class selectors and ID selectors. Class selectors are used when you want to apply the same styles to multiple elements. For example:

CSS

.my-class {
  color: blue;
}

CSS

<p class="my-class">This paragraph has the "my-class" class.</p>
<div class="my-class">This div also has the "my-class" class.</div>

ID Selector: ID selectors are prefixed with a hash (#) and target elements based on their unique ID attribute. An ID should be unique within a document, and only one element should have a specific ID. ID selectors are used when you want to apply specific styles to a single element. For example:

CSS

#my-id {
  font-weight: bold;
}

CSS

<p id="my-id">This paragraph has the "my-id" ID.</p>

In summary, class selectors are used for multiple elements with the same class, while ID selectors are used for unique elements with a specific ID.

6. What does CSS ‘inheritance’ mean?

CSS inheritance is a mechanism by which certain properties of an element are passed down from its parent element to its children. When a property is inherited, the child element will inherit the computed value of that property from its parent if the property is not explicitly set on the child element. Inheritance helps in reducing the amount of CSS code required and provides consistency within a document.

For example, if you set the font color on a parent element, all its child elements will inherit that color unless it is overridden. Here’s an example:

CSS

.parent {
  color: blue;
}

.child {
  /* Inherits color: blue from parent */
  font-weight: bold;
}

CSS

<div class="parent">
  This text is blue.
  <span class="child">This text is bold, inherited from parent.</span>
</div>

In this example, the color property is inherited by the child <span> element, making its text blue. The child element only specifies the font-weight property.

7. How do you add comments in CSS?

In CSS, you can add comments to provide explanatory notes or disable certain code. CSS comments are not rendered by browsers and are purely for developers. There are two ways to add comments in CSS:

Single-line comments: Use // for single-line comments. Anything after // on the same line is considered a comment. For example:

CSS

/* This is a CSS rule */
p {
  color: blue;
}

// This is a single-line comment

Multi-line comments: Use /* */ for multi-line comments. Anything between /* and */ is considered a comment. For example:

CSS

/*
This is a multi-line
comment in CSS.
*/

p {
  color: blue;
}

Both single-line and multi-line comments can be used to improve code readability and provide explanations for specific CSS rules or sections.

8. What are CSS pseudo-classes?

CSS pseudo-classes are keywords used to select and style elements based on specific states or conditions that cannot be represented by regular selectors alone. Pseudo-classes are preceded by a colon (:) and are used to style elements that are in a particular state or context. Examples of pseudo-classes include :hover, :active, :focus, :nth-child(), and :first-child.

Here’s an example of using the :hover pseudo-class to change the background color of a link when it’s being hovered over:

CSS

a:hover {
  background-color: yellow;
}

In this example, the :hover pseudo-class targets the <a> element when the mouse hovers over it and applies the specified background color. Pseudo-classes are powerful tools for creating interactive and dynamic styles based on user interactions or element states.

9. How can you make a list in CSS without bullet points?

To make a list in CSS without bullet points, you can use the list-style-type property and set it to none. Here’s an example:

CSS

ul {
  list-style-type: none;
}

In this example, the ul element (unordered list) has its list-style-type set to none. This will remove the default bullet points for the list items within the <ul> element. You can also apply this style to other types of lists like <ol> (ordered list) or nested lists.

10. What is the CSS box model?

The CSS box model is a fundamental concept in CSS that describes how elements are rendered and how their dimensions and spacing are calculated. According to the box model, every element in CSS is considered a rectangular box, and it consists of the following components:

Content: The actual content or text of the element, such as text, images, or other nested elements.
Padding: The space between the content and the element’s border. It provides internal spacing within the element.
Border: The line or area that surrounds the padding and content of the element.
Margin: The space outside the border, which separates the element from other elements.

Here’s a visual representation of the CSS box model:

CSS

+-------------------------------------------+
|                  Margin                   |
|                                           |
|         +-------------------------------+   |
|         |             Border            |   |
|         |                               |   |
|         |       +-------------------+   |   |
|         |       |      Padding      |   |   |
|         |       |                   |   |   |
|         |       |     Content       |   |   |
|         |       |                   |   |   |
|         |       +-------------------+   |   |
|         |                               |   |
|         +-------------------------------+   |
|                                           |
+-------------------------------------------+

Understanding the box model is important for accurately positioning and sizing elements, as the dimensions of an element are calculated based on the sum of its content, padding, border, and margin.

11. How can you center an element horizontally in CSS?

To center an element horizontally in CSS, you can use one of the following methods:

Using margin: 0 auto: Apply margin: 0 auto; to the element you want to center. This method works for block-level elements with a specified width.

CSS

.centered {
  width: 200px;
  margin: 0 auto;
}

Using flexbox: If you’re using a container element, you can apply display: flex; to the container and use justify-content: center; to center its child elements horizontally.

CSS

.container {
  display: flex;
  justify-content: center;
}

Using text-align: center: If the element is an inline or inline-block element, you can center its content horizontally by applying text-align: center; to its parent container.

CSS

.container {
  text-align: center;
}

Choose the appropriate method based on your specific use case and the type of element you want to center.

12. What is a CSS rule or ruleset?

A CSS rule, also known as a ruleset, consists of one or more selectors and a set of declarations enclosed in curly braces {}.

The selector determines which element(s) the rule applies to, and the declarations define the styling properties and their values for those elements. Here’s an example of a CSS rule:

CSS

h1 {
  color: blue;
  font-size: 24px;
  font-weight: bold;
}

In this example, h1 is the selector targeting all <h1> elements. The declarations within the curly braces specify the styling properties (color, font-size, and font-weight) and their values (blue, 24px, and bold) for the selected elements. CSS rules allow you to define the visual appearance of HTML elements and apply consistent styles across multiple elements.

13. Can you style an HTML element only using its attributes?

Yes, you can style an HTML element using its attributes by using attribute selectors in CSS. Attribute selectors allow you to select elements based on the presence, value, or partial value of their attributes. Here are a few examples:

Select elements with a specific attribute: [attribute] targets elements that have the specified attribute, regardless of its value. For example, [disabled] selects all elements with the disabled attribute.
Select elements with a specific attribute value: [attribute="value"] targets elements that have the specified attribute with an exact match to the given value. For example, [type="submit"] selects all elements with type="submit".
Select elements with an attribute value starting with a specific string: [attribute^="value"] targets elements that have the specified attribute with a value starting with the given string. For example, [href^="https://"] selects all elements with an href attribute starting with "https://".
Select elements with an attribute value ending with a specific string: [attribute$="value"] targets elements that have the specified attribute with a value ending with the given string. For example, [src$=".jpg"] selects all elements with a src attribute ending with ".jpg".

These are just a few examples of how you can style HTML elements using attribute selectors in CSS. Attribute selectors provide a flexible way to target elements based on their attributes and apply specific styles to them.

14. What is the use of !important in CSS?

The !important declaration in CSS is used to give a style rule the highest priority or specificity, overriding any other styles that may conflict with it. When !important is added to a declaration, it ensures that the style defined by that declaration is applied regardless of other styles or selector specificity.

Here’s an example:

CSS

p {
  color: blue !important;
}

.special {
  color: red;
}

In this example, the p selector has the color property set to blue with !important. Even if an element with the class special has the color property set to red, the !important rule will take precedence, and the text color of <p> elements will always be blue.

It’s important to use !important sparingly and judiciously as it can make your styles difficult to maintain and override in the future. It is generally recommended to use more specific selectors or refactor your CSS instead of relying heavily on !important.

15. How can you clear floats in CSS?

To clear floats in CSS, you can use the clear property. Floats are commonly used to position elements side by side, but they can cause layout issues when other elements need to interact with them. The clear property ensures that an element does not float next to any preceding floated elements.

Here are a few common methods to clear floats:

Using the clear property:

Apply the clear: both; property to an element that should appear below any floated elements. This clears the floats on both the left and right sides.

CSS

   .clearfix {
     clear: both;
   }

CSS

   <div class="clearfix"></div>

Using the overflow property:

Apply the overflow: hidden; property to the parent element containing the floated elements. This clears the floats and ensures that the parent element expands to contain its floated children.

CSS

   .parent {
     overflow: hidden;
   }

CSS

   <div class="parent">
     <!-- Floated elements here -->
   </div>

Using a clearfix class:

Add a clearfix class to the parent element containing the floated elements. The clearfix class contains the necessary CSS to clear floats.

CSS

   .clearfix::after {
     content: "";
     display: table;
     clear: both;
   }

CSS

   <div class="parent clearfix">
     <!-- Floated elements here -->
   </div>

These methods ensure that elements following floated elements are properly positioned and not affected by the floats.

16. What is the z-index in CSS?

The z-index property in CSS controls the vertical stacking order of positioned elements on the z-axis. It determines which elements appear in front or behind other elements when they overlap. The z-index property accepts integer values, where a higher value represents a higher stacking order.

Here’s an example:

CSS

.first-element {
  z-index: 2;
}

.second-element {
  z-index: 1;
}

In this example, the element with the class first-element has a higher z-index value than the element with the class second-element. Therefore, the first-element will appear in front of the second-element if they overlap on the page.

The z-index property only applies to positioned elements (elements with a position value of relative, absolute, or fixed). By default, positioned elements have a z-index value of auto, and their stacking order is determined by their order in the HTML document.

17. What is a CSS preprocessor?

A CSS preprocessor is a scripting language that extends the capabilities of CSS by adding features such as variables, nesting, mixins, functions, and more. It allows developers to write CSS code in a more efficient and maintainable way by enabling the use of programming concepts.

Some popular CSS preprocessors include Sass (Syntactically Awesome Style Sheets), LESS (Leaner Style Sheets), and Stylus. These preprocessors require compilation before the CSS code can be used in a web page.

For example, in Sass, you can define variables to reuse values throughout your stylesheets:

CSS

$primary-color: #007bff;

.button {
  background-color: $primary-color;
  color: white;
}

Here, the variable $primary-color is assigned the value #007bff. It can be easily reused in multiple places, making it easier to maintain consistency and update styles.

CSS preprocessors offer additional features like nesting selectors, mixins for reusable style patterns, functions for dynamic calculations, and more. They help streamline the CSS development process and make it more powerful and flexible.

18. What is the difference between `visibility: hidden` and `display: none` in CSS?

The difference between visibility: hidden and display: none in CSS lies in how the elements are rendered and their impact on the layout of the page.

visibility: hidden;: This property hides an element while still reserving the space it occupies in the layout. The element is not visible, but it still takes up space and affects the positioning of other elements. The hidden element is rendered as if it were transparent and cannot be interacted with.
display: none;: This property hides an element completely and removes it from the document flow. The element is not visible and does not take up any space in the layout. Other elements will fill the space previously occupied by the hidden element. The hidden element is not rendered at all, and its effects on the layout and interactions are removed.

Here’s an example to illustrate the difference:

CSS

.hidden {
  visibility: hidden;
}

.none {
  display: none;
}

CSS

<div class="container">
  <div class="hidden">This element is hidden but still occupies space.</div>
  <div class="none">This element is completely hidden and does not occupy space.</div>
  <div>Some other content</div>
</div>

In this example, the element with the class hidden will be invisible but will still affect the layout and positioning of other elements. The element with the class none will be completely hidden, and the other content will flow as if the element doesn’t exist.

Use visibility: hidden; when you want to hide an element but maintain its space and effects on the layout. Use display: none; when you want to completely remove an element from the layout.

19. What are CSS Media Queries?

CSS Media Queries are a feature in CSS that allow you to apply different styles based on specific conditions or characteristics of the device or viewport. Media Queries enable responsive design by targeting different screen sizes, resolutions, orientations, and other media features.

Here’s an example of a media query:

CSS

@media screen and (max-width: 600px) {
  /* Styles for screens with a maximum width of 600px */
  body {
    font-size: 14px;
  }
}

In this example, the styles within the media query will only be applied when the screen width is 600 pixels or less. You can specify various conditions using logical operators like and, or, and not to create more complex queries.

Media Queries can be used to create responsive layouts, adapt typography and images, and modify the appearance of elements based on the device’s capabilities. They are widely used in modern web development to ensure a consistent and optimal user experience across different devices and screen sizes.

20. What is the difference between CSS Grid and Flexbox?

CSS Grid and Flexbox are both layout systems in CSS, but they have different approaches and are suited for different scenarios.

CSS Grid is a two-dimensional layout system that allows you to create complex grid-based layouts. It provides a grid container and grid items organized in rows and columns. You have precise control over the placement and alignment of items within the grid. CSS Grid is ideal for creating overall page layouts and arranging elements in a grid structure.

Here’s an example of CSS Grid:

CSS

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
}

.item {
  grid-column: span 2;
}

In this example, the container is set to display as a grid with three equal columns and a gap of 10 pixels between grid items. The item class is set to span two columns within the grid.

Flexbox, on the other hand, is a one-dimensional layout system designed for building flexible and responsive layouts. It focuses on arranging items along a single row or column. Flexbox provides powerful alignment and distribution capabilities, making it well-suited for creating dynamic and flexible layouts.

Here’s an example of Flexbox:

CSS

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.item {
  flex: 1;
}

In this example, the container is set to display as a flex container with a row direction. The items are evenly distributed along the main axis with space between them, and they are vertically aligned in the center.

In summary, CSS Grid is best for creating grid-based layouts, while Flexbox is ideal for arranging items along a single axis. Both layout systems have their strengths and can be used together to create sophisticated and responsive designs.

Intermediate Questions

1. What is the difference between “position: relative”, “position: absolute” and “position: fixed” in CSS?

position: relative: When an element has position: relative, it is positioned relative to its normal position in the document flow. It can be moved using properties like top, right, bottom, and left. Other elements on the page will still occupy their original positions even if the relative element is moved.
position: absolute: An element with position: absolute is positioned relative to its nearest positioned ancestor or to the initial containing block if no positioned ancestor is found. It is taken out of the normal document flow and can be moved using properties like top, right, bottom, and left. Other elements are not affected by the absolute element’s position.
position: fixed: With position: fixed, the element is positioned relative to the viewport, meaning it remains in a fixed position even when the page is scrolled. It is taken out of the normal document flow and can be moved using properties like top, right, bottom, and left. Other elements are not affected by the fixed element’s position.

2. What does CSS “specificity” mean?

CSS specificity refers to the set of rules that determines which CSS styles are applied to an element when there are conflicting or overlapping styles. Specificity is based on the combination of selectors used to target an element. It follows a hierarchy where different types of selectors have different weights. The more specific a selector, the higher its specificity and the more likely it is to override styles from less specific selectors.

The specificity hierarchy is as follows (from least to most specific):

Type selectors and pseudo-elements
Class selectors, attribute selectors, and pseudo-classes
ID selectors
Inline styles (highest specificity)

For example, if there are conflicting styles targeting an element, the style with a higher specificity will take precedence over styles with lower specificity.

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

display: block: When an element has display: block, it takes up the full available width and starts on a new line. It creates a block-level element that expands horizontally to fill its container. Block elements stack on top of each other vertically by default.
display: inline-block: With display: inline-block, an element is rendered inline like text but still retains block-level characteristics. It allows the element to flow with surrounding content, but unlike display: inline, it can have a specified width, height, margins, and padding. Inline-block elements can sit next to each other horizontally.

4. What is CSS “flexbox” and what are its advantages?

CSS flexbox is a layout module that provides a flexible way to arrange and align elements within a container. It introduces a one-dimensional layout model, allowing elements to be organized either horizontally or vertically. Flexbox provides a powerful set of properties to control the distribution, alignment, and ordering of elements.

Advantages of using flexbox include:

Simplified layout: Flexbox makes it easier to create complex layouts without the need for float-based hacks or excessive manual calculations.
Flexible and responsive designs: Flexbox automatically adjusts the size and positioning of elements based on available space, making it ideal for building responsive designs that adapt to different screen sizes.
Alignment and distribution control: Flexbox offers intuitive alignment and distribution properties, allowing precise control over the positioning of elements within a container.
Reordering elements: Flexbox allows the order of elements to be changed visually, without modifying the source order in

the HTML markup. This provides flexibility in creating different visual layouts while maintaining a logical order in the document structure.

5. What are CSS Transitions?

CSS Transitions are a way to smoothly animate changes in CSS property values over a specified duration. They allow elements to transition from one state to another, creating visually appealing effects. Transitions can be applied to properties such as color, size, position, opacity, and more.

To use CSS Transitions, you define the starting and ending states of an element by specifying the CSS properties you want to transition. You also set the transition duration, timing function, and delay. When the specified property values change, the transition will smoothly animate the element from the initial state to the final state based on the provided timing.

For example, to create a transition for a button’s background color when hovered, you can use the following CSS:

CSS

button {
  background-color: blue;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: red;
}

In this example, when the button is hovered, the background color will transition smoothly from blue to red over a duration of 0.3 seconds with an easing effect.

6. How does the “z-index” property work in CSS?

The z-index property in CSS controls the stacking order of positioned elements along the z-axis. It determines which elements appear in front of or behind other elements.

The z-index property accepts a numeric value, where higher values bring elements closer to the front. Elements with a higher z-index will appear in front of elements with a lower z-index. If two elements have the same z-index, their stacking order is determined by the order of their appearance in the HTML markup.

By default, elements have a z-index value of auto, which means their stacking order is determined by the order in the document flow.

It’s important to note that the z-index property only applies to positioned elements (elements with a position value other than static). If an element does not have a specified z-index value, it is considered to have a z-index of auto.

For example, consider the following CSS:

CSS

div {
  position: relative;
  z-index: 2;
}

span {
  position: relative;
  z-index: 1;
}

In this case, the div element will appear in front of the span element because it has a higher z-index value.

7. What is a sprite and how can you implement it in CSS?

In web development, a sprite is a single image that combines multiple smaller images or icons into a larger image. Sprites are commonly used to optimize page loading speed by reducing the number of HTTP requests required to load individual images.

To implement a sprite in CSS, you can use the background-image property along with the background-position property. Here’s an example:

CSS

.sprite {
  background-image: url('path/to/sprite.png');
  background-repeat: no-repeat;
}

.icon1 {
  width: 16px;
  height: 16px;
  background-position: 0 0;
}

.icon2 {
  width: 24px;
  height: 24px;
  background-position: -32px 0;
}

In this example, the sprite.png image contains multiple icons or images combined into a single image. The .sprite class is applied to elements that will use the sprite image. The background-image property sets the path to the sprite image, and background-repeat: no-repeat prevents the image from repeating.

To display a specific icon or image from the sprite, you use additional classes such as .icon1 and .icon2. The background-position property is used to specify the position of the desired image within the sprite. In this example, -32px 0 positions the .icon2 image 32 pixels to the left.

By utilizing a sprite, you can reduce the number of image requests and improve the overall performance of your website.

8. What are CSS pseudo-elements?

CSS pseudo-elements are virtual elements that allow you to style specific parts of an element. They are denoted by a double colon (::) and are used to add content or apply styles to a part of an element that doesn’t exist in the actual HTML markup.

Some commonly used pseudo-elements include:

::before: Inserts content before the selected element.
::after: Inserts content after the selected element.
::first-line: Selects the first line of a block-level element.
::first-letter: Selects the first letter of a block-level element.

Here’s an example that demonstrates the usage of ::before to add a decorative element before a paragraph:

CSS

p::before {
  content: "→";
  color: red;
}

In this case, the ::before pseudo-element adds a red arrow (→) before each <p> element. Pseudo-elements provide additional flexibility for styling elements and can be combined with other CSS properties to create various visual effects.

9. What is the use of CSS preprocessors and can you name some?

CSS preprocessors are tools that extend the functionality of CSS by introducing features like variables, nesting, mixins, and functions. They allow developers to write more maintainable and modular CSS code. Preprocessors require compilation to generate standard CSS that can be understood by web browsers.

Some popular CSS preprocessors are:

Sass (Syntactically Awesome Style Sheets)
Less (Leaner Style Sheets)
Stylus

These preprocessors provide features like variable declaration, nested selectors, mixins for reusable styles, functions for dynamic values, and more. They enhance the development process by promoting code reuse, modularity, and easier maintenance. Preprocessors can be integrated into build processes or used via command-line compilers to generate the final CSS file.

10. What does the CSS “calc()” function do?

The calc() function in CSS allows you to perform calculations to determine the value of a CSS property. It can be used to perform mathematical operations involving different units, variables, and values.

Here’s an example that demonstrates the usage of calc() to calculate the width of an element:

CSS

.container {
  width: calc(100% - 20px);
}

In this case, the width property of the .container class is calculated as 100% of its parent’s width minus 20 pixels.

The calc() function supports basic arithmetic operations like addition (+), subtraction (-), multiplication (*), and division (/). It can also handle different units, such as pixels (px), percentages (%), and ems (em).

Using calc(), you can create dynamic and responsive layouts by performing calculations based on other CSS property values or variables.

11. How can you create a responsive design with CSS?

Creating a responsive design with CSS involves using CSS media queries and flexible layout techniques. Here are some key steps to achieve a responsive design:

Use a mobile-first approach: Start by designing and coding your CSS styles for mobile devices first and then progressively enhance the layout for larger screens.
Utilize CSS media queries: Media queries allow you to apply different styles based on the device’s screen size. By defining breakpoints at specific screen widths, you can adjust the layout and styling accordingly. For example:

CSS

@media (min-width: 768px) {
  /* Styles for tablets and larger screens */
}

@media (min-width: 1024px) {
  /* Styles for desktop screens */
}

Create a flexible layout: Use CSS techniques like Flexbox or CSS Grid to create flexible and responsive layouts. These layout systems automatically adjust the placement and size of elements based on the available space.
Use relative units: Instead of using fixed pixel values for widths and heights, use relative units like percentages (%) or viewport units (vw, vh) to ensure that elements adapt to different screen sizes.
Optimize images: Implement responsive images using the max-width property to ensure that images scale down proportionally on smaller screens. Additionally, consider using modern image formats like WebP that offer better compression and faster loading times.
Test and iterate: Regularly test your design across various devices and screen sizes to ensure that it responds appropriately. Make adjustments as needed to provide an optimal user experience.

12. What are CSS Modules?

CSS Modules are a CSS scoping technique that allows you to encapsulate CSS styles within a specific component or module. This helps avoid style conflicts and provides better modularity in large-scale projects.

With CSS Modules, each CSS file is treated as a separate module, and class names are locally scoped by default. This means that class names defined in one module do not collide with class names in another module. It promotes component-based styling and improves code organization.

Here’s an example of how CSS Modules work:

CSS

/* styles.module.css */

.container {
  background-color: #f2f2f2;
  padding: 10px;
}

.title {
  color: blue;
}

CSS

// component.js

import styles from '/styles.module.css';

function Component() {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Hello, CSS Modules!</h1>
    </div>
  );
}

In this example, the CSS class names in styles.module.css are locally scoped to the Component. When the component is rendered, the generated class names will be unique and not interfere with other components or global styles.

CSS Modules help create more maintainable and modular CSS code by encapsulating styles within components and reducing the chances of naming conflicts.

13. How do you apply a CSS rule to only the first child of an element?

To apply a CSS rule to only the first child of an element, you can use the :first-child pseudo-class. It selects the first child element of its parent. Here’s an example:

CSS

.parent :first-child {
  /* CSS rules for the first child */
}

In this example, the CSS rules within the selector will be applied only to the first child element inside the .parent element.

For instance, if you want to apply special styling to the first paragraph within a <div>, you can use the following CSS:

CSS

div p:first-child {
  /* CSS rules for the first paragraph inside a <div> */
}

14. How does inheritance work in CSS?

In CSS, inheritance is a mechanism by which certain properties of an element are automatically applied to its children. When a property is set on a parent element, the child elements inherit that property unless specifically overridden.

Here are some key points about inheritance in CSS:

Inherited properties: Some CSS properties, such as font-family, color, and line-height, are inherited by default. This means that if a parent element has a specific value for an inherited property, its child elements will also inherit that value unless overridden.
Non-inherited properties: On the other hand, certain CSS properties, like width, height, and padding, are not inherited. Child elements do not inherit these properties from their parent elements.
Overriding inherited properties: If you want to prevent inheritance or override an inherited property, you can explicitly set a different value on the child element.
Inheritance levels: Inheritance can occur through multiple levels of nesting. If a property is set on a grandparent element, it will be inherited by its parent element and subsequently by the child elements.
Inheritance specificity: In cases where multiple styles are applied to an element, the specificity of the selector determines which styles are inherited. If a more specific selector targets a child element and sets a different value for an inherited property, that value will override the parent’s value.

It’s important to understand the inheritance behavior of CSS properties to ensure consistent styling across elements and to selectively control the inheritance using CSS rules and specificity.

15. What are the differences between “em” and “rem” units in CSS?

Both “em” and “rem” are relative units in CSS that are used for specifying sizes. The main difference lies in how they calculate their values.

“em” unit: The “em” unit is relative to the font-size of the element itself or its parent. When setting a size with “em”, the value is multiplied by the font-size of the element. For example, if an element has a font-size of 16 pixels and a width set to 2em, the width will be calculated as 32 pixels (16 * 2).
“rem” unit: The “rem” unit (root em) is relative to the font-size of the root element, typically the <html> element. When setting a size with “rem”, the value is multiplied by the font-size of the root element. This makes “rem” more predictable and easier to use for creating consistent layouts across the entire document.

Here’s an example to illustrate the difference between “em” and “rem” units:

CSS

body {
  font-size: 16px; /* Root font-size */
}

.container {
  font-size: 1.2em; /* Relative to the parent font-size */
  width: 2em; /* Relative to the container's font-size */
}

.box {
  font-size: 1.5rem; /* Relative to the root font-size */
  width: 2rem; /* Relative to the root font-size */
}

In this example, the font-size of the <body> element is set to 16 pixels. The .container class has a font-size of 1.2em, which means it will be 1.2 times the font-size of its parent. The .box class has a font-size of 1.5rem, which means it will be 1.5 times the root font-size.

Using “rem” units can help create a consistent and scalable layout, especially when dealing with nested elements. “em” units are useful when you want the size to be relative to the font-size of the parent

16. What does a “clearfix” do in CSS?

A “clearfix” is a CSS technique used to clear floats and ensure that a container properly encloses its floated child elements. When an element contains floated elements, it may not expand to encompass the height of those floated elements, resulting in layout issues.

To fix this, a clearfix is applied to the container element. It typically involves adding an additional CSS rule or a pseudo-element to generate a clearing effect. Here are a few common ways to create a clearfix:

Overflow method:

CSS

.container {
  overflow: auto;
}

This method triggers a new block formatting context, which causes the container to fully contain its floated children.

Clearfix class method:

CSS

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

In this method, a pseudo-element with clear:both is added after the content of the container. The clearfix class is then applied to the container element.

clearfix class method (legacy support):

CSS

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

/* For older versions of IE */
.clearfix {
  zoom: 1;
}

This method uses both a :before and :after pseudo-element to clear the floats, along with the zoom property to trigger hasLayout for older versions of Internet Explorer.

Using a clearfix is important to prevent layout issues caused by floated elements. It ensures that containers properly expand to contain their floated children, maintaining the desired layout structure.

17. How can you make text unselectable on a webpage?

To make text unselectable on a webpage, you can use the CSS user-select property. Here are the steps to achieve this:

Select the desired element or elements that you want to make unselectable using CSS selectors.
Apply the user-select property with a value of none to those elements.

CSS

.unselectable {
  user-select: none;
}

Add the unselectable class to the elements that you want to make unselectable.

CSS

<p class="unselectable">This text is unselectable.</p>

By setting user-select: none, you prevent users from selecting and highlighting the text within the specified elements. This property is supported in modern browsers, but it may not work in older browsers that do not support the CSS3 user-select property.

Note that while this CSS property prevents users from selecting text through regular mouse interaction, it does not disable the selection via keyboard shortcuts or other programmatic means. It is primarily intended to provide a visual indication that the text should not be selected.

18. Can you explain the concept of CSS “cascading”?

In CSS, “cascading” refers to the process of determining which styles should be applied to an element when multiple styles are defined for the same element. The cascading process follows a set of rules that prioritize and resolve conflicting styles.

The CSS cascade operates through three main mechanisms:

Importance: Styles with higher importance override styles with lower importance. Importance is determined by the use of the !important declaration, which gives a style the highest priority. However, the use of !important should generally be avoided to maintain a more maintainable and predictable codebase.
Specificity: If two or more conflicting styles have the same importance, specificity is used to determine which style takes precedence. Specificity is calculated based on the combination of selectors used to target an element and is represented by a four-part notation: a, b, c, d. The higher the number for each part, the higher the specificity.

Inline styles have the highest specificity (a=1, b=0, c=0, d=0), as they are applied directly to the element using the style attribute.
IDs have a higher specificity (a=0, b=1, c=0, d=0) than classes, attributes, or pseudo-classes.
Classes, attributes, and pseudo-classes have a higher specificity (a=0, b=0, c=1, d=0) than element selectors (a=0, b=0, c=0, d=1).

For example, a style defined with h1.title (class selector) would have a higher specificity than div (element selector).

Source order: If multiple conflicting styles have the same importance and specificity, the source order of the styles in the CSS file determines which style is applied. Styles defined later in the file override earlier styles for the same element.

The cascading process allows for the flexibility and customization of styles in CSS. By understanding the rules of specificity and the order of styles, you can control how styles are applied to elements and resolve conflicts when necessary.

19. How do you apply a CSS rule to an element when it gets focus?

To apply a CSS rule to an element when it receives focus, you can use the :focus pseudo-class selector. It targets an element when it becomes the active element, such as when it is clicked or tabbed into.

Here’s an example of applying a CSS rule to an input element when it receives focus:

CSS

input:focus {
  outline: 2px solid blue;
}

In this example, when an <input> element receives focus, a blue outline with a 2-pixel solid border is applied to it. You can modify the CSS rules inside the selector to style the element as desired when it receives focus.

The :focus pseudo-class can be used with various elements, including input fields, buttons, links, and form elements. It provides a visual indication to users that the element is currently active or selected.

20. How can you set a background image for a web page in CSS?

To set a background image for a web page using CSS, you can use the background-image property. Here’s an example:

CSS

body {
  background-image: url("path/to/image.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

In this example, the background-image property sets the path to the image file that you want to use as the background. You can specify the path using a URL or a relative/absolute file path.

The background-repeat property determines how the image repeats within the background. In this case, no-repeat ensures that the image is not repeated.

The background-size property sets the size of the background image. Using cover scales the image proportionally to cover the entire background area, while maintaining its aspect ratio.

You can apply the background image to specific elements, such as a <div>, by targeting the element with CSS and applying the same set of background properties.

CSS

div {
  background-image: url("path/to/image.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

By setting the background image using CSS, you can enhance the visual appeal and design of your web page by adding custom imagery as the background.

Advanced Questions

1. How would you implement a web design comp that uses non-web-standard fonts?

To implement a web design comp that uses non-web-standard fonts, you can use the @font-face rule in CSS. Here are the steps:

Obtain the font files: You need to have the font files in formats like .woff, .woff2, .ttf, or .otf.
Upload the font files: Upload the font files to your web server or a third-party font hosting service.
Define the @font-face rule: In your CSS file, define the @font-face rule and specify the font family name, font file URL, and font formats.

CSS

@font-face {
  font-family: 'MyCustomFont';
  src: url('path/to/font.woff2') format('woff2'),
       url('path/to/font.woff') format('woff');
}

Apply the custom font to elements: Use the font-family property to apply the custom font to specific elements or classes.

CSS

.custom-font {
  font-family: 'MyCustomFont', sans-serif;
}

By following these steps, the non-web-standard font will be loaded and applied to the specified elements, allowing you to achieve the desired design.

2. Explain how you’d create a CSS triangle.

To create a CSS triangle, you can utilize the borders of an element. Here’s an example of creating a downward-pointing triangle:

CSS

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 50px solid red;
}

In this example, the element with the class .triangle has no content (width and height set to 0), and the borders are used to form a triangle shape. By setting two border sides to transparent and one border side to the desired color, you can create a triangle pointing in the desired direction.

3. How would you use CSS to create a two-column layout?

To create a two-column layout in CSS, you can use CSS Grid or Flexbox. Here’s an example using CSS Grid:

CSS

.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two columns with equal width */
  gap: 20px; /* Gap between columns */
}

In this example, the parent container with the class .container is set to display: grid, and the grid-template-columns property is used to define the width of the columns. The value 1fr 1fr means that both columns will have an equal width.

You can also achieve a two-column layout using Flexbox:

CSS

.container {
  display: flex;
}

.column {
  flex: 1; /* Equal width for both columns */
}

In this case, the parent container with the class .container is set to display: flex, which creates a flex container. The child elements within the container will automatically arrange themselves in a row. By setting flex: 1 on the child elements (columns), both columns will have equal width.

4. What does box-sizing do in CSS?

The box-sizing property in CSS is used to control how the total width and height of an element are calculated. It affects the box model calculations.

By default, the value of box-sizing is set to content-box, which means that the width and height of an element only include its content and do not account for padding, margins, or borders.

However, when box-sizing is set to border-box, the width and height of an element include the content, padding, and border. The padding and border are drawn inside the specified width and height, rather than adding to the overall dimensions.

Here’s an example:

CSS

.box {
  width: 200px;
  height: 200px;
  padding: 20px;
  border: 2px solid black;
  box-sizing: border-box;
}

In this example, the .box element will have a total width and height of 200 pixels, including the padding and border. The content area inside the box will be reduced to accommodate the padding and border, ensuring that the specified width and height remain intact.

Setting box-sizing: border-box can be useful when you want to calculate sizes more intuitively and avoid unexpected layout issues caused by padding or border additions.

5. What’s the difference between translateX and left?

Both translateX and left are CSS properties used for positioning elements horizontally, but they have different behaviors and effects.

translateX: It is a transform property that allows you to move an element horizontally without affecting the layout or position of other elements. It uses a 2D or 3D transformation matrix to translate the element along the X-axis. It does not impact the normal flow of elements, and the element remains within its original layout position. It is commonly used for animations and transitions.

Example:

CSS

.element {
  transform: translateX(100px);
}

This will move the .element 100 pixels to the right from its original position.

left: It is a positioning property used in conjunction with the position property to set the horizontal position of an element relative to its containing element. It is part of the CSS positioning model and can impact the layout of other elements. When an element is positioned relatively (position: relative), the left property specifies the number of pixels the element should be moved to the right or left from its normal position in the document flow.

Example:

CSS

.element {
  position: relative;
  left: 100px;
}

This will move the .element 100 pixels to the right from its normal position in the document flow, potentially affecting the layout of other elements.

In summary, translateX is a transform property that moves an element visually without affecting layout, while left is a positioning property that shifts an element’s position within the document flow and can impact layout.

6. What is the stacking context in CSS?

The stacking context is a concept in CSS that determines the order in which elements are rendered and displayed on the screen. When elements overlap or are positioned on top of each other, the stacking context defines their visual hierarchy.

Each stacking context forms a separate layer, and elements within the same stacking context are stacked relative to each other based on their stack level or stacking order.

The stacking order is determined by various factors, including:

The element’s position in the HTML hierarchy.
The CSS z-index property: Elements with a higher z-index value are stacked above elements with lower values.
The CSS position property: Positioned elements (e.g., position: absolute or position: relative) create stacking contexts.

Elements within the same stacking context are rendered from back to front, with elements appearing later in the HTML markup or having a higher z-index appearing on top.

Understanding the stacking context is crucial when dealing with layered or overlapping elements. By manipulating the z-index, position, or stacking context of elements, you can control their visual order and ensure desired layering in your web design.

7. What’s the use of the :root pseudo-class?

The :root pseudo-class in CSS is used to select the root element of the document, which is typically the <html> element. It allows you to apply styles specifically to the root element or define global CSS variables.

The :root pseudo-class is useful for the following purposes:

Defining global CSS variables: CSS variables declared within :root are accessible throughout the document, enabling you to create consistent and reusable styles. For example:

CSS

:root {
  --primary-color: #007bff;
}

.button {
  background-color: var(--primary-color);
}

Applying global styles: You can set default styles for elements across your document by using the :root pseudo-class. For instance:

CSS

:root {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

Overriding default browser styles: Some CSS properties, such as box-sizing, can be set globally on :root to ensure consistent behavior across different browsers.

The :root pseudo-class is typically used at the beginning of a CSS file or within a specific style section to define global styles or variables.

8. How does the CSS rule !important work?

The !important rule is a CSS declaration that gives a property higher specificity, overriding any conflicting styles applied to an element. It is used to ensure that a specific style takes precedence over other styles.

When a style is marked with !important, it will override any conflicting styles, regardless of their specificity or order of appearance in the CSS file. Here’s an example:

CSS

.my-element {
  color: red !important;
}

.other-element {
  color: blue;
}

In this example, the .my-element will always have red text color, even if another style targets .other-element with a different color. The !important rule gives the color: red declaration higher priority.

While !important can be useful in specific cases, it is generally recommended to use it sparingly. Overusing !important can lead to code maintainability issues and make it harder to debug or modify styles in the future. It’s best to rely on proper specificity and order of CSS declarations whenever possible.

9. What is the difference between position: static and position: relative?

position: static: It is the default positioning for an element in CSS. When an element has position: static, it follows the normal flow of the document and is not affected by the top, right, bottom, or left properties. It is positioned according to its place in the HTML structure.

Example:

CSS

.box {
  position: static;
}

position: relative: When an element has position: relative, it is positioned relative to its normal position in the document flow. It allows you to move the element using the top, right, bottom, and left properties. However, the space it occupies in the normal flow is preserved, and other elements are not affected by its new position.

Example:

CSS

.box {
  position: relative;
  top: 20px;
  left: 30px;
}

In this example, the .box element will be moved 20 pixels down and 30 pixels to the right from its normal position, but the surrounding elements will not be adjusted.

The key difference between position: static and position: relative is that position: relative allows you to move the element relative to its initial position, while position: static does not offer any positioning options.

10. Can you apply CSS styles to a part of a character?

No, CSS does not provide a direct way to apply styles to specific parts of a character. CSS operates on whole elements and treats text as a single unit. However, you can achieve similar effects using various techniques such as pseudo-elements, background images, or SVG icons combined with appropriate styling.

For example, you can use a pseudo-element like ::first-letter to target the first letter of a paragraph and apply specific styles to it:

CSS

p::first-letter {
  font-size: 24px;
  color: red;
}

This will make the first letter of each paragraph larger and colored red. However, it’s important to note that this technique works only for the first letter and not for arbitrary parts of a character.

If you need more granular control over individual parts of a character, you may need to consider alternative approaches such as using JavaScript and manipulating the DOM dynamically or utilizing libraries and frameworks that offer more advanced text styling capabilities.

11. What are CSS counters and how are they used?

CSS counters are a feature that allows you to create and manipulate counter values associated with HTML elements. They are useful for automatically numbering or labeling elements, such as sections, chapters, or list items.

To use CSS counters, you typically follow these steps:

Define a counter using the counter-reset property. This initializes the counter value.
Increment the counter using the counter-increment property. This increases the counter value.
Display the counter value using the content property with the counter() function.

Here’s an example of using CSS counters to automatically number ordered list items:

CSS

ol {
  counter-reset: my-counter;
  list-style-type: none;
}

li::before {
  counter-increment: my-counter;
  content: counter(my-counter) ". ";
}

In this example, the counter-reset: my-counter initializes the my-counter counter for the <ol> element. Then, the counter-increment: my-counter increments the counter for each <li> element, and the content: counter(my-counter) ". " displays the counter value before each list item.

CSS counters provide a convenient way to generate automatic numbering or labeling within CSS, eliminating the need for manual HTML modifications. They offer flexibility and can be applied to various elements and scenarios.

12. What are the possible values of the position property?

The position property in CSS determines how an element is positioned within its containing element or the viewport. It accepts several values:

static: This is the default value. The element is positioned according to the normal flow of the document. Top, right, bottom, left, and z-index properties have no effect.
relative: The element is positioned relative to its normal position. It can be moved using the top, right, bottom, and left properties. Other elements are not affected, and the space it occupies in the normal flow is preserved.
absolute: The element is positioned relative to its nearest positioned ancestor (an ancestor with a position value other than static) or the containing block. It is taken out of the normal flow, and surrounding elements are not affected by its position.
fixed: Similar to absolute positioning, but the element is positioned relative to the viewport instead of its ancestors or containing block. It remains fixed in its position even when the page is scrolled.
sticky: The element is positioned based on the user’s scroll position. It is positioned as relative until the user scrolls to a specific threshold, after which it behaves like fixed. This value allows an element to stick to a specific position within its parent container based on scrolling.
inherit: The element inherits the position value from its parent element.

These are the main values of the position property in CSS. Each value has its own behavior and usage depending on the desired positioning requirements.

13. Can you explain the concept of “Block Formatting Context”?

In CSS, a Block Formatting Context (BFC) is a region in which block-level elements are laid out and interact with each other. It defines the rules for how elements are positioned, flow, and interact within a specific area of a web page.

A Block Formatting Context is created in the following situations:

The root element of the document.
Elements with a float property set to left or right.
Elements with a position value set to absolute or fixed.
Elements with a display value set to inline-block, table-cell, table-caption, or flex.
Elements with an overflow value other than visible, such as hidden, auto, or scroll.
Elements with a display value set to flow-root or grid.

When a Block Formatting Context is formed, it establishes a new layout context for the elements within it. This means that elements outside the Block Formatting Context do not influence the positioning and layout of elements inside it, and vice versa.

Block Formatting Contexts are useful for controlling the layout of elements and resolving issues related to element positioning, floating, and clearing. For example, using a Block Formatting Context can prevent elements from collapsing or overlapping with floated elements.

Understanding Block Formatting Contexts is important for web developers to effectively control the layout and behavior of their web pages, especially in complex designs where elements need to be positioned and interact in specific ways.

14. How do CSS image sprites work?

CSS image sprites are a technique used to reduce the number of HTTP requests made to the server when loading multiple small images on a web page. Instead of loading each image individually, a single image containing multiple smaller images (spritesheet) is used, and CSS is used to display specific parts of the image at different positions.

Here’s how CSS image sprites work:

Combine multiple small images into a single larger image, creating a spritesheet. The spritesheet should contain all the individual images positioned side by side or in a grid-like structure.
Define a CSS class for each individual image within the spritesheet. Each class will specify the background image, width, height, and position of the corresponding image within the spritesheet.
Apply the appropriate CSS class to the HTML elements that should display the corresponding image from the spritesheet.

By using CSS image sprites, the browser only needs to download a single image instead of multiple individual images, reducing the number of HTTP requests and improving the page’s loading performance. The desired image is displayed by adjusting the background position of the element using CSS.

CSS image sprites are commonly used for icons, buttons, and other small graphical elements on a web page.

15. Can you explain the difference between CSS variables and preprocessor variables?

CSS variables, also known as custom properties, are a feature introduced in CSS3 that allow you to define reusable values within CSS stylesheets. They begin with -- followed by a name and can be used to store colors, sizes, fonts, or any other value.

Preprocessor variables, on the other hand, are variables provided by CSS preprocessors such as Sass, Less, or Stylus. These variables are defined using the preprocessor’s syntax and can be used to store values that are processed and compiled into regular CSS.

Here are some differences between CSS variables and preprocessor variables:

Scope: CSS variables have a wider scope as they can be used throughout the stylesheet and are accessible in both the global and local context. Preprocessor variables, on the other hand, are scoped to their respective selector or file and are only accessible within that scope.
Dynamic nature: CSS variables can be dynamically updated using JavaScript, allowing for runtime changes to the values. Preprocessor variables are static and cannot be modified once compiled into CSS.
Browser support: CSS variables are supported by modern browsers, including Chrome, Firefox, Safari, and Edge. Preprocessor variables, on the other hand, require the use of a CSS preprocessor and are not natively supported by browsers. They need to be compiled into regular CSS using the preprocessor’s compiler.
Syntax: CSS variables are defined using the --variable-name syntax and accessed using the var(--variable-name) syntax. Preprocessor variables have their own syntax, which varies depending on the preprocessor being used.

Overall, CSS variables provide a native and more flexible way of defining and using variables within CSS, while preprocessor variables offer similar functionality but require the use of a preprocessor and have a different syntax. The choice between the two depends on the specific requirements of the project and the level of browser support needed.

16. What’s the difference between pseudo-classes and pseudo-elements?

In CSS, pseudo-classes and pseudo-elements are used to style specific parts of elements that cannot be targeted with regular selectors alone. While they may seem similar, there are key differences between the two:

Pseudo-classes:

Pseudo-classes are used to select and style elements based on a specific state or condition, such as :hover, :focus, or :nth-child().
They are prefixed with a colon (:) and follow the element or class selector.
Pseudo-classes target existing elements based on their state or position within the document or user interaction.
Examples: :hover, :active, :visited, :first-child.

Pseudo-elements:

Pseudo-elements are used to style specific parts of an element, creating virtual elements that don’t exist in the HTML structure.
They are prefixed with a double colon (::) and follow the element selector.
Pseudo-elements allow styling of specific parts of an element, such as the first letter or line of a paragraph (::first-letter, ::first-line), or creating additional content before or after an element (::before, ::after).
Pseudo-elements can be used to add decorative or structural elements to the content.
Examples: ::before, ::after, ::first-letter, ::first-line.

To summarize, pseudo-classes select elements based on their state or position, while pseudo-elements create virtual elements or style specific parts of an element.

17. Can you describe BEM and why it’s useful?

BEM stands for Block, Element, Modifier, and is a naming convention and methodology for writing maintainable and scalable CSS code. It provides a structured approach to class naming, making CSS styles more predictable and easier to understand.

The key concepts of BEM are as follows:

Block: A stand-alone component that has a meaningful purpose and represents a higher-level UI element. Blocks are represented by a single class name, usually in kebab-case or snake_case, such as .card or .button.
Element: Parts of a block that have no standalone meaning and are semantically tied to the block. Elements are represented by combining the block name with a double underscore (__), such as .card__title or .button__icon.
Modifier: Flags or variations that can be applied to a block or element to modify its appearance or behavior. Modifiers are represented by combining the block or element name with a double dash (--), such as .card--highlighted or .button--disabled.

BEM provides several benefits:

Readability: The BEM naming convention makes it easier to understand the purpose and relationships between different elements in the HTML structure.
Maintainability: BEM promotes a modular and component-based approach to CSS, making it easier to manage and update styles without affecting other parts of the codebase.
Reusability: BEM encourages the reuse of blocks and elements across different parts of a website or application, promoting consistency and reducing duplication.
Specificity control: BEM helps avoid issues with CSS specificity by providing a clear and consistent naming structure that minimizes conflicts and unintended side effects.

By following BEM, developers can create more organized and maintainable CSS codebases, resulting in improved collaboration, scalability, and code quality.

18. What is the currentColor keyword in CSS?

The currentColor keyword is a special value in CSS that represents the computed value of the color property applied to an element. It allows the use of the current text color as a value for other CSS properties within the same element.

The currentColor keyword can be used wherever a color value is expected, such as in the border-color, background-color, or box-shadow properties. When currentColor is used, it is replaced with the actual color value defined by the color property of the element.

Here’s an example to illustrate the usage of currentColor:

CSS

.button {
  color: blue;
  border: 2px solid currentColor;
  padding: 10px;
  background-color: white;
}

In the above example, the border property of the .button class is set to 2px solid currentColor. This means that the border color will be the same as the color property applied to the element, which in this case is blue.

Using currentColor can be helpful in situations where you want certain elements, such as borders or backgrounds, to match the text color without explicitly specifying the color value again. It allows for greater consistency and flexibility in styling, especially when the color may change dynamically.

19. How would you handle browser-specific styling?

When it comes to handling browser-specific styling, there are a few approaches you can consider:

CSS Vendor Prefixes: Some CSS properties and features may require vendor-specific prefixes to ensure compatibility with different browsers. For example, you may need to use -webkit-, -moz-, or -ms- prefixes for certain CSS properties. To handle browser-specific styling, you can use tools like Autoprefixer, which automatically adds the necessary vendor prefixes based on the browser support you define.
Feature Detection: Instead of targeting specific browsers, you can use feature detection to apply CSS styles based on the availability of certain features or capabilities. Modern JavaScript libraries like Modernizr can help you detect browser features and apply appropriate styles or fallbacks based on the detected support.
Conditional Comments: Conditional comments were a technique used in older versions of Internet Explorer to apply specific stylesheets or CSS rules for targeted versions of IE. However, conditional comments are no longer supported in newer versions of IE and other browsers. Therefore, this approach is not recommended for modern web development.
CSS Hacks: CSS hacks involve using non-standard CSS syntax or properties to target specific browsers or versions. While they may work in certain cases, CSS hacks are generally not recommended as they can lead to unexpected behavior and potential compatibility issues. It’s best to avoid using CSS hacks and instead rely on feature detection and vendor prefixing.
Progressive Enhancement and Graceful Degradation: Another approach to handling browser-specific styling is to adopt a progressive enhancement or graceful degradation strategy. This involves building a baseline experience that works in all browsers and then selectively enhancing or degrading certain features based on browser capabilities. This ensures a consistent user experience across different browsers while taking advantage of advanced features in modern browsers.

It’s important to consider browser compatibility and test your website or application in different browsers during development to ensure consistent and optimal rendering across various platforms.

20. How does CSS work with accessibility and screen readers?

CSS plays an essential role in enhancing the accessibility of web content and making it more accessible to users who rely on assistive technologies like screen readers. Here’s how CSS works in conjunction with accessibility and screen readers:

Textual Styling: CSS allows you to visually style text elements, such as headings, paragraphs, and links. This enables users of screen readers to navigate and understand the structure of the content more easily. It’s crucial to use proper heading tags (<h1> to <h6>) to create a logical document outline and apply appropriate styling to ensure visual hierarchy matches the content hierarchy.
Contrast and Color: CSS

provides control over colors and contrast, which is vital for users with visual impairments. It’s important to ensure sufficient color contrast between text and background elements to improve readability. WCAG (Web Content Accessibility Guidelines) provides specific guidelines for color contrast ratios that should be followed to ensure accessibility.

Focus Styles: CSS allows the customization of focus styles, which are essential for keyboard users and those navigating through a webpage without a mouse. By applying a distinct and visible focus style to interactive elements, such as links and form controls, users can easily identify which element is currently focused, enhancing navigation and usability.
Responsive Design: CSS facilitates the creation of responsive designs that adapt to different screen sizes and devices. This responsiveness ensures that content is accessible and usable across a range of devices, including desktops, tablets, and mobile phones.
ARIA Roles and Attributes: CSS can work in conjunction with ARIA (Accessible Rich Internet Applications) to enhance the accessibility of interactive elements. ARIA roles and attributes provide additional information to assistive technologies about the purpose and behavior of elements. CSS can be used to style elements that have specific ARIA roles or attributes, ensuring that the visual representation aligns with their intended functionality.
Hidden Content: CSS can be used to visually hide content that is intended for screen reader users only. This is achieved by applying CSS properties such as display: none, visibility: hidden, or position: absolute with negative offsets. This technique ensures that screen readers can access and read the content while keeping it hidden from visual users.

When developing accessible websites, it’s crucial to test the implementation with screen readers and other assistive technologies to verify that the content is effectively communicated and the user experience is optimized for all users, regardless of their abilities.

Coding Questions

1. Challenge: Style an HTML element with a specific id.

For an HTML element with id “myElement”, you can style it in CSS like this:

CSS

#myElement {
  color: blue;
}

2. Challenge: Create a CSS rule that applies to multiple selectors.

CSS

h1, h2, p {
  color: red;
}

3. Challenge: Use a pseudo-class to style all visited links.

CSS

a:visited {
  color: purple;
}

4. Challenge: Style only the first line of a paragraph.

CSS

p::first-line {
  font-weight: bold;
  color: blue;
}

5. Challenge: Use CSS to create a button with a gradient color.

CSS

button {
  background: linear-gradient(to bottom, #ff7f00, #ff5500);
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

6. Challenge: Style a list to appear horizontally.

CSS

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

7. Challenge: Create a div that has a shadow effect.

CSS

div {
  box-shadow: 10px 10px 5px grey;
}

8. Challenge: Create a circle using CSS.

CSS

.circle {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  background-color: red;
}

9. Challenge: Create a CSS animation to change the color of a button when it is hovered over.

CSS

button:hover {
  animation: colorchange 1s;
}

@keyframes colorchange {
  0% {background-color: blue;}
  100% {background-color: green;}
}

10. Challenge: Use the `calc()` function to set the width of an element.

CSS

div {
  width: calc(100% - 50px);
}

11. Challenge: Use CSS Grid to create a 3×3 grid layout.

CSS

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto;
}

12. Challenge: Create a responsive design using CSS media queries.

CSS

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

13. Challenge: Use CSS Flexbox to align items in a container.

CSS

.flex-container {
  display: flex;
  align-items: center;
}

14. Challenge: Create a fixed navigation bar using CSS.

CSS

nav {
  position: fixed;
  width: 100%;
  height: 50px;
  background-color: #333;
}

15. Challenge: Create a simple loading spinner using CSS animations.

CSS

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spinner {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius:

MCQ Questions

1. What does CSS stand for?

A. Cascading Style Sheets
B. Computer Style Sheets
C. Colorful Style Sheets
D. Creative Style Sheets
Answer: A

2. Which HTML tag is used to link a CSS file?

A. <css>
B. <link>
C. <style>
D. <script>
Answer: B

3. How do you select an element with the id “page”?

A. #page
B. .page
C. *page
D. page
Answer: A

4. What is the default value of “position” property in CSS?

A. relative
B. absolute
C. fixed
D. static
Answer: D

5. How can you make a list that lists its items with squares?

A. list-style-type: square
B. list-type: square
C. list: square
D. list-style: square
Answer: A

6. Which CSS property is used to change the text color of an element?

A. text-color
B. color
C. font-color
D. text-style
Answer: B

7. What does the CSS “opacity” property do?

A. Changes the color of an element
B. Sets the indentation of the text
C. Defines the transparency of an element
D. Specifies the space between cells in a table
Answer: C

8. Which CSS property is used to set the background color of an element?

A. background-color
B. color
C. bgcolor
D. background
Answer: A

9. Which CSS pseudo-class selects only the first child of an element?

A. :child
B. :first-child
C. :first
D. :first-of-type
Answer: B

10. Which of these is a CSS comment?

A. 
B. // this is a comment
C. ** this is a comment **
D. /* this is a comment */
Answer: D

11. How would you select all p elements inside div elements?

A. div p
B. div.p
C. div + p
D. div > p
Answer: A

12. Which property is used to change the font of an element?

A. font-family
B. text-style
C. text-font
D. font-type
Answer: A

13. Which property is used to change the left margin of an element?

A. padding-left
B. margin-left
C. indent-left
D. left-margin
Answer: B

14. How would you make all \ elements bold?

A. p {font-weight:bold;}
B. p {text:bold;}
C. p {font:bold;}
D. p {text-size:bold;}
Answer: A

15. What does the “display” property do in CSS?

A. It sets if/how an element is displayed.
B. It sets the space between words in a text.
C. It sets the maximum content width of an element.
D. It sets the minimum content height of an element.
Answer: A

16. Which property is used to specify the stacking order of elements?

A. z-index
B. order
C. stack
D. depth
Answer: A

17. What does the “border-radius” property do in CSS?

A. It defines the radius of the element’s border.
B. It defines the horizontal radius of an element.
C. It defines the vertical radius of an element.
D. It defines the color of the border.
Answer: A

18. Which is the correct CSS syntax?

A. {body: color=black}
B. {body;color:black}
C. body:color=black
D. body {color: black;}
Answer: D

19. Which property is used to set the background image of an element?

A. background-color
B. color
C. background-img
D. background-image
Answer: D

20. What does “em” unit mean in CSS?

A. It is relative to the font-size of the parent.
B. It is a fixed unit and does not change with the size of the viewport.
C. It is the width of the “0” (zero) character.
D. It is relative to the x-height of the current font.
Answer: A

21. Which CSS property defines the space between the element’s border and content?

A. margin
B. padding
C. border
D. space
Answer: B

22. How do you display hyperlinks without an underline?

A. a {text-decoration:none;}
B. a {decoration:no-underline;}
C. a {underline:none;}
D. a {text:no-underline;}
Answer: A

23. How do you group selectors?

A. Separate each selector with a comma
B. Separate each selector with a plus sign
C. Separate each selector with a space
D. Separate each selector with a period
Answer: A

24. How do you select elements with class name ‘test’?

A. .test
B. *test
C. #test
D. test
Answer: A

25. How do you select an element with the id “foo”?

A. *foo
B. .foo
C. #foo
D. foo
Answer: C

26. How do you select all paragraph elements inside a div element?

A. div > p
B. div.p
C. div + p
D. div p
Answer: D

27. How do you align text to the center of a block element?

A. text-align:center;
B. text:center;
C. align:center;
D. text-align:middle;
Answer: A

28. Which property changes the style of an element’s bottom border?

A. border-bottom-style
B. border-bottom
C. border-style-bottom
D. border-bottom-type
Answer: A

29. Which property is used to specify the space between an element’s border and its children?

A. padding
B. margin
C. border-spacing
D. border
Answer: A

30. Which CSS unit is not relative to the size of the viewport?

A. vw
B. vh
C. cm
D. vmin
Answer: C

Deepak Vishwakarma July 5, 2023Last Updated: July 5, 2023

0 3 6 minutes read

Introduction

Basic Questions

1. What is CSS and what is its purpose?

2. Can you explain what is meant by CSS selectors?

3. What are the different types of CSS?

4. How would you include an external CSS in an HTML file?

5. Can you differentiate between a class selector and an ID selector?

6. What does CSS ‘inheritance’ mean?

7. How do you add comments in CSS?

8. What are CSS pseudo-classes?

9. How can you make a list in CSS without bullet points?

10. What is the CSS box model?

11. How can you center an element horizontally in CSS?

12. What is a CSS rule or ruleset?

13. Can you style an HTML element only using its attributes?

14. What is the use of !important in CSS?

15. How can you clear floats in CSS?

16. What is the z-index in CSS?

17. What is a CSS preprocessor?

18. What is the difference between visibility: hidden and display: none in CSS?

19. What are CSS Media Queries?

20. What is the difference between CSS Grid and Flexbox?

Intermediate Questions

1. What is the difference between “position: relative”, “position: absolute” and “position: fixed” in CSS?

2. What does CSS “specificity” mean?

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

4. What is CSS “flexbox” and what are its advantages?

5. What are CSS Transitions?

6. How does the “z-index” property work in CSS?

7. What is a sprite and how can you implement it in CSS?

8. What are CSS pseudo-elements?

9. What is the use of CSS preprocessors and can you name some?

10. What does the CSS “calc()” function do?

11. How can you create a responsive design with CSS?

12. What are CSS Modules?

13. How do you apply a CSS rule to only the first child of an element?

14. How does inheritance work in CSS?

15. What are the differences between “em” and “rem” units in CSS?

16. What does a “clearfix” do in CSS?

17. How can you make text unselectable on a webpage?

18. Can you explain the concept of CSS “cascading”?

19. How do you apply a CSS rule to an element when it gets focus?

20. How can you set a background image for a web page in CSS?

Advanced Questions

1. How would you implement a web design comp that uses non-web-standard fonts?

2. Explain how you’d create a CSS triangle.

3. How would you use CSS to create a two-column layout?

4. What does box-sizing do in CSS?

5. What’s the difference between translateX and left?

6. What is the stacking context in CSS?

7. What’s the use of the :root pseudo-class?

8. How does the CSS rule !important work?

9. What is the difference between position: static and position: relative?

10. Can you apply CSS styles to a part of a character?

11. What are CSS counters and how are they used?

12. What are the possible values of the position property?

13. Can you explain the concept of “Block Formatting Context”?

14. How do CSS image sprites work?

15. Can you explain the difference between CSS variables and preprocessor variables?

16. What’s the difference between pseudo-classes and pseudo-elements?

17. Can you describe BEM and why it’s useful?

18. What is the currentColor keyword in CSS?

19. How would you handle browser-specific styling?

20. How does CSS work with accessibility and screen readers?

Coding Questions

1. Challenge: Style an HTML element with a specific id.

2. Challenge: Create a CSS rule that applies to multiple selectors.

3. Challenge: Use a pseudo-class to style all visited links.

4. Challenge: Style only the first line of a paragraph.

5. Challenge: Use CSS to create a button with a gradient color.

6. Challenge: Style a list to appear horizontally.

7. Challenge: Create a div that has a shadow effect.

8. Challenge: Create a circle using CSS.

9. Challenge: Create a CSS animation to change the color of a button when it is hovered over.

10. Challenge: Use the calc() function to set the width of an element.

11. Challenge: Use CSS Grid to create a 3×3 grid layout.

12. Challenge: Create a responsive design using CSS media queries.

13. Challenge: Use CSS Flexbox to align items in a container.

14. Challenge: Create a fixed navigation bar using CSS.

15. Challenge: Create a simple loading spinner using CSS animations.

18. What is the difference between `visibility: hidden` and `display: none` in CSS?

10. Challenge: Use the `calc()` function to set the width of an element.