All questions
of 104Explain the CSS cascade and specificity
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
The CSS cascade determines which styles apply when multiple rules target the same element. Specificity is calculated as:
- Inline styles (1000 points)
- IDs (100 points each)
- Classes, attributes, pseudo-classes (10 points each)
- Elements and pseudo-elements (1 point each)
When specificity is equal, the last rule in source order wins. !important overrides specificity but should be used sparingly.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
What is the difference between `display: none` and `visibility: hidden`?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
display: none: Completely removes the element from the document flow. The element takes up no space and doesn't affect layout.visibility: hidden: Hides the element but preserves its space in the layout. The element remains in the document flow but is invisible.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
Explain the difference between `margin` and `padding`
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
- Margin: Space outside the element's border, creating distance between elements. Margins can collapse vertically.
- Padding: Space inside the element's border, between the border and content. Padding increases the element's total size.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
Explain the different types of CSS selectors
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
- Element Selector:
div- targets all div elements - Class Selector:
.classname- targets elements with specific class - ID Selector:
#idname- targets element with specific ID - Attribute Selector:
[type="text"]- targets elements with specific attributes - Pseudo-class:
:hover- targets elements in specific states - Pseudo-element:
::before- targets specific parts of elements - Descendant:
div p- targets p elements inside div - Child:
div > p- targets direct p children of div - Adjacent Sibling:
h2 + p- targets p immediately after h2 - General Sibling:
h2 ~ p- targets all p siblings after h2
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
How does the universal selector (*) work and when should you use it?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
The universal selector * matches all elements. Common uses:
/* Reset all margins and padding */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Target all children */
.container * {
font-family: Arial, sans-serif;
}
Use sparingly as it can impact performance and may override more specific styles unintentionally.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
Explain the CSS box model
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
The box model describes how elements are structured:
- Content: The actual content (text, images)
- Padding: Space between content and border
- Border: Line around the padding
- Margin: Space outside the border
Total width = margin + border + padding + content + padding + border + margin
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
What are the different values for the `overflow` property?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
visible(default): Content extends beyond containerhidden: Clips overflowing contentscroll: Always shows scrollbarsauto: Shows scrollbars only when neededclip: Similar to hidden but more performant for animations
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
How do you center an element both horizontally and vertically?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
Multiple methods:
Flexbox (recommended):
.container {
display: flex;
justify-content: center;
align-items: center;
}
Grid:
.container {
display: grid;
place-items: center;
}
Absolute positioning:
.element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
What are the different positioning values and how do they work?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
static(default): Normal document flowrelative: Positioned relative to normal position, maintains spaceabsolute: Positioned relative to nearest positioned ancestor, removed from flowfixed: Positioned relative to viewport, removed from flowsticky: Switches between relative and fixed based on scroll position
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
What are media queries and how do you use them?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
Media queries apply styles based on device characteristics:
/* Mobile first approach */
.container {
width: 100%;
}
/* Tablet */
@media (min-width: 768px) {
.container {
width: 750px;
}
}
/* Desktop */
@media (min-width: 1024px) {
.container {
width: 1000px;
}
}
Common features: width, height, orientation, resolution.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
What is the difference between `min-width` and `max-width` in media queries?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
min-width: Styles apply when viewport is equal to or larger than specified width (mobile-first)max-width: Styles apply when viewport is equal to or smaller than specified width (desktop-first)
/* Mobile first */
@media (min-width: 768px) { /* Tablet and up */ }
/* Desktop first */
@media (max-width: 767px) { /* Mobile only */ }
Mobile-first is generally preferred for performance.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
Explain the viewport meta tag and its importance
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
The viewport meta tag controls how mobile browsers render pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width: Uses device's actual widthinitial-scale=1.0: No initial zoomuser-scalable=no: Prevents zooming (avoid unless necessary)
Without this tag, mobile browsers use desktop viewport width (usually 980px).
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
How do you make images responsive?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
Basic responsive image:
img {
max-width: 100%;
height: auto;
}
Advanced with srcset:
<img src="image-400.jpg"
srcset="image-400.jpg 400w,
image-800.jpg 800w,
image-1200.jpg 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 1000px) 800px,
1200px"
alt="Description">
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
What are vendor prefixes and are they still necessary?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
Vendor prefixes indicate experimental CSS features:
-webkit-: Chrome, Safari, newer Edge-moz-: Firefox-ms-: Internet Explorer, old Edge-o-: Opera (old)
.element {
-webkit-transform: rotate(45deg); /* Safari/Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-ms-transform: rotate(45deg); /* IE */
transform: rotate(45deg); /* Standard */
}
Modern CSS features need fewer prefixes. Use tools like Autoprefixer to add prefixes automatically.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
How do you use CSS `@import` and what are its limitations?
Answer it yourself first - out loud, or typed below.
How should your speech become text?
Listening… your words appear above as you speak - tap Stop when you're done.
Recording · cr - tap Stop & transcribe when you're done.
Transcribing with AI…
Voice:
Last attempt -
@import loads external stylesheets:
/* Must be at top of stylesheet */
@import url("base.css");
@import url("components.css") screen and (min-width: 768px);
@import "utilities.css" layer(utilities);
/* Regular styles after imports */
.custom {
color: red;
}
Limitations:
- Blocks rendering until imported CSS loads
- Can't be used conditionally
- Must appear before other CSS rules
- Better to use
<link>tags for performance
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
The model's verdict: “”
The interactive diagram is below the answer - jump to diagram ↓
This answer is explained by a shared concept diagram - open →
How do you style placeholder text?
What are screen reader-only CSS classes?
What are CSS custom properties (CSS variables) and how do you use them?
What is the difference between `:nth-child()` and `:nth-of-type()`?
Explain attribute selectors and their variations
What are pseudo-elements and how do they differ from pseudo-classes?
What is `box-sizing` and what are its values?
How do margins collapse and how can you prevent it?
Explain `min-width`, `max-width`, and how they interact with `width`
What is Flexbox and what problems does it solve?
Explain the main axis and cross axis in Flexbox
What are the flex properties (`flex-grow`, `flex-shrink`, `flex-basis`)?
What is CSS Grid and how does it differ from Flexbox?
Explain `grid-template-areas` and how to use it
What is the difference between `fr` unit and percentage in CSS Grid?
Explain the `z-index` property and stacking context
What are CSS units and when should you use each?
What is the `clamp()` function and how is it useful for responsive design?
What is the difference between CSS transitions and animations?
Explain the CSS transition properties
What are CSS keyframes and how do you use them?
Explain the animation properties in CSS
What are CSS transforms and what types are available?
What is the `transform-origin` property?
How do you create a CSS-only flip card effect?
What are CSS gradients and how do you create them?
Explain CSS filters and their effects
What are CSS counters and how do you implement them?
Explain the `object-fit` and `object-position` properties
How do you reduce CSS bundle size?
How do you handle browser compatibility issues in CSS?
How do you use `@supports` for feature detection?
What is graceful degradation vs progressive enhancement?
How do you test CSS across different browsers?
What is BEM methodology and how do you implement it?
What are CSS modules and how do they work?
Explain the OOCSS (Object-Oriented CSS) methodology
What is the difference between CSS-in-JS and traditional CSS?
What is Atomic CSS and when would you use it?
What are CSS logical properties and why are they useful?
How do CSS nesting rules work?
What are CSS environment variables and how do you use them?
How do CSS math functions work?
What is `color-scheme` and how does it work with dark mode?
How do you create a sticky footer that stays at bottom?
How do you create equal-height columns?
How do you create responsive typography?
How do you implement a CSS-only accordion?
How do you create a CSS tooltip?
How do you style form inputs consistently across browsers?
How do you create custom radio buttons and checkboxes?
How do you implement form validation styling with CSS?
How do you create CSS for print media?
What are CSS page break properties?
How does CSS support accessibility?
How do you debug CSS layout issues?
What CSS linting rules should you follow?
How do CSS scroll-snap properties work?
What is the CSS `light-dark()` function?
What is the `will-change` property and when should you use it?
How do you create smooth 60fps animations?
Explain 3D transforms and the `perspective` property
What is the `clip-path` property and how do you use it?
How do CSS masks work?
What is the `isolation` property and when would you use it?
How can you optimize CSS for better performance?
What is Critical CSS and how do you implement it?
How do CSS containment and the `contain` property work?
What are the performance implications of different CSS properties?
How do you organize CSS in large projects?
What is CSS Container Queries and how do they work?
Explain CSS cascade layers (`@layer`)
What are CSS anchored positioning and how do they work?
What is the `:has()` selector and how is it useful?
What are CSS color functions and color spaces?
How do CSS scroll-driven animations work?
What is the CSS `@scope` rule?
How do you implement a masonry layout with CSS?
How do you optimize CSS for production?
How do you implement CSS custom media queries?
What is the CSS Paint API and how does it work?
How do you implement CSS architecture for design systems?
How do you handle CSS specificity conflicts in large applications?
How do you implement responsive images with CSS?
How do you optimize CSS for Core Web Vitals?
What is CSS Subgrid and how does it work?
What are CSS custom highlights and how do you use them?
How do CSS trigonometric functions work?
What are the latest CSS features and how do you stay updated?
This answer is part of Pro.
The full written answer, with the trade-offs and follow-ups an interviewer will probe.
No matches
Try a different filter or search term.
CSS3 cheatsheet
CSS3 Technical Interview Cheat Sheet
- Summary01
- CSS Basics02
- Selectors03
- Box Model04
- Positioning05
- Flexbox06
- Grid07
- Responsive Design08
- Animations & Transitions09
- Transforms10
- Pseudo-classes & Pseudo-elements11
- CSS Variables12
- + 5 more inside
89 of 104 CSS3 answers are gated.
Full answers, code samples, AI explanations - simpler, deeper, or as an interactive diagram. Cancel anytime.
- Full answers + code
- AI explain - simpler, deeper, or visualized
- 1,000 AI credits / month
- Cancel anytime
Change topic
Pick a different technology or stack. Your current topic stays put until you choose a new one.
MEAN
MongoDB, Express, Angular, Node.jsMERN
MongoDB, Express, React, Node.jsLAMP
Linux, Apache, MySQL, PHPRuby on Rails
Convention over ConfigurationJAM
JavaScript, APIs, and MarkupServerless on AWS
Serverless Architecture on AWSInterviewers also test these - they're common to every stack, whichever one you picked above.
Flutter Mobile
Flutter Cross-Platform Mobile DevelopmentInterviewers also test these - they're common to every stack, whichever one you picked above.
Spring Boot
Enterprise Java Development.NET
Microsoft EcosystemVue
Vue.js, Vite, TypeScript, Tailwind, Node.jsGo Backend
Golang, gRPC, PostgreSQL, Redis, RabbitMQFastAPI
Python, FastAPI, SQLAlchemy, PostgreSQLReact Native
React, TypeScript, Redux, FirebaseiOS Native
Swift, SwiftUI, UIKit, FirebaseAndroid Native
Java, Jetpack Compose, FirebaseWeb3 / Ethereum
Solidity, Ethereum, Hardhat, FoundryDevOps / Platform
Docker, Kubernetes, Terraform, CI/CDCore SWE Interview Prep
Data structures, algorithms, OS, concurrency, networking, gitInterviewers also test these - they're common to every stack, whichever one you picked above.
Interviewers also test these - they're common to every stack, whichever one you picked above.