HTML & CSS
/Intermediate
CSS Interview Questions
Definition
Questions designed to expose candidates who rely too heavily on Tailwind or Bootstrap and don't understand how CSS actually works under the hood.
Explain Like I'm New
Expect trick questions about Specificity, the Box Model, and Centering.
Real World Example
The classic: 'How do you vertically and horizontally center a div?'
Common Use Cases
- •Front-End Developer Interviews
Terminal Output
bash / terminal
/*
Q: What is Specificity in CSS, and how is it calculated?
A: Specificity is the algorithm the browser uses to decide which CSS rule wins
when there are conflicting styles.
The Point System:
- Element Selectors (h1, p, div): 1 Point
- Class Selectors (.btn, .card): 10 Points
- ID Selectors (#header): 100 Points
- Inline Styles (style="color: red;"): 1000 Points
- !important: Overrides everything.
Example:
#main .title { color: blue; } (Score: 100 + 10 = 110)
.container .title { color: red; } (Score: 10 + 10 = 20)
The blue rule wins because 110 beats 20.
*/
Interview Questions
basic
- What is the CSS Box Model?
intermediate
- What is the difference between `display: none` and `visibility: hidden`?