Viva Questions

20 short CSS viva Q&A.

Common CSS Viva Questions and Answers

What is CSS? Cascading Style Sheets — used to style HTML pages.
Latest version? CSS3 (modular — Selectors, Color, Flexbox, Grid, etc. each are sub-specs).
What does cascading mean? Multiple stylesheets / rules cascade together; cascade rules + specificity decide which wins.
Three ways to apply CSS? Inline, internal (<style>), external (<link>).
Box model components? Content, padding, border, margin.
Difference: padding vs margin? Padding is space INSIDE the border; margin is space OUTSIDE the border.
What is specificity? Weight that determines which CSS rule applies — Inline (1000) > ID (100) > class/attr/pseudo-class (10) > element (1).
relative vs absolute vs fixed? Relative — relative to its normal position. Absolute — positioned relative to nearest positioned ancestor. Fixed — relative to viewport.
display: none vs visibility: hidden? none removes from layout; hidden keeps space but invisible.
What's a pseudo-class? Example? Style based on state — :hover, :focus, :nth-child(2).
Pseudo-element? Example? Style a part of an element — ::before, ::after, ::first-line.
What's z-index? Stacking order — higher value sits on top (only works on positioned elements).
Flexbox vs Grid? Flexbox is 1D (row OR column); Grid is 2D (rows AND columns).
What's a media query? @media (max-width: 768px) { ... } — applies styles only at certain viewports.
What is em vs rem? em is relative to parent's font size; rem is relative to root (<html>) font size.
Inline vs block vs inline-block? Inline: flows in text, no width/height. Block: full width, new line. Inline-block: inline placement + accepts width/height.
What does box-sizing: border-box do? Makes width/height include padding + border (more predictable layouts).
What is !important? Forces a rule to override normal specificity. Avoid unless absolutely needed.
What's a CSS variable? --name: value; declared in any selector; used as var(--name).
Three types of CSS units? Absolute (px, cm), relative (em, rem, %, vw, vh), color (#hex, rgb(), hsl()).

AI-powered recap

Quick recap quiz?

We'll generate 5 MCQs from this lesson and check your understanding instantly. Takes ~30 seconds.

Ready to move on?

// example library

Want more hands-on snippets in CSS3?

Browse 1 runnable example · across 1 chapter · short, copy-paste-friendly · grouped by topic

Explore examples

// side-by-side reference

See this in other languages

Compare the same concept across C, C++, Java, and Python — one table, zero tab-switching.

Compare Languages

// feedback.matters()

Did this lesson help you?

Back to course