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?

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:

1. Inline CSS → Highest priority
2. Internal CSS → Medium
3. 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?

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:

1. Content – The actual text or image inside the box.
2. Padding – Space between content and border.
3. Border – The line surrounding the padding and content.
4. 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?

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?

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.

Example:

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

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

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.

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.

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.