CSS Interview Questions Asked in Most Companies

Questions & Answers

1What is CSS and why is it used?

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation and visual styling of HTML documents.

Purpose of CSS:

Controls the visual appearance of web pages (colors, fonts, layouts)
Separates content (HTML) from presentation (CSS)
Enables responsive design for different screen sizes
Improves website maintainability and consistency
Reduces code repetition across multiple pages

Example:

css

<!-- HTML -->
<h1 class="title">Welcome</h1>
<p class="description">This is styled text.</p>

<!-- CSS -->
<style>
.title {
color: #2c3e50;
font-size: 32px;
text-align: center;
}

.description {
color: #7f8c8d;
font-size: 16px;
line-height: 1.6;
}
</style>

2What are the different types of CSS (inline, internal, external)?

CSS can be applied in three ways:

1. Inline CSS:

text

<h1 style="color: blue; font-size: 24px;">Hello</h1>

Pros: Highest priority, quick testing

Cons: Hard to maintain, no reusability

2. Internal CSS:

css

<head>
<style>
h1 { color: navy; }
.btn { padding: 10px; }
</style>
</head>

Pros: Good for single pages

Cons: Not reusable across pages

3. External CSS:

text

<head>
<link rel="stylesheet" href="styles.css">
</head>

Pros: Reusable, maintainable, cacheable

Cons: Extra HTTP request

Priority: Inline > Internal > External

3What is the CSS box model?

The CSS Box Model describes how elements are rendered as boxes with content, padding, borders, and margins.

Components (inside to outside):

Content: Actual content (text, images)
Padding: Space between content and border
Border: Line around padding and content
Margin: Space outside border

css

.box {
width: 300px; /* Content width */
padding: 20px; /* Inside spacing */
border: 5px solid; /* Border */
margin: 10px; /* Outside spacing */
}
/* Total width = 300 + 40 + 10 + 20 = 370px */

Box-sizing:

css

/* Default */
.content-box {
box-sizing: content-box;
/* Width = content only */
}

/* Recommended */
.border-box {
box-sizing: border-box;
/* Width = content + padding + border */
}

4What is the difference between margin and padding?

Margin: Space OUTSIDE the border (transparent)

Padding: Space INSIDE the border (shows background)

css

.with-margin {
margin: 20px; /* Space outside */
background: blue; /* Doesn't extend to margin */
}

.with-padding {
padding: 20px; /* Space inside */
background: blue; /* Extends to padding */
}

5What are CSS selectors? Give examples.

CSS selectors target HTML elements for styling.

Basic Selectors:

css

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

/* Element */
p { color: blue; }
h1 { font-size: 32px; }

/* Class */
.container { width: 1200px; }
.btn { padding: 10px; }

/* ID */
#header { background: navy; }
#main { padding: 20px; }

/* Multiple classes */
.btn.primary { background: blue; }

Combinators:

css

/* Descendant */
div p { color: red; }

/* Child */
div > p { color: blue; }

/* Adjacent sibling */
h1 + p { margin-top: 0; }

/* General sibling */
h1 ~ p { color: gray; }

Attribute Selectors:

css

[type="text"] { border: 1px solid; }
[href^="https"] { color: green; }
[href$=".pdf"] { color: red; }

Pseudo-classes:

css

a:hover { color: red; }
input:focus { border: 2px solid blue; }
li:first-child { font-weight: bold; }

6What is specificity in CSS?

Specificity determines which CSS rule applies when multiple rules target the same element.

Specificity Hierarchy (low to high):

Element selectors (1)
Class selectors (10)
ID selectors (100)
Inline styles (1000)
!important (overrides all)

Calculation:

css

/* Specificity: 1 */
p { color: red; }

/* Specificity: 10 */
.text { color: blue; }

/* Specificity: 100 */
#main { color: green; }

/* Specificity: 11 (10 + 1) */
.text p { color: yellow; }

/* Specificity: 111 (100 + 10 + 1) */
#main .text p { color: purple; }

/* Specificity: 1000 */
<p style="color: orange;">Text</p>

/* Overrides everything */
p { color: black !important; }

Example:

css

<p id="text" class="highlight">Hello</p>

<style>
p { color: red; } /* 1 */
.highlight { color: blue; } /* 10 - WINS */
#text { color: green; } /* 100 - ACTUALLY WINS */
</style>

7What is the difference between class selector and id selector?

Class Selector (.class):

Can be reused on multiple elements
Lower specificity (10)
Best for styling groups

ID Selector (#id):

Must be unique per page
Higher specificity (100)
Best for JavaScript and anchors

html

<!-- HTML -->
<div id="header" class="container"></div>
<div class="container"></div>

<!-- CSS -->
/* Class - reusable */
.container {
max-width: 1200px;
margin: 0 auto;
}

/* ID - unique */
#header {
background: navy;
height: 80px;
}

FeatureClassID

Syntax

.className

#idName

Reusable

Yes

Specificity

100

Multiple per element

Yes

8What are pseudo-classes in CSS?

Pseudo-classes define special states of elements.

Link States:

css

a:link { color: blue; } /* Unvisited */
a:visited { color: purple; } /* Visited */
a:hover { color: red; } /* Mouse over */
a:active { color: green; } /* Being clicked */

Input States:

text

input:focus { border: 2px solid blue; }
input:disabled { opacity: 0.5; }
input:checked { background: green; }
input:valid { border: green; }
input:invalid { border: red; }

Structural:

css

li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }
li:nth-child(2) { color: red; }
li:nth-child(odd) { background: #f0f0f0; }
li:nth-child(even) { background: white; }
p:not(.special) { color: gray; }

Other:

text

div:empty { display: none; }
div:target { background: yellow; }

9What is display property? Explain types like block, inline, inline-block, flex.

The display property controls how elements are rendered.

Block:

text

div { display: block; }
/* - Starts on new line
- Takes full width
- Can set width/height */

Inline:

text

span { display: inline; }
/* - Stays on same line
- Width = content width
- Cannot set width/height */

Inline-block:

text

img { display: inline-block; }
/* - Stays on same line
- CAN set width/height */

Flex:

text

.container {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Modern layout system */

None:

text

.hidden { display: none; }
/* Removes element from layout */

Grid:

text

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
/* 2D layout system */

10What is position property? Explain static, relative, absolute, fixed.

Static (default):

text

div { position: static; }
/* Normal document flow */

Relative:

text

.box {
position: relative;
top: 20px;
left: 30px;
}
/* Offset from normal position */

Absolute:

text

.child {
position: absolute;
top: 0;
right: 0;
}
/* Positioned relative to nearest positioned ancestor */

Fixed:

text

.navbar {
position: fixed;
top: 0;
width: 100%;
}
/* Fixed to viewport, doesn't scroll */

Sticky:

text

.header {
position: sticky;
top: 0;
}
/* Relative until scroll threshold, then fixed */

11What is the difference between flexbox and grid?

Flexbox: One-dimensional layout (row OR column)

text

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

/* Use for: navbars, cards in a row, centering */

Grid: Two-dimensional layout (rows AND columns)

text

.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}

/* Use for: page layouts, photo galleries, dashboards */

FeatureFlexboxGrid

Dimensions

1D (row/column)

2D (rows + columns)

Best for

Components

Layouts

Alignment

Easy

Very flexible

12What is z-index used for?

z-index controls stacking order of positioned elements (which element appears on top).

text

.box1 {
position: relative;
z-index: 1;
}

.box2 {
position: relative;
z-index: 10; /* Appears on top */
}

.box3 {
position: relative;
z-index: 5;
}

Rules:

Only works on positioned elements (relative, absolute, fixed, sticky)
Higher z-index = on top
Default z-index = auto (0)
Can be negative

text

/* Modal example */
.modal-backdrop {
position: fixed;
z-index: 999;
}

.modal {
position: fixed;
z-index: 1000; /* Above backdrop */
}

13What is the use of float in CSS?

float was originally for wrapping text around images, now mostly replaced by Flexbox/Grid.

css

/* Float image left */
img {
float: left;
margin-right: 15px;
}

/* Text wraps around */
p { /* Normal flow */ }

/* Clear float */
.clear {
clear: both;
}

Values:

left - Float to left
right - Float to right
none - Default, no float

Clearfix:

text

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

Modern Alternative:

text

/* Use Flexbox instead */
.container {
display: flex;
align-items: flex-start;
}

14What are media queries?

Media queries apply different styles based on device characteristics (screen size, orientation, etc.).

javascript

/* Mobile first */
.container {
width: 100%;
padding: 10px;
}

/* Tablet */
@media (min-width: 768px) {
.container {
width: 750px;
padding: 20px;
}
}

/* Desktop */
@media (min-width: 1200px) {
.container {
width: 1140px;
padding: 30px;
}
}

Common Breakpoints:

javascript

/* Mobile */
@media (max-width: 767px) { }

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) { }

/* Desktop */
@media (min-width: 1024px) { }

/* Orientation */
@media (orientation: landscape) { }
@media (orientation: portrait) { }

15What is the difference between rem and em units?

em: Relative to parent element's font-size

rem: Relative to root (html) font-size

css

html { font-size: 16px; }

.parent {
font-size: 20px;
}

.child {
font-size: 2em; /* 2 × 20px = 40px */
padding: 2rem; /* 2 × 16px = 32px */
}

UnitRelative ToUse Case

Parent font-size

Component-specific

rem

Root font-size

Consistent sizing

Absolute

Borders, precise layouts

Best Practice:

css

html { font-size: 16px; }

/* Use rem for most things */
.container {
padding: 2rem; /* 32px */
margin: 1.5rem; /* 24px */
}

/* Use em for relative sizing */
.button {
padding: 0.5em 1em;
}

Questions & Answers

1What is CSS and why is it used?

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation and visual styling of HTML documents.

Purpose of CSS:

Controls the visual appearance of web pages (colors, fonts, layouts)
Separates content (HTML) from presentation (CSS)
Enables responsive design for different screen sizes
Improves website maintainability and consistency
Reduces code repetition across multiple pages

Example:

css

<!-- HTML -->
<h1 class="title">Welcome</h1>
<p class="description">This is styled text.</p>

<!-- CSS -->
<style>
.title {
color: #2c3e50;
font-size: 32px;
text-align: center;
}

.description {
color: #7f8c8d;
font-size: 16px;
line-height: 1.6;
}
</style>

2What are the different types of CSS (inline, internal, external)?

CSS can be applied in three ways:

1. Inline CSS:

text

<h1 style="color: blue; font-size: 24px;">Hello</h1>

Pros: Highest priority, quick testing

Cons: Hard to maintain, no reusability

2. Internal CSS:

css

<head>
<style>
h1 { color: navy; }
.btn { padding: 10px; }
</style>
</head>

Pros: Good for single pages

Cons: Not reusable across pages

3. External CSS:

text

<head>
<link rel="stylesheet" href="styles.css">
</head>

Pros: Reusable, maintainable, cacheable

Cons: Extra HTTP request

Priority: Inline > Internal > External

3What is the CSS box model?

The CSS Box Model describes how elements are rendered as boxes with content, padding, borders, and margins.

Components (inside to outside):

Content: Actual content (text, images)
Padding: Space between content and border
Border: Line around padding and content
Margin: Space outside border

css

.box {
width: 300px; /* Content width */
padding: 20px; /* Inside spacing */
border: 5px solid; /* Border */
margin: 10px; /* Outside spacing */
}
/* Total width = 300 + 40 + 10 + 20 = 370px */

Box-sizing:

css

/* Default */
.content-box {
box-sizing: content-box;
/* Width = content only */
}

/* Recommended */
.border-box {
box-sizing: border-box;
/* Width = content + padding + border */
}

4What is the difference between margin and padding?

Margin: Space OUTSIDE the border (transparent)

Padding: Space INSIDE the border (shows background)

css

.with-margin {
margin: 20px; /* Space outside */
background: blue; /* Doesn't extend to margin */
}

.with-padding {
padding: 20px; /* Space inside */
background: blue; /* Extends to padding */
}

5What are CSS selectors? Give examples.

CSS selectors target HTML elements for styling.

Basic Selectors:

css

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

/* Element */
p { color: blue; }
h1 { font-size: 32px; }

/* Class */
.container { width: 1200px; }
.btn { padding: 10px; }

/* ID */
#header { background: navy; }
#main { padding: 20px; }

/* Multiple classes */
.btn.primary { background: blue; }

Combinators:

css

/* Descendant */
div p { color: red; }

/* Child */
div > p { color: blue; }

/* Adjacent sibling */
h1 + p { margin-top: 0; }

/* General sibling */
h1 ~ p { color: gray; }

Attribute Selectors:

css

[type="text"] { border: 1px solid; }
[href^="https"] { color: green; }
[href$=".pdf"] { color: red; }

Pseudo-classes:

css

a:hover { color: red; }
input:focus { border: 2px solid blue; }
li:first-child { font-weight: bold; }

6What is specificity in CSS?

Specificity determines which CSS rule applies when multiple rules target the same element.

Specificity Hierarchy (low to high):

Element selectors (1)
Class selectors (10)
ID selectors (100)
Inline styles (1000)
!important (overrides all)

Calculation:

css

/* Specificity: 1 */
p { color: red; }

/* Specificity: 10 */
.text { color: blue; }

/* Specificity: 100 */
#main { color: green; }

/* Specificity: 11 (10 + 1) */
.text p { color: yellow; }

/* Specificity: 111 (100 + 10 + 1) */
#main .text p { color: purple; }

/* Specificity: 1000 */
<p style="color: orange;">Text</p>

/* Overrides everything */
p { color: black !important; }

Example:

css

<p id="text" class="highlight">Hello</p>

<style>
p { color: red; } /* 1 */
.highlight { color: blue; } /* 10 - WINS */
#text { color: green; } /* 100 - ACTUALLY WINS */
</style>

7What is the difference between class selector and id selector?

Class Selector (.class):

Can be reused on multiple elements
Lower specificity (10)
Best for styling groups

ID Selector (#id):

Must be unique per page
Higher specificity (100)
Best for JavaScript and anchors

html

<!-- HTML -->
<div id="header" class="container"></div>
<div class="container"></div>

<!-- CSS -->
/* Class - reusable */
.container {
max-width: 1200px;
margin: 0 auto;
}

/* ID - unique */
#header {
background: navy;
height: 80px;
}

FeatureClassID

Syntax

.className

#idName

Reusable

Yes

Specificity

100

Multiple per element

Yes

8What are pseudo-classes in CSS?

Pseudo-classes define special states of elements.

Link States:

css

a:link { color: blue; } /* Unvisited */
a:visited { color: purple; } /* Visited */
a:hover { color: red; } /* Mouse over */
a:active { color: green; } /* Being clicked */

Input States:

text

input:focus { border: 2px solid blue; }
input:disabled { opacity: 0.5; }
input:checked { background: green; }
input:valid { border: green; }
input:invalid { border: red; }

Structural:

css

li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }
li:nth-child(2) { color: red; }
li:nth-child(odd) { background: #f0f0f0; }
li:nth-child(even) { background: white; }
p:not(.special) { color: gray; }

Other:

text

div:empty { display: none; }
div:target { background: yellow; }

9What is display property? Explain types like block, inline, inline-block, flex.

The display property controls how elements are rendered.

Block:

text

div { display: block; }
/* - Starts on new line
- Takes full width
- Can set width/height */

Inline:

text

span { display: inline; }
/* - Stays on same line
- Width = content width
- Cannot set width/height */

Inline-block:

text

img { display: inline-block; }
/* - Stays on same line
- CAN set width/height */

Flex:

text

.container {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Modern layout system */

None:

text

.hidden { display: none; }
/* Removes element from layout */

Grid:

text

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
/* 2D layout system */

10What is position property? Explain static, relative, absolute, fixed.

Static (default):

text

div { position: static; }
/* Normal document flow */

Relative:

text

.box {
position: relative;
top: 20px;
left: 30px;
}
/* Offset from normal position */

Absolute:

text

.child {
position: absolute;
top: 0;
right: 0;
}
/* Positioned relative to nearest positioned ancestor */

Fixed:

text

.navbar {
position: fixed;
top: 0;
width: 100%;
}
/* Fixed to viewport, doesn't scroll */

Sticky:

text

.header {
position: sticky;
top: 0;
}
/* Relative until scroll threshold, then fixed */

11What is the difference between flexbox and grid?

Flexbox: One-dimensional layout (row OR column)

text

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

/* Use for: navbars, cards in a row, centering */

Grid: Two-dimensional layout (rows AND columns)

text

.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}

/* Use for: page layouts, photo galleries, dashboards */

FeatureFlexboxGrid

Dimensions

1D (row/column)

2D (rows + columns)

Best for

Components

Layouts

Alignment

Easy

Very flexible

12What is z-index used for?

z-index controls stacking order of positioned elements (which element appears on top).

text

.box1 {
position: relative;
z-index: 1;
}

.box2 {
position: relative;
z-index: 10; /* Appears on top */
}

.box3 {
position: relative;
z-index: 5;
}

Rules:

Only works on positioned elements (relative, absolute, fixed, sticky)
Higher z-index = on top
Default z-index = auto (0)
Can be negative

text

/* Modal example */
.modal-backdrop {
position: fixed;
z-index: 999;
}

.modal {
position: fixed;
z-index: 1000; /* Above backdrop */
}

13What is the use of float in CSS?

float was originally for wrapping text around images, now mostly replaced by Flexbox/Grid.

css

/* Float image left */
img {
float: left;
margin-right: 15px;
}

/* Text wraps around */
p { /* Normal flow */ }

/* Clear float */
.clear {
clear: both;
}

Values:

left - Float to left
right - Float to right
none - Default, no float

Clearfix:

text

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

Modern Alternative:

text

/* Use Flexbox instead */
.container {
display: flex;
align-items: flex-start;
}

14What are media queries?

Media queries apply different styles based on device characteristics (screen size, orientation, etc.).

javascript

/* Mobile first */
.container {
width: 100%;
padding: 10px;
}

/* Tablet */
@media (min-width: 768px) {
.container {
width: 750px;
padding: 20px;
}
}

/* Desktop */
@media (min-width: 1200px) {
.container {
width: 1140px;
padding: 30px;
}
}

Common Breakpoints:

javascript

/* Mobile */
@media (max-width: 767px) { }

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) { }

/* Desktop */
@media (min-width: 1024px) { }

/* Orientation */
@media (orientation: landscape) { }
@media (orientation: portrait) { }

15What is the difference between rem and em units?

em: Relative to parent element's font-size

rem: Relative to root (html) font-size

css

html { font-size: 16px; }

.parent {
font-size: 20px;
}

.child {
font-size: 2em; /* 2 × 20px = 40px */
padding: 2rem; /* 2 × 16px = 32px */
}

UnitRelative ToUse Case

Parent font-size

Component-specific

rem

Root font-size

Consistent sizing

Absolute

Borders, precise layouts

Best Practice:

css

html { font-size: 16px; }

/* Use rem for most things */
.container {
padding: 2rem; /* 32px */
margin: 1.5rem; /* 24px */
}

/* Use em for relative sizing */
.button {
padding: 0.5em 1em;
}

CSS Interview Questions Asked in Most Companies

Questions & Answers

Table of Contents

1What is CSS and why is it used?

2What are the different types of CSS (inline, internal, external)?

3What is the CSS box model?

4What is the difference between margin and padding?

5What are CSS selectors? Give examples.

6What is specificity in CSS?

7What is the difference between class selector and id selector?

8What are pseudo-classes in CSS?

9What is display property? Explain types like block, inline, inline-block, flex.

10What is position property? Explain static, relative, absolute, fixed.

11What is the difference between flexbox and grid?

12What is z-index used for?

13What is the use of float in CSS?

14What are media queries?

15What is the difference between rem and em units?

CSS Interview Questions Asked in Most Companies

Questions & Answers

Table of Contents

1What is CSS and why is it used?

2What are the different types of CSS (inline, internal, external)?

3What is the CSS box model?

4What is the difference between margin and padding?

5What are CSS selectors? Give examples.

6What is specificity in CSS?

7What is the difference between class selector and id selector?

8What are pseudo-classes in CSS?

9What is display property? Explain types like block, inline, inline-block, flex.

10What is position property? Explain static, relative, absolute, fixed.

11What is the difference between flexbox and grid?

12What is z-index used for?

13What is the use of float in CSS?

14What are media queries?

15What is the difference between rem and em units?