CSS (Cascading Style Sheets) is a crucial part of modern web development. Here are some of the most frequently asked CSS interview questions for beginners and experienced developers.
1. Basic CSS Questions
Q1: What is CSS, and why is it used?
Answer: CSS (Cascading Style Sheets) is used to style HTML elements, control layout, and improve the appearance of web pages.
Q2: What are the different types of CSS?
- Inline CSS: Applied directly within an HTML element.
- Internal CSS: Written inside a <style> tag in the <head> section.
- External CSS: Stored in a separate .css file and linked to the HTML.
2. CSS Selectors & Specificity
Q3: What are different types of CSS selectors?
Answer: Some common CSS selectors are:
- Element Selector: Targets specific elements (e.g.,
p { color: blue; }) - Class Selector: Targets elements with a specific class (e.g.,
.btn { background: red; }) - ID Selector: Targets a unique ID (e.g.,
#header { font-size: 20px; }) - Attribute Selector: Selects elements based on attributes (e.g.,
input[type="text"] { border: 1px solid black; })
Q4: What is specificity in CSS?
Answer: Specificity determines which CSS rule is applied when multiple rules match an element. It follows this order:
- Inline styles (highest specificity)
- ID selectors
- Class, attribute, and pseudo-class selectors
- Element and pseudo-element selectors
3. CSS Layouts & Positioning
Q5: What are the different position values in CSS?
Answer: CSS position values include:
- static (default positioning)
- relative (relative to its normal position)
- absolute (relative to nearest positioned ancestor)
- fixed (relative to viewport)
- sticky (switches between relative and fixed based on scroll position)
Q6: Explain Flexbox and Grid in CSS.
Answer: Both Flexbox and CSS Grid are modern layout models:
- Flexbox: Best for one-dimensional layouts (rows or columns).
- Grid: Best for two-dimensional layouts (both rows and columns).
Example of Flexbox:
.container {
display: flex;
justify-content: space-between;
}
Example of Grid:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
4. CSS Performance Optimization
Q7: How can you optimize CSS for better performance?
Answer: Some optimization techniques include:
- Minify CSS files to reduce size.
- Use CSS sprites to combine multiple images into one.
- Remove unused CSS (tools like PurgeCSS can help).
- Use shorthand properties (e.g.,
margin: 10px 20px;instead of multiple lines).
5. Advanced CSS Concepts
Q8: What is a CSS pseudo-class?
Answer: A pseudo-class applies styles based on an element’s state.
button:hover {
background-color: blue;
}
Q9: What is a CSS pseudo-element?
Answer: A pseudo-element styles part of an element.
p::first-letter {
font-size: 24px;
font-weight: bold;
}
Q10: What is the difference between em, rem, and px?
Answer:
- px: Fixed unit (absolute size).
- em: Relative to the parent element’s font size.
- rem: Relative to the root element’s font size.
6. Responsive Design
Q11: What are media queries in CSS?
Answer: Media queries make a website responsive based on device width.
@media (max-width: 768px) {
body {
background: lightgray;
}
}
Q12: What is the difference between min-width and max-width?
- min-width: Styles apply above a certain width.
- max-width: Styles apply below a certain width.
7. Miscellaneous CSS Questions
Q13: What is the difference between relative, absolute, and fixed positioning?
- relative: Positioned relative to its normal position.
- absolute: Positioned relative to the nearest positioned ancestor.
- fixed: Positioned relative to the viewport and doesn’t scroll.
Q14: What is z-index in CSS?
Answer: The z-index property controls the stacking order of elements. Higher values appear on top.
Q15: What is CSS Clipping?
Answer: Clipping restricts the visible area of an element.
.clip {
clip-path: circle(50%);
}
Conclusion
These CSS interview questions cover essential concepts from basic to advanced levels. Master these topics to confidently ace any CSS-related interview.