CSS top 15 Interview Questions
Ace your next frontend developer interview with these 15 essential CSS questions and detailed answers covering selectors, specificity, box model, Flexbox, Grid, and more.
1. What is CSS? What does it stand for?
Answer: CSS stands for Cascading Style Sheets. It is used to style and design web pages. While HTML creates the structure, CSS makes it look good, with colors, layouts, fonts, spacing, etc.
Hint: HTML = structure, CSS = design.
2. What are the different types of CSS?
Answer: There are 3 types:
- Inline CSS: inside HTML tag
- Internal CSS: inside <style> in <head>
- External CSS: separate .css file (best practice)
Example:
<p style="color:red;">Inline CSS</p>3. What is a CSS selector?
Answer: A selector is used to target HTML elements to apply styles.
Examples:
- p: selects all paragraphs
- .className: selects class
- #idName: selects ID
4. What is the CSS box model?
Answer: Every element is a box made of:
- Content
- Padding
- Border
- Margin
Hint: It controls spacing and layout.
5. What is the difference between class and id in CSS?
- id: unique (used once): #idName
- class: reusable: .className
Hint: ID = one person, Class = group.
6. What is a display property in CSS?
Answer: It controls how elements appear. Common values:
- block: full width (div)
- inline: same line (span)
- inline-block: mix of both
- none: hides the element
7. What is the difference between block and inline elements?
- block: takes full width, starts new line
- inline: stays in the same line, takes the needed width
8. What is the position property in CSS?
Answer: Used to control element placement. Types:
- static (default)
- relative
- absolute
- fixed
- sticky
9. What is Flexbox?
Answer: Flexbox is a layout system used to align items easily in rows or columns.
Example:
.container {
display: flex;
}Hint: Best for 1D layouts.
10. What is CSS Grid?
Answer: Grid is used for 2D layouts (rows + columns).
Example:
.container {
display: grid;
}Hint: Use Grid for full page layouts.
11. What is the difference between margin and padding?
- margin: space outside the element
- padding: space inside the element
12. What is z-index in CSS?
Answer: Controls which element appears on top. Higher value = appears above.
div {
z-index: 10;
}13. What is responsive design?
Answer: Design that works on all devices (mobile, tablet, desktop). Use:
- Media queries
- Flexible layouts
14. What are media queries?
Answer: Used to apply styles based on screen size.
Example:
@media (max-width: 600px) {
body {
background: red;
}
}15. What is the difference between inline and block-level styling priority?
Answer: CSS priority order:
- Inline CSS (highest)
- Internal CSS
- External CSS (lowest)
Hint: Inline overrides everything.
Important: Always use external CSS for clean and professional projects. If you want next, I can create:
- SEO meta description for this CSS post
- SEO title + keywords
- Or JavaScript interview questions in the same style