Introduction to CSS Interview Questions & Answers

Ques: What is CSS?

Ans: CSS stands for Cascading Style Sheets. It is used to style and design web pages created with HTML.

CSS controls colors, layouts, fonts, spacing, borders, and animations, giving structure and beauty to websites.

Example:

h1 {
  color: blue;
  font-size: 30px;
}

Ques: Why do we use CSS in web development?

Ans: CSS is used to separate design from structure and make websites visually appealing and easier to maintain.

Separation of concerns – Keeps HTML (structure) and CSS (design) separate.
Reusability – One stylesheet can style multiple web pages.
Consistency – Same design throughout the website.
Maintainability – Change one CSS rule to update many pages.
Responsive design – Adjusts layout for mobile, tablet, and desktop.

Ques: What is the basic syntax of CSS?

Ans: CSS follows this structure:

selector {
  property: value;
}

Ques: What are the three ways to add CSS to a webpage?

Type	Example	Use Case
Inline CSS	`<h1 style="color: red;">Title</h1>`	Quick fixes, single element
Internal CSS	`<style>p { color: green; }</style>`	Single page styling
External CSS	`<link rel="stylesheet" href="style.css">`	Best practice for large sites

Ques: What is a CSS selector?

Ans: A selector is used to target HTML elements you want to style.

Example:

h1 { color: blue; }

Ques: What are CSS comments and how are they written?

Ans: CSS comments are used to add notes or explanations in your code.

They are ignored by browsers.

/* This is a comment */

Ques: Is CSS case-sensitive?

Ans: CSS is not case-sensitive for property names or keywords.

However, class names and IDs in selectors must match exactly as written in HTML.

Example:

<p class="MyText"></p>

.MyText { color: red; } /*  Works */
.mytext { color: red; } /*  Won’t work */

Ques: How can you debug CSS errors?

Use Browser Developer Tools (F12) → “Elements” → “Styles” tab.
Check for missing semicolons or braces {}.
Use outline or border to test layout areas.
Validate your code with https://jigsaw.w3.org/css-validator/

Ques: What is meant by “Cascading” in CSS?

Ans: “Cascading” means that when multiple CSS rules apply to the same element, priority is decided by:

Inline CSS → Highest priority
Internal CSS → Medium
External CSS → Lowest

Ques: What are common CSS mistakes beginners make?

Missing closing } braces
Using wrong selectors (class vs ID)
Forgetting semicolons
Applying inline CSS instead of external
Ignoring box model while setting layout

Ques: What are advantages of External CSS?

Styles all pages with a single file
Speeds up load time due to browser caching
Easier maintenance
Keeps HTML clean and readable

CSS Selectors & Basics

Ques: What are CSS selectors?

Ans: CSS selectors are patterns used to target HTML elements for styling.

They define which elements a set of CSS rules will apply to.

Example:

p {
  color: blue;
}

Ques: What is the Element Selector in CSS?

Ans: The element selector targets HTML elements directly by their tag name.

Example:

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

Ques: What is the Class Selector in CSS?

Ans: The class selector targets elements using a period (.) followed by the class name.

Example:

<p class="info">This is a paragraph.</p>

.info {
  color: green;
  font-size: 18px;
}

Ques: What is the ID Selector in CSS?

Ans: The ID selector targets elements using a hash (#) followed by the ID name.

Example:

<p id="unique">This is unique text.</p>

#unique {
  color: purple;
}

Ques: What is the difference between Class and ID in CSS?

Feature	Class Selector	ID Selector
Symbol	`.` (dot)	`#` (hash)
Usage	Can be used multiple times	Must be unique
Specificity	Lower	Higher
Example	`.btn {}`	`#submit {}`

Ques: What is the Universal Selector in CSS?

Ans: The universal selector * targets all elements in the HTML document.

Example:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Ques: What is a Grouping Selector in CSS?

Ans: A grouping selector allows multiple selectors to share the same style rule.

Example:

h1, h2, h3 {
  color: darkblue;
  font-family: Arial;
}

Ques: Can we combine multiple selectors in CSS?

Ans: Yes, you can combine selectors to create compound selectors.

Example:

div p {
  color: gray;
}

Ques: What are common mistakes when using selectors?

Forgetting . before class or # before ID.
Using ID instead of class for repeated elements.
Writing overly specific selectors.
Not resetting universal styles, causing layout inconsistencies.

CSS Box Model & Layout Basics

Ques: What is the CSS Box Model?

Ans: The CSS Box Model represents how every HTML element is treated as a rectangular box.

It consists of four main areas:

Content – The actual text or image inside the box.
Padding – Space between content and border.
Border – The line surrounding the padding and content.
Margin – Space outside the border, separating elements.

Visualization:

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

Example:

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

Ques: How does width and height work in the box model?

Ans: By default, the width and height properties apply only to the content area (not padding, border, or margin).

Total element size =

width + padding + border + margin

Example:

div {
  width: 100px;
  padding: 20px;
  border: 5px solid;
  margin: 10px;
}
/* Total width = 100 + 20*2 + 5*2 + 10*2 = 170px */

Ques: What is the difference between margin and padding?

Property	Works Inside or Outside?	Affects Background?	Collapses?
Padding	Inside the border	Yes	No
Margin	Outside the border	No	Yes (vertical margins can collapse)

Example:

div {
  padding: 10px;
  margin: 20px;
}

Ques: What are borders in CSS?

Ans: Borders define the outline around an element’s padding and content.

Example:

p {
  border: 2px solid blue;
}

Border Properties:

border-width
border-style (solid, dotted, dashed, double)
border-color

Ques: What is the difference between border and outline?

Feature	Border	Outline
Affects Layout	Yes	No
Can have Rounded Corners	Yes	No
Included in Box Model	Yes	No
Used For	Design	Focus/Accessibility

Example:

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

Ques: What are display properties in CSS?

Ans: The display property controls how an element behaves in the layout.

Value	Description
`block`	Takes full width, starts on new line
`inline`	Takes only as much width as content
`inline-block`	Behaves like inline but allows width/height
`none`	Hides the element completely

Example:

span {
  display: inline-block;
  width: 100px;
}

Ques: What is the difference between display: none and visibility: hidden?

Property	Element Visible?	Space Reserved?
`display: none`	Hidden	No space
`visibility: hidden`	Hidden	Space kept

Example:

p.hidden1 { display: none; }
p.hidden2 { visibility: hidden; }

Ques: What is the overflow property in CSS?

Ans: overflow controls how content behaves when it doesn’t fit inside a box.

Value	Description
`visible`	Default; content spills out
`hidden`	Extra content is clipped
`scroll`	Adds scrollbars always
`auto`	Adds scrollbars when needed
`clip`	Clips content without scrollbars (CSS3)

Example:

div {
  width: 200px;
  height: 100px;
  overflow: auto;
}

Ques: What is box-sizing in CSS?

Ans: The box-sizing property defines how total width and height are calculated.

Value	Calculation	Example
`content-box` (default)	width = content only	width + padding + border = total size
`border-box`	width = content + padding + border	easier to design layouts

Example:

* {
  box-sizing: border-box;
}

Ques: What happens if you set both width and padding?

Ans: Padding increases the total width unless box-sizing: border-box is used.