CSS Interview Questions and Answers

A list of top frequently asked CSS interview questions and answers are given below.

What is CSS?

CSS stands for Cascading Style Sheets.CSS stands for Cascading Style Sheet. It is a popular styling language which is used with HTML to design websites.

What are the CSS frameworks?

CSS frameworks are the preplanned libraries which make easy and more standard compliant web page styling. The frequently used CSS frameworks are: -

Bootstrap
Foundation
Semantic UI

What is a CSS selector?

A CSS selector selects the HTML element(s) you want to style.

There are several different types of selectors in CSS: -

CSS Element Selector
CSS Id Selector
CSS Class Selector
CSS Universal Selector
CSS Group Selector

CSS Element Selector:

The element selector selects HTML elements based on the element name.

p {
  text-align: center;
  color: red;
}

CSS Id Selector:

The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element is unique within a page, so the id selector is used to select one unique element!

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>

</body>
</html>

CSS Class Selector:

The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the class name.

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p> 

</body>
</html>

CSS Universal Selector:

The universal selector (*) selects all HTML elements on the page.

<!DOCTYPE html>
<html>
<head>
<style>
* {
  text-align: center;
  color: blue;
}
</style>
</head>
<body>

<h1>Hello world!</h1>

<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>

</body>
</html>

CSS Group Selector

The grouping selector selects all the HTML elements with the same style definitions.

Look at the following CSS code (the h1, h2, and p elements have the same style definitions)

<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>

</body>
</html>

What does !important mean in CSS?

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

Tell us about the use of the CSS Box Model.

The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.

Content: Actual Content of the box where the text or image is placed.The dimensions of the content area are determined by properties like width and height.
Padding: Area surrounding the content (Space between the border and content).Padding can be set using properties like padding-top, padding-right, padding-bottom, and padding-left.
Border: Area surrounding the padding.Borders can have different styles, widths, and colors using properties like border-style, border-width, and border-color.
Margin: Area surrounding the border.Margins can be set using properties like margin-top, margin-right, margin-bottom, and margin-left.

The dimensions of an element in the CSS Box Model are calculated as follows:

Total element width = width + left padding + right padding + left border + right border + left margin + right margin
Total element height = height + top padding + bottom padding + top border + bot

Explain the Pseudo element?

In CSS, a pseudo-element is a keyword that allows you to style a specific part of an element. Pseudo-elements are used to add decorative or functional elements to selected elements without modifying the HTML structure. They are denoted by double colons (::) in CSS3, but for compatibility with older browsers, a single colon (:) can also be used.

There are several commonly used pseudo-elements in CSS:

::before: This pseudo-element inserts content before the selected element. It is often used for decorative purposes or to insert additional content dynamically.
::after: This pseudo-element inserts content after the selected element. It is commonly used to add decorative elements, such as icons or tooltips, or to insert generated content.
::first-line: This pseudo-element targets the first line of text within an element. It allows you to apply styles specifically to the first line, such as changing the font size or color.
::first-letter: This pseudo-element targets the first letter of the text within an element. It is commonly used to apply styles to the first letter, such as making it larger or applying a different font.
::selection: This pseudo-element targets the portion of text selected by the user. You can apply styles to the selected text, such as changing the background color or text color.

Here's an example of using the ::before pseudo-element to add content before an element:

p::before {
  content: ">> ";
  font-weight: bold;
}

Explain the Float property of CSS3.

The CSS float property specifies how an element should float.
The CSS clear property specifies what elements can float beside the cleared element and on which side.

The float property is used for positioning and formatting content e.g. let an image float left to the text in a container.

The float property can have one of the following values:

left - The element floats to the left of its container
right - The element floats to the right of its container
none - The element does not float (will be displayed just where it occurs in the text). This is default
inherit - The element inherits the float value of its parent

In its simplest use, the float property can be used to wrap text around images.

Here's an example of using the float property:

img {
  float: left;
  margin-right: 10px;
}

Explain Z-index in CSS3.

The z-index property specifies the stack order of an element.

When elements are positioned, they can overlap other elements.

The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).

An element can have a positive or negative stack order:

Another z-index Example

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.black-box {
  position: relative;
  z-index: 1;
  border: 2px solid black;
  height: 100px;
  margin: 30px;
}

.gray-box {
  position: absolute;
  z-index: 3; /* gray box will be above both green and black box */
  background: lightgray;
  height: 60px;  
  width: 70%;
  left: 50px;
  top: 50px;
}

.green-box {
  position: absolute;
  z-index: 2; /* green box will be above black box */
  background: lightgreen;
  width: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>

<h1>Z-index Example</h1>

<p>An element with greater stack order is always above an element with a lower stack order.</p>

<div class="container">
  <div class="black-box">Black box (z-index: 1)</div>
  <div class="gray-box">Gray box (z-index: 3)</div>
  <div class="green-box">Green box (z-index: 2)</div>
</div>

</body>
</html>

Without z-index

If two positioned elements overlap each other without a z-index specified, the element defined last in the HTML code will be shown on top.

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
}

.black-box {
  position: relative;
  border: 2px solid black;
  height: 100px;
  margin: 30px;
}

.gray-box {
  position: absolute;
  background: lightgray;
  height: 60px;  
  width: 70%;
  left: 50px;
  top: 50px;
}

.green-box {
  position: absolute;
  background: lightgreen;
  width: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}
</style>
</head>
<body>

<h1>Overlapping elements</h1>

<p>If two positioned elements overlap each other without a z-index specified,
the element defined last in the HTML code will be shown on top:</p>

<div class="container">
  <div class="black-box">Black box</div>
  <div class="gray-box">Gray box</div>
  <div class="green-box">Green box</div>
</div>

</body>
</html>

What do you know about CSS3 Flexbox?

CSS3 Flexbox, also known as Flexible Box Layout, is a CSS layout module that provides a flexible and efficient way to arrange and align elements within a container.

It provides proper orientation of elements in web pages, easy layout handling, and space distribution within elements in a responsive website

Here are some key features and concepts of CSS3 Flexbox:

Flex Container: To use Flexbox, you first define a flex container by setting the display property of an element to flex or inline-flex. This creates a new flex formatting context, and all direct children of the flex container become flex items.
Flex Direction: The flex-direction property defines the main axis along which flex items are laid out. It can be set to row, row-reverse, column, or column-reverse. By default, it is set to row.
Flex Items: Flex items are the children of the flex container. They can have flexible widths, heights, and order within the flex container.
Flex Wrap: By default, flex items are laid out in a single line. However, with the flex-wrap property, you can control whether flex items should wrap to multiple lines if they don't fit in the container. It can be set to nowrap, wrap, or wrap-reverse.
Flex Grow, Shrink, and Basis: Flex items have three main properties that control their size and flexibility. flex-grow specifies how much the item should grow to fill the available space, flex-shrink specifies how much it should shrink when there is not enough space, and flex-basis sets the initial size of the item before any remaining space is distributed.
Justify Content: The justify-content property defines how flex items are aligned along the main axis of the flex container. It can be used to set their alignment to flex-start, flex-end, center, space-between, space-around, or space-evenly.
Align Items: The align-items property defines how flex items are aligned along the cross axis of the flex container. It can be used to set their alignment to flex-start, flex-end, center, baseline, or stretch.
Align Content: The align-content property controls the alignment of multiple lines of flex items along the cross axis when they wrap. It has similar values to justify-content, such as flex-start, flex-end, center, space-between, space-around, or stretch.

What do you mean by Responsive website?

A responsive website is a website design approach that aims to provide an optimal viewing experience across a wide range of devices and screen sizes, including desktop computers, laptops, tablets, and mobile phones.

The key principles of responsive web design include:

Fluid Grids: Using relative units and flexible grid systems, such as percentages or em units, to create a layout that can adapt to different screen sizes. This allows the content to resize and reflow proportionally.
Flexible Images: Using CSS techniques, such as setting the max-width property of images to 100%, to ensure that images scale appropriately and do not overflow their containing elements.
Media Queries: Utilizing CSS media queries to apply different styles and layouts based on the characteristics of the device, such as screen width, height, or orientation. Media queries allow for targeted styling adjustments for specific screen sizes or device capabilities.
Breakpoints: Defining specific breakpoints within the design where the layout and styling need to adapt to provide an optimal experience on different screen sizes. These breakpoints are determined based on common device widths or user experience considerations.

Explain difference between position: relative and position: absolute.

The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).

position: absolute;

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

Note: Absolute positioned elements are removed from the normal flow, and can overlap elements.

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
} 

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: absolute;</h2>

<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):</p>

<div class="relative">This div element has position: relative;
  <div class="absolute">This div element has position: absolute;</div>
</div>

</body>
</html>

position: relative;

An element with position: relative; is positioned relative to its normal position.

Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<h2>position: relative;</h2>

<p>An element with position: relative; is positioned relative to its normal position:</p>

<div class="relative">
This div element has position: relative;
</div>

</body>
</html>

CSS Interview Questions and Answers

What is CSS?

What are the CSS frameworks?

What is a CSS selector?

What does !important mean in CSS?

Tell us about the use of the CSS Box Model.

Explain the Pseudo element?

Explain the Float property of CSS3.

Explain Z-index in CSS3.

Another z-index Example

Without z-index

What do you know about CSS3 Flexbox?

What do you mean by Responsive website?

Explain difference between position: relative and position: absolute.

position: absolute;

position: relative;

Explain difference between `position: relative` and `position: absolute`.