Basic CSS Interview Questions
These foundational questions cover core CSS concepts suitable for freshers and beginners preparing for entry-level roles.
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 <link> tag, internal styles using <style> in the head, or inline using the style attribute.[1]
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. It defines how elements are sized and spaced on the page.[7]
5. What are the values of the display property?
Key values include block (stacks vertically, full width), inline (flows horizontally, content-sized), 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. Differentiate between margin and padding.
Margin creates space outside an element, while padding creates space inside between content and border.[5]
8. What is the default value of position property?
The default is static, where elements follow normal document flow.[1]
9. How does float work?
float: left or right removes elements from normal flow, wrapping content around them.[1]
10. What is the z-index property used for?
It controls the stacking order of positioned elements, with higher values appearing on top.[1]
Intermediate CSS Interview Questions
These questions target candidates with 1-3 years of experience, focusing on practical application and common scenarios.
11. What is CSS specificity and how is it calculated?
Specificity determines which rule applies when multiple conflict. It scores inline (1000), ID (100), class (10), element (1).[1]
12. Explain the difference between relative, absolute, and fixed positioning.
relative offsets from normal position; absolute from nearest positioned ancestor; fixed from viewport.[1]
13. How do you center a div horizontally and vertically?
Using Flexbox: display: flex; justify-content: center; align-items: center; on parent.[3]
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}14. What are pseudo-classes? Give examples.
Pseudo-classes style based on state, like :hover (mouse over), :first-child (first sibling).[3]
15. How can you clear floats?
Use ::after pseudo-element with content: ""; display: table; clear: both; on parent.[1]
.clearfix::after {
content: "";
display: table;
clear: both;
}16. What is the background shorthand property?
It combines background-color, background-image, background-repeat, etc., into one declaration.[4]
17. Explain media queries for responsive design.
Media queries apply styles based on screen size, e.g., @media (max-width: 600px) { ... }.[6]
18. What are CSS transitions?
Transitions smoothly change properties over time, like transition: all 0.3s ease;.[1]
19. How do you create a dropdown menu with CSS?
Use :hover on parent li to show nested ul with display: block.[1]
20. What is the purpose of overflow: hidden?
It clips content exceeding dimensions and hides scrollbars.[1]
Advanced CSS Interview Questions
These scenario-based questions suit 3-6 years experienced developers, often seen at companies like Atlassian or Adobe.
21. In a Zoho project, how would you implement custom checkboxes using CSS?
Hide input with opacity: 0, style label with ::before for box and ::after for checkmark on :checked.[1]
22. Explain CSS Grid vs Flexbox for layout in a Salesforce dashboard.
Grid handles 2D layouts (rows and columns); Flexbox is 1D (row or column).[2]
23. How to create a responsive background image that covers full viewport?
Use background: url(image.jpg) no-repeat center/cover; height: 100vh;.[1]
24. What are CSS custom properties (variables)?
Defined as --main-color: #ff0000;, used as color: var(--main-color); for theming.[1]
25. For a Paytm checkout page, how to handle vertical rhythm consistency?
Use relative units like rem or em for margins/padding based on root font-size.[2]
26. Explain keyframes for animations in an Oracle UI component.
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } then animation: spin 1s linear infinite;.[3]
27. How to style a tooltip with pure CSS?
Use data-tooltip attribute and ::after with content: attr(data-tooltip); positioned absolutely.[1]
28. In a Swiggy app redesign, how to achieve equal height columns?
Flexbox on parent: display: flex; children auto-stretch to match tallest.[3]
29. What is the cascade origin order for !important?
Inline > Internal/External > Browser default, but !important boosts priority.[3]
30. For an Atlassian tool interface, how to optimize performance-heavy styles?
Avoid excessive shadows, fonts, animations; prefer transform and opacity for GPU acceleration.[3]
Best Practices for CSS Interviews
- Use validation tools to check syntax.
- Test cross-browser compatibility with resets.
- Prioritize semantic selectors for maintainability.
