Prepare for Your CSS Interview with Basic, Intermediate, and Advanced Questions
This comprehensive guide features 30 CSS interview questions progressing from basic to advanced levels. Ideal for freshers, candidates with 1-3 years of experience, and professionals with 3-6 years in CSS styling. Each question includes clear explanations and code examples to strengthen your understanding.
Basic CSS Interview Questions
1. What does CSS stand for, and what is its primary purpose?
CSS stands for Cascading Style Sheets. Its primary purpose is to control the presentation and layout of HTML elements, separating content from styling for better maintainability.[2][5]
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> tags in the head, or inline styles using the style attribute on elements.[2][3]
3. What is the difference between class and ID selectors in CSS?
Class selectors (.classname) target multiple elements sharing the same class, while ID selectors (#idname) target a single unique element. IDs have higher specificity.[2][5]
4. Explain the box model in CSS.
The box model consists of content, padding, border, and margin. Every HTML element is a rectangular box with these layers, affecting layout and spacing.[1][7]
5. What are the differences between display: inline, inline-block, and block?
Inline elements do not start on new lines and ignore width/height. Inline-block respects width/height but flows inline. Block starts on new lines and takes full width.[4][6]
6. How do you center text horizontally in CSS?
Use text-align: center on the parent element for inline or inline-block children.
p {
text-align: center;
}[5]
7. What is the default value of the position property in CSS?
The default value is static, meaning elements follow normal document flow without positioning offsets.[5]
8. Define padding, margin, and border in CSS.
Padding is space inside the border, margin is space outside, and border surrounds the padding and content.[1][7]
9. What does the !important declaration do?
It overrides other conflicting styles with higher specificity, but should be used sparingly to avoid maintenance issues.[2]
10. How do you make an element invisible without removing it from the layout?
Use visibility: hidden. The element occupies space but is not visible. display: none removes it entirely.[3]
Intermediate CSS Interview Questions
11. Explain CSS specificity and how it is calculated.
Specificity determines style precedence: inline styles (1,0,0,0), IDs (0,1,0,0), classes/attributes (0,0,1,0), elements (0,0,0,1). Higher values win.[1][5]
12. What are CSS pseudo-classes? Give examples.
Pseudo-classes target element states like :hover for mouse over, :first-child for first child, or :nth-child(2) for second child.[2]
13. How do you create a responsive design using CSS?
Use media queries, flexible units like percentages or em/rem, and techniques like max-width for images.[1][5]
14. What are CSS media queries, and provide a syntax example?
Media queries apply styles based on device characteristics like screen width.
@media (max-width: 600px) {
body { font-size: 14px; }
}[1][4]
15. Explain the difference between relative and absolute positioning.
Relative positions from its normal place. Absolute positions relative to the nearest positioned ancestor, removing it from flow.[5]
16. At Atlassian, how would you center a div both horizontally and vertically?
Use Flexbox on the parent: display: flex; justify-content: center; align-items: center;.
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}[5]
17. What is the z-index property used for?
It controls stacking order of positioned elements. Higher values appear on top.[3]
18. Describe the background shorthand property components.
It includes background-color, background-image, background-repeat, background-attachment, and background-position.[7]
19. How do you clear floats in CSS?
Use overflow: hidden on the parent or a clearfix with ::after { content: ""; display: table; clear: both; }.[2]
20. What are CSS custom properties (variables)?
They allow reusable values like --main-color: #blue;, used as color: var(--main-color);.[4]
Advanced CSS Interview Questions
21. In a Zoho project, explain CSS Grid vs. Flexbox.
CSS Grid is two-dimensional for layouts with rows and columns. Flexbox is one-dimensional for aligning items in a single direction.[3]
22. How do you implement a CSS custom checkbox?
Hide the default input with opacity: 0, style a label ::before pseudo-element, and use :checked for state changes.[2]
23. What are CSS pseudo-elements? Provide use cases.
They style parts like ::before and ::after for decorative content, or ::selection for selected text.[2]
24. Explain CSS animations vs. transitions.
Transitions animate between two states on property change. Animations use @keyframes for complex multi-step animations.[7]
25. For a Paytm feature, how would you create a sticky header?
Use position: sticky; top: 0; to keep it fixed during scroll within its container.
header {
position: sticky;
top: 0;
}[5]
26. What is the CSS containment model?
contain: layout, paint, or style optimizes rendering by isolating subtree changes.[4]
27. How do you handle cross-browser compatibility in CSS?
Use resets, vendor prefixes like -webkit-, validate code, and test on real devices.[3]
28. In an Adobe scenario, describe aspect-ratio property.
aspect-ratio: 16/9; maintains element proportions automatically.[5]
29. What are logical properties in CSS?
Properties like margin-inline-start adapt to writing direction, replacing physical ones like margin-left for internationalization.[2]
30. Explain CSS subgrid and its use.
grid-template-columns: subgrid; allows nested grids to inherit tracks from the parent grid for aligned layouts.[3]
