Basic CSS Interview Questions
These foundational questions are ideal for freshers and beginners preparing for CSS roles at companies like Zoho or Atlassian.
1. What does CSS stand for and what is its primary use?
CSS stands for Cascading Style Sheets. Its primary use is to control the presentation and layout of HTML documents, separating content from design.[1]
2. How do you include CSS in an HTML document?
CSS can be included via external stylesheets using the <link> tag, internal styles with <style> in the head, or inline styles using the style attribute.[1][2]
3. What is the difference between class and ID selectors?
Class selectors (.classname) target multiple elements sharing the same class, while ID selectors (#idname) target a single unique element.[1]
4. Explain the CSS box model.
The box model consists of content, padding, border, and margin. Every HTML element is a rectangular box with these layers.[7]
5. What are the values of the display property?
Key values include block (stacks vertically, full width), inline (flows horizontally, content-sized), inline-block (inline flow with block sizing), and none (hides element).[3]
6. What does box-sizing: border-box do?
It makes width and height include content, padding, and border, simplifying sizing calculations.[3]
7. What is the difference between block, inline, and inline-block?
Block elements start on new lines and take full width; inline elements stay in flow and ignore width/height; inline-block combines inline flow with block sizing.[5]
8. How do you center an element horizontally?
Use margin: 0 auto on a block element with defined width.[1]
9. What is the default value of position?
The default is static, where elements follow normal document flow.[1]
10. Explain the z-index property.
z-index controls stacking order of positioned elements; higher values appear on top.[1]
Intermediate CSS Interview Questions
These questions suit candidates with 1-3 years of experience, relevant for roles at Paytm or Salesforce.
11. What is CSS specificity?
Specificity determines which styles apply when rules conflict; calculated from IDs, classes, and elements (e.g., ID > class > tag).[1][3]
12. How does the cascade work in CSS?
CSS rules cascade based on specificity, importance (!important), and source order; later rules override earlier if equally specific.[3]
13. What are pseudo-classes? Give examples.
Pseudo-classes style elements based on state like :hover (mouse over), :first-child, or :nth-child().[3]
14. What is the difference between relative and absolute positioning?
relative positions from normal flow; absolute positions relative to nearest positioned ancestor, removing from flow.[1]
15. How do you create a responsive design with CSS?
Use media queries to apply styles based on screen size, flexible units like percentages or em, and viewport meta tag.[2][6]
@media (max-width: 600px) {
body { font-size: 14px; }
}16. What are CSS custom properties (variables)?
Custom properties like --main-color: #0066cc; store reusable values, accessed via var(--main-color).[1]
17. Explain flexbox layout.
Flexbox (display: flex) enables one-dimensional layouts with properties like justify-content and align-items for alignment.[2][3]
18. What is the background shorthand property?
It combines background-color, background-image, background-repeat, background-position, etc.[4]
19. How do you clear floats?
Use overflow: hidden on parent or ::after pseudo-element with clear: both.[1]
.clearfix::after {
content: "";
display: table;
clear: both;
}20. What are media queries?
Media queries apply styles conditionally based on device characteristics like width or orientation.[6]
Advanced CSS Interview Questions
These challenge candidates with 3-6 years experience, perfect for positions at Adobe or Oracle.
21. Explain CSS Grid layout.
CSS Grid (display: grid) creates two-dimensional layouts with rows and columns using grid-template-areas and grid-gap.[2]
22. What are CSS animations and keyframes?
Animations use @keyframes to define stages, applied via animation property for smooth transitions.[3]
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}23. How does transform differ from transition?
transform changes element shape/position instantly; transition animates property changes over time.[4]
24. What is the containment property?
contain: layout, paint, or style optimizes rendering by isolating an element’s subtree.[1]
25. Explain logical properties like margin-inline-start.
Logical properties adapt to writing direction (LTR/RTL), unlike physical ones like margin-left.[1]
26. What are subgrid and how do they work?
grid-template-rows: subgrid aligns nested grids to parent tracks for complex layouts.[1]
27. How do you optimize CSS for performance?
Minimize reflows/repaints, avoid heavy properties like shadows in loops, use will-change, and limit font loads.[3]
28. What is cascade layers?
@layer groups rules by priority, improving control over third-party CSS overrides.[1]
29. Explain aspect-ratio property.
aspect-ratio: 16/9 maintains element proportions automatically.[1]
30. How do you style custom checkboxes with CSS?
Hide native input, style adjacent label::before with content and appearance: none.[1]
input[type="checkbox"] + label::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background: white;
}