CSS Interview Questions Asked in Most Companies

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

Purpose of CSS:

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

Example:

CSS can be applied in three ways:

1. Inline CSS:

Pros: Highest priority, quick testing

Cons: Hard to maintain, no reusability

2. Internal CSS:

Pros: Good for single pages

Cons: Not reusable across pages

3. External CSS:

Pros: Reusable, maintainable, cacheable

Cons: Extra HTTP request

Priority: Inline > Internal > External

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

Components (inside to outside):

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

Box-sizing:

Margin: Space OUTSIDE the border (transparent)

Padding: Space INSIDE the border (shows background)

Key Differences:

FeatureMarginPadding

Location

Outside border

Inside border

Background

Transparent

Shows background

Clickable

No

Yes

Negative values

Yes

No

Collapse

Yes (vertical)

No

CSS selectors target HTML elements for styling.

Basic Selectors:

Combinators:

Attribute Selectors:

Pseudo-classes:

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

Specificity Hierarchy (low to high):

1. Element selectors (1)
2. Class selectors (10)
3. ID selectors (100)
4. Inline styles (1000)
5. !important (overrides all)

Calculation:

Example:

Class Selector (.class):

1. Can be reused on multiple elements
2. Lower specificity (10)
3. Best for styling groups

ID Selector (#id):

1. Must be unique per page
2. Higher specificity (100)
3. Best for JavaScript and anchors

FeatureClassID

Syntax

.className

#idName

Reusable

Yes

No

Specificity

10

100

Multiple per element

Yes

No

Pseudo-classes define special states of elements.

Link States:

Input States:

Structural:

Other:

The display property controls how elements are rendered.

Block:

Inline:

Inline-block:

Flex:

None:

Grid:

Static (default):

Relative:

Absolute:

Fixed:

Sticky:

Flexbox: One-dimensional layout (row OR column)

Grid: Two-dimensional layout (rows AND columns)

FeatureFlexboxGrid

Dimensions

1D (row/column)

2D (rows + columns)

Best for

Components

Layouts

Alignment

Easy

Very flexible

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

Rules:

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

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

Values:

1. left - Float to left
2. right - Float to right
3. none - Default, no float

Clearfix:

Modern Alternative:

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

Common Breakpoints:

em: Relative to parent element's font-size

rem: Relative to root (html) font-size

UnitRelative ToUse Case

em

Parent font-size

Component-specific

rem

Root font-size

Consistent sizing

px

Absolute

Borders, precise layouts

Best Practice: