HTML CSS
Most Important CSS Interview Questions and Answers
Looking for the most important CSS interview questions? Here are the top 25 CSS interview questions and answers covering selectors, box model, Flexbox, Grid, media queries, animations, and more. Perfect for beginners and experienced developers.
1. What is CSS?
CSS (Cascading Style Sheets) is a styling language used to control the appearance of HTML elements. It defines layout, colors, fonts, spacing, responsiveness, and overall presentation of a web page.
2. What are the different types of CSS?
Inline CSS – written inside HTML tags
Internal CSS – placed inside
<style>within<head>External CSS – separate
.cssfile linked using<link>
3. What is the CSS Box Model?
The box model represents how elements are displayed. It includes:
-
Content
-
Padding
-
Border
-
Margin
It helps determine spacing and layout behavior.
4. What is the difference between class and id selectors?
-
Class: Reusable, used for multiple elements.
-
ID: Must be unique, used for a single element.
5. What is specificity in CSS?
-
Element selectors
-
Class, pseudo-class
-
ID selectors
-
Inline styles
-
!importantoverrides all
Specificity defines which rule takes priority. Order from low to high:
6. What are pseudo-classes in CSS?
Pseudo-classes define a special state of an element, e.g.:
:hover:focus:active:visited
7. What are pseudo-elements?
Pseudo-elements style specific parts of an element:
::before::after::first-letter::selection
8. What is the difference between display: none and visibility: hidden?
display: none → Element removed from layout
visibility: hidden → Element occupies space but is invisible
9. What is Flexbox?
Flexbox is a layout module designed for arranging items in one dimension (row or column). It provides easy alignment, spacing, and responsiveness.
10. What is CSS Grid?
Grid is a 2-dimensional layout system allowing precise control of rows and columns for advanced page layouts.
11. What is the difference between Flexbox and Grid?
Flexbox: One-dimensional layout
Grid: Two-dimensional layout (rows + columns)
12. What are CSS media queries?
Media queries make websites responsive by applying styles based on screen size, device type, or resolution.
@media (max-width: 768px) {
body { font-size: 16px; }
}
13. What is z-index?
z-index controls the stacking order of overlapping elements. Higher values appear above lower ones.
14. What is position in CSS?
Defines how an element is placed:
staticrelativeabsolutefixedsticky
15. What is the difference between absolute and relative positioning?
relative: Moves based on its normal position
absolute: Moves relative to the nearest positioned parent
16. What are CSS variables?
Reusable custom properties defined using --variable-name.
:root {
--main-color: #3498db;
}
17. What is the float property used for?
Originally used to wrap text around images; later used for layouts before Flexbox and Grid.
18. What is the difference between margin and padding?
Margin: Space outside the element
Padding: Space inside the element around content
19. How do CSS transitions work?
Transitions animate changes in a property smoothly over time.
button {
transition: background 0.3s ease;
}
20. What are CSS animations?
Animations allow keyframes-based movement or style changes without JavaScript.
21. What is overflow in CSS?
Controls extra content behavior:
visiblehiddenscrollauto
22. What is the calc() function used for?
Used to perform dynamic calculations:
width: calc(100% - 50px);
23. What is the difference between rem and em?
em: Relative to parent font-size
rem: Relative to root (
html) font-size
24. What is object-fit?
Controls how images or videos fill their container:
- cover
- contain
- fill
25. How do you center a div horizontally?
margin: 0 auto;
width: fit-content;