CSS Interview Questions for Freshers

Last updated: Apr 2, 2026

Author :

Jitendra Kumar

1. What is CSS and why is it used?

Definition

CSS (Cascading Style Sheets) is a stylesheet language used to control the presentation and layout of HTML documents.

Purpose

CSS is used to:

Style elements such as colors, fonts, and spacing
Control layout using techniques like Flexbox and Grid
Build responsive designs for different screen sizes
Improve user interface and user experience

Key Idea

HTML defines structure, CSS defines design, and JavaScript defines behavior.

Example


p {
  color: blue;
  font-size: 16px;
}

2. What is the latest version of CSS?

Answer

There is no single “latest version” such as CSS4.

Explanation

CSS3 was the last major version
CSS now evolves through independent modules
Examples include:
- CSS Grid
- Flexbox
- Selectors Level 4
- CSS Variables

Interview Tip

A good answer is:
“CSS3 was the last major version. Now CSS evolves as modular specifications rather than a single version.”

3. What are the different types of CSS?

Types

Inline CSS

Applied directly to an HTML element.


<p style="color:red;">Hello</p>

Advantages:

Quick to use

Disadvantages:

Not reusable
Hard to maintain

Internal CSS

Defined inside a <style> tag within the <head> section.


<style>
  p { color: green; }
</style>

Advantages:

Useful for single-page styling

Disadvantages:

Not scalable for large projects

External CSS

Stored in a separate .css file and linked to HTML.


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

Advantages:

Reusable
Maintainable
Best practice

4. How do you include CSS in HTML?

Methods

Inline


<h1 style="color: blue;">Title</h1>

Internal


<head>
  <style>
    h1 { color: red; }
  </style>
</head>

External (Recommended)


<link rel="stylesheet" href="style.css">

5. What is CSS syntax?

Structure


selector {
  property: value;
}

Breakdown

Selector targets the HTML element
Property defines what to change
Value defines how to change it

Example


h1 {
  color: red;
  font-size: 24px;
}

6. What are selectors in CSS?

Definition

Selectors are used to target HTML elements for styling.

Common Types

Element selector: p
Class selector: .className
ID selector: #idName
Universal selector: *
Attribute selector: [type="text"]

Example


p {
  color: blue;
}

7. What is a class selector?

Definition

A class selector targets elements using the class attribute.

Syntax


.className {
  property: value;
}

Example


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


.text {
  color: green;
}

Key Points

Can be reused across multiple elements
Preferred for styling

8. What is an ID selector?

Definition

An ID selector targets a unique element using the id attribute.

Syntax


#idName {
  property: value;
}

Example


<p id="title">Hello</p>


#title {
  color: red;
}

Key Points

Should be unique within a page
Has higher specificity than class selectors

9. Difference between Class and ID

Feature	Class (`.`)	ID (`#`)
Reusability	Multiple elements	Single element only
Specificity	Lower	Higher
Syntax	`.className`	`#idName`
Use Case	General styling	Unique elements

Interview Insight

Class selectors are preferred over ID selectors for styling because they are reusable and more scalable.

10. What is the universal selector?

Definition

The universal selector (*) selects all elements in the document.

Syntax


* {
  margin: 0;
  padding: 0;
}

Use Cases

CSS reset
Applying global style

11. What is the CSS Box Model?

Definition

The CSS Box Model is a layout concept that describes how elements are structured and spaced in a webpage.

Structure

Every element is represented as a rectangular box consisting of:

Content
Padding
Border
Margin

Visualization Order (inside → outside)

Content → Padding → Border → Margin

Example


div {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  margin: 20px;
}

Key Insight

The total space an element occupies is:


Total width = content + padding + border + margin

Interview Note

Understanding the box model is critical for layout, spacing, and debugging UI issues.

12. What are margin and padding?

Margin

Margin defines the space outside the element’s border, separating it from other elements.


div {
  margin: 20px;
}

Padding

Padding defines the space inside the element, between content and border.


div {
  padding: 20px;
}

Key Difference Concept

Margin controls spacing between elements
Padding controls spacing within an element

13. Difference between margin and padding

Feature	Margin	Padding
Location	Outside the border	Inside the border
Purpose	Space between elements	Space within element
Background	Transparent (no background)	Includes background
Collapsing	Margins can collapse	Padding never collapses

Interview Insight

Margin is used for layout spacing, while padding improves readability and design inside components.

14. What is border in CSS?

Definition

A border is a line surrounding the padding and content of an element.

Syntax


div {
  border: 2px solid black;
}

Components

Width
Style (solid, dashed, dotted)
Color

Example


div {
  border-width: 2px;
  border-style: solid;
  border-color: red;
}

Use Cases

Visual separation
UI component boundaries
Debugging layouts

15. What is outline?

Definition

Outline is a line drawn outside the border of an element.

Syntax


div {
  outline: 2px solid blue;
}

Key Characteristics

Does not affect layout or element size
Does not take up space
Often used for accessibility (focus indicators)

Difference from Border

Outline does not impact box model
Border affects layout dimensions

16. What is box-sizing?

Definition

The box-sizing property controls how the total width and height of an element are calculated.

Values

content-box (default)
border-box

Example


div {
  box-sizing: border-box;
}

Why It Matters

It simplifies layout calculations and prevents unexpected overflow issues.

17. Difference between content-box and border-box

content-box (Default)

Width includes only content
Padding and border are added outside


width = content only
total = width + padding + border

border-box

Width includes content + padding + border


total width = defined width

Comparison Table

Feature	content-box	border-box
Default	Yes	No
Width Calculation	Content only	Includes padding & border
Layout Handling	Complex	Easier

Interview Insight

Most modern projects use:


* {
  box-sizing: border-box;
}

18. What is the display property?

Definition

The display property defines how an element is rendered and behaves in the layout.

Common Values

block
inline
inline-block
none
flex
grid

Example


div {
  display: block;
}

Importance

It controls layout behavior and element flow.

19. Difference between block and inline elements

Block Elements

Take full width
Start on a new line
Can set width and height

Examples: div, p, h1

Inline Elements

Take only required width
Do not start on a new line
Cannot set width/height

Examples: span, a, strong

Comparison Table

Feature	Block Element	Inline Element
Width	Full width	Content width
Line Break	Yes	No
Width/Height	Allowed	Not allowed

20. What is inline-block?

Definition

inline-block is a hybrid display value combining features of both inline and block elements.

Behavior

Does not start on a new line (like inline)
Allows width and height (like block)

Example


div {
  display: inline-block;
  width: 100px;
  height: 100px;
}

Use Cases

Creating horizontal layouts
Buttons and cards alignment

Interview Insight

inline-block was widely used before Flexbox and Grid became standard.

21. How do you add colors in CSS?

Definition

Colors in CSS are used to style text, backgrounds, borders, and other visual elements.

Ways to Add Colors

Text color


p {
  color: red;
}

Background color


div {
  background-color: yellow;
}

Border color


div {
  border: 2px solid blue;
}

Key Insight

Colors can be applied to almost any visual property in CSS.

22. What are different color formats (HEX, RGB, HSL)?

HEX (Hexadecimal)

Format: #RRGGBB
Example:


color: #ff0000; /* red */

RGB (Red, Green, Blue)

Format: rgb(r, g, b)
Values range from 0–255


color: rgb(255, 0, 0);

RGBA (with transparency)


color: rgba(255, 0, 0, 0.5);

HSL (Hue, Saturation, Lightness)

Format: hsl(h, s%, l%)


color: hsl(0, 100%, 50%);

HSLA (with transparency)


color: hsla(0, 100%, 50%, 0.5);

Comparison Insight

Format	Use Case
HEX	Simple and widely used
RGB	Programmatic control
HSL	Easier color adjustments

23. What is background property?

Definition

The background property is a shorthand used to define multiple background-related properties in one line.

Properties Included

background-color
background-image
background-repeat
background-position
background-size

Example


div {
  background: url('image.jpg') no-repeat center/cover;
}

Individual Example


div {
  background-color: lightblue;
  background-image: url('bg.png');
}

Interview Insight

Using shorthand improves readability and reduces code length.

24. What are font properties?

Definition

Font properties control the appearance of text.

Common Properties

Font Family


p {
  font-family: Arial, sans-serif;
}

Font Size


p {
  font-size: 16px;
}

Font Weight


p {
  font-weight: bold;
}

Font Style


p {
  font-style: italic;
}

Font Variant


p {
  font-variant: small-caps;
}

Shorthand


p {
  font: italic bold 16px Arial;
}

25. How to align text in CSS?

Horizontal Alignment


p {
  text-align: center;
}

Values:

left
right
center
justify

Vertical Alignment


span {
  vertical-align: middle;
}

Used mainly with inline or table elements.

Modern Centering Example


div {
  display: flex;
  justify-content: center;
  align-items: center;
}

Interview Insight

Flexbox is the preferred method for modern alignment.

26. What is text-decoration?

Definition

The text-decoration property is used to add or remove decoration from text.

Common Values

underline
overline
line-through
none

Example


a {
  text-decoration: none;
}

Shorthand


p {
  text-decoration: underline dotted red;
}

Use Case

Styling links
Removing default underline

27. What is line-height?

Definition

line-height controls the vertical spacing between lines of text.

Example


p {
  line-height: 1.5;
}

Values

Unitless (recommended)
px, em, %

Importance

Improves readability and text layout.

28. What is letter-spacing?

Definition

letter-spacing controls the space between characters.

Example


p {
  letter-spacing: 2px;
}

Use Cases

Headings
Design aesthetics
Improving readability

29. What are web-safe fonts?

Definition

Web-safe fonts are fonts that are supported across all browsers and devices.

Examples

Arial
Times New Roman
Verdana
Georgia
Courier New

Example


p {
  font-family: Arial, sans-serif;
}

Interview Insight

Always include a fallback font.

30. How to import fonts?

Methods

1. Using `<link>` (Recommended)


<link href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet">


body {
  font-family: 'Roboto', sans-serif;
}

2. Using `@import`


@import url('https://fonts.googleapis.com/css2?family=Roboto');

3. Using `@font-face` (Custom Fonts)


@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2');
}


body {
  font-family: 'MyFont';
}

31. What is the position property?

Definition

The position property controls how an element is positioned in the document.

Types of Positioning

static (default)
relative
absolute
fixed
sticky

Example


div {
  position: relative;
  top: 10px;
  left: 20px;
}

Key Idea

Positioning works with offset properties: top, right, bottom, left.

Interview Insight

Understanding positioning is essential for layout control and UI design.

32. Difference between relative and absolute

Relative Positioning

Positioned relative to itself
Original space is preserved


div {
  position: relative;
  top: 10px;
}

Absolute Positioning

Positioned relative to nearest positioned ancestor
Removed from normal document flow


div {
  position: absolute;
  top: 10px;
}

Comparison Table

Feature	Relative	Absolute
Reference	Itself	Parent (positioned ancestor)
Layout space	Preserved	Removed
Use case	Small adjustments	Precise positioning

33. What is fixed positioning?

Definition

An element with position: fixed is positioned relative to the viewport.

Example


div {
  position: fixed;
  top: 0;
}

Characteristics

Stays in place during scrolling
Removed from normal flow

Use Cases

Navigation bars
Floating buttons

34. What is sticky positioning?

Definition

position: sticky toggles between relative and fixed based on scroll position.

Example


div {
  position: sticky;
  top: 0;
}

Behavior

Acts like relative initially
Becomes fixed when scroll threshold is reached

Use Cases

Sticky headers
Table headers

35. What is z-index?

Definition

z-index controls the vertical stacking order of positioned elements.

Example


div {
  position: absolute;
  z-index: 10;
}

Key Points

Higher value appears on top
Works only on positioned elements

Interview Insight

Used to manage overlapping elements (modals, dropdowns).

36. What is overflow?

Definition

The overflow property controls what happens when content exceeds container size.

Values

visible (default)
hidden
scroll
auto

Example


div {
  overflow: hidden;
}

Use Cases

Prevent layout breaking
Enable scrollbars

37. What is float?

Definition

The float property is used to position elements left or right within a container.

Example


img {
  float: left;
}

Behavior

Removes element from normal flow
Text wraps around floated elements

Use Cases

Image alignment
Old layout techniques

Interview Insight

Float is mostly replaced by Flexbox and Grid in modern CSS.

38. What is clear property?

Definition

The clear property controls behavior of elements next to floated elements.

Values

left
right
both
none

Example


div {
  clear: both;
}

Purpose

Prevents elements from wrapping around floated elements.

39. How to center a div?

Method 1: Using margin (horizontal center)


div {
  width: 200px;
  margin: 0 auto;
}

Method 2: Using Flexbox (recommended)


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

Method 3: Using Grid


.container {
  display: grid;
  place-items: center;
}

Method 4: Absolute positioning


div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Interview Insight

Flexbox and Grid are preferred in modern development.

40. How to center text vertically?

Method 1: Using line-height (single line)


p {
  height: 100px;
  line-height: 100px;
}

Method 2: Using Flexbox (recommended)


div {
  display: flex;
  align-items: center;
}

Method 3: Using Grid


div {
  display: grid;
  align-items: center;
}

Method 4: Table approach (legacy)


div {
  display: table-cell;
  vertical-align: middle;
}

41. What are pseudo-classes?

Definition

Pseudo-classes define the special state of an element.

Syntax


selector:pseudo-class {
  property: value;
}

Examples

:hover
:active
:focus
:nth-child()


a:hover {
  color: red;
}

Interview Insight

They allow styling based on user interaction or element state.

42. What are pseudo-elements?

Definition

Pseudo-elements style specific parts of an element.

Syntax


selector::pseudo-element {
  property: value;
}

Examples

::before
::after
::first-letter
::first-line


p::first-letter {
  font-size: 30px;
}

Key Difference

Pseudo-classes target states, pseudo-elements target parts.

43. What is :hover?

Definition

:hover applies styles when a user hovers over an element.

Example


button:hover {
  background-color: blue;
}

Use Cases

Buttons
Links
Interactive UI elements

44. What is :nth-child()?

Definition

:nth-child() selects elements based on their position among siblings.

Syntax


selector:nth-child(n)

Examples


li:nth-child(2) {
  color: red;
}


li:nth-child(odd) {
  background: gray;
}

Use Cases

Styling lists
Alternating rows

45. What are combinators?

Definition

Combinators define relationships between selectors.

Types

Descendant ( )
Child (>)
Adjacent sibling (+)
General sibling (~)

Example


div p {
  color: blue;
}

46. What is descendant selector?

Definition

Selects elements that are inside another element (any level).

Syntax


parent child {
  property: value;
}

Example


div p {
  color: red;
}

Key Point

Matches all nested elements, not just direct children.

47. What is child selector?

Definition

Selects elements that are direct children of a parent.

Syntax


parent > child {
  property: value;
}

Example


div > p {
  color: blue;
}

Difference

More strict than descendant selector.

48. What is attribute selector?

Definition

Selects elements based on attributes or attribute values.

Examples


input[type="text"] {
  border: 1px solid black;
}


a[target="_blank"] {
  color: red;
}

Use Cases

Forms
Links
Dynamic styling

49. What is specificity?

Definition

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

Priority Order

Inline styles
ID selectors
Class, attribute, pseudo-class
Element selectors

Example


#id { color: red; }   /* higher priority */
.class { color: blue; }

Interview Insight

Higher specificity overrides lower specificity.

50. What is !important?

Definition

!important overrides all other CSS rules.

Example


p {
  color: red !important;
}

Caution

Breaks CSS hierarchy
Hard to maintain

Interview Insight

Avoid using !important unless absolutely necessary.

51. What is CSS inheritance?

Definition

Inheritance allows child elements to inherit styles from parent elements.

Example


body {
  color: blue;
}

All text inside inherits the color.

Interview Insight

Not all properties are inherited.

52. What properties are inherited?

Common Inherited Properties

color
font-family
font-size
line-height
text-align

Non-Inherited Properties

margin
padding
border
width

Tip

You can force inheritance using:


color: inherit;

53. What is comment syntax in CSS?

Syntax


/* This is a comment */

Example


/* Main heading style */
h1 {
  color: red;
}

Use Case

Documentation
Debugging

54. Is CSS case-sensitive?

Answer

CSS is generally case-insensitive
Exception:
- Class names
- IDs
- File paths (on some systems)

Example


.CLASS { color: red; }
.class { color: blue; }

These can behave differently in HTML.

55. What is responsive design?

Definition

Responsive design ensures a website adapts to different screen sizes and devices.

Techniques

Flexible layouts
Media queries
Fluid images

Example


img {
  max-width: 100%;
}

Interview Insight

Essential for mobile-first development.

56. What are media queries?

Definition

Media queries apply CSS based on device characteristics like screen width.

Syntax


@media (max-width: 768px) {
  body {
    background: lightgray;
  }
}

Use Cases

Mobile responsiveness
Tablet layouts

57. What is viewport?

Definition

Viewport is the visible area of a web page on a device.

Meta Tag


<meta name="viewport" content="width=device-width, initial-scale=1.0">

Importance

Ensures proper scaling on mobile devices.

58. What is rem vs em?

em

Relative to parent element


font-size: 2em;

rem

Relative to root (html) element


font-size: 2rem;

Comparison

Feature	em	rem
Base	Parent	Root (`html`)
Scaling	Can compound	Consistent

Interview Insight

Use rem for consistent scaling.

59. What is opacity?

Definition

Controls transparency of an element.

Values

0 (fully transparent)
1 (fully visible)

Example


div {
  opacity: 0.5;
}

Note

Affects entire element including children.

60. What is visibility property?

Definition

Controls whether an element is visible or hidden.

Values

visible
hidden

Example


div {
  visibility: hidden;
}

Difference from display

Property	Behavior
visibility	Hides but keeps space
display:none	Removes element completely