CSS flashcards

The look and layout of every web page: the cascade, modern layout, responsive components and smooth motion.

Beginner friendly, starts from zero

CardsCheatsheetTips and tricks

CSSStart from zero · 1 of 12

What is CSS, in one plain sentence?

Think of the answer, then tap

CSS is the language that tells a browser, the app that shows web pages, how a page should look: colours, sizes, spacing and where each thing sits.

HTML says what it is; CSS says how it looks.

Show again

12 left

Got it

Drag the card: right if you know it, left to see it again, up to skip · Space turn over · K got it · J again · ← back

Tap to turn over. Swipe right if you know it, left to see it again.

All topics

What you will learn

Start from zero
- What CSS is and why it exists4 cards
- Rules and key words6 cards
- First page and goals2 cards
Core basics
- Adding CSS to a page4 cards
- Selectors3 cards
- The box model3 cards
- Colour, units, fonts and backgrounds5 cards
- Cascade, specificity and inheritance3 cards
- Visibility, focus and debugging3 cards
Next steps
- Flexbox3 cards
- Grid layout4 cards
- Positioning2 cards
- Responsive design3 cards
- Custom properties and theming2 cards
- Pseudo-elements, text and languages3 cards
- Transitions and transforms2 cards
- Forms, print and CSS architecture3 cards
Go deeper
- Modern selectors and nesting3 cards
- Container queries and subgrid2 cards
- Managing the cascade at scale2 cards
- Page, scroll and property animations3 cards
- Modern colour and viewport units2 cards
- Anchor positioning and stacking2 cards
- Rendering performance3 cards
- Accessibility and progressive enhancement3 cards

Final test and certificate

10 questions drawn fresh from the whole topic, about 15 minutes. Sign in, score 80% or more and get a free certificate with your name and a public check link anyone can open, such as an employer or a teacher. Not signed in? Try a practice test from the cards.

Take the final test

About these cards

Reviewed 26 October 2026
CoversCSS Snapshot 2026Baseline features as of October 2026 (current Chrome, Edge, Firefox, Safari)WCAG 2.2

Checked against

How these cards are made

CSS at a glance

CSS is the language that tells a browser how a web page should look.

If HTML is the frame of a house, CSS is the paint, the furniture and where everything goes.

Words you will meet

Rule: A selector plus the styles in braces that it gives to the elements it picks
Selector: The part of a rule that picks which elements to style
Property: The thing you change, like colour or size
Class: A name you give elements in HTML so CSS can pick them
Padding and margin: Space inside a box and space outside it
Cascade: How the browser picks a winner when two rules disagree
Specificity: The score that decides which selector is stronger
Inherit: When a child element takes a style from the element around it

The steps

1. Start from zero (12 cards): What CSS is, how a rule is built, and the few words you need before the core basics.
2. Core basics (21 cards): Rules, selectors, the box model, units and how the cascade picks a winner.
3. Next steps (22 cards): Flexbox, grid, positioning, responsive and fluid design, variables, dark mode and motion.
4. Go deeper (20 cards): Modern selectors, container queries, layers, scope, transitions, rendering cost and the newest layout tools.

All 12 cards in Start from zero

What is CSS, in one plain sentence?: CSS is the language that tells a browser, the app that shows web pages, how a page should look: colours, sizes, spacing and where each thing sits.
What problem does CSS solve? What were pages like without it?: Without CSS every page is black text on white, one plain font, stacked top to bottom. CSS lets one file give a whole site its look, so one change updates every page.
Where do you already meet CSS every day?: Dark mode, a button that changes colour when you point at it, a menu that folds into three lines on your phone: all of that is CSS at work.
What everyday thing is CSS like?: HTML is the frame of a house: it names each part, called an element, like a heading or a button. CSS is the paint, the furniture and where the furniture goes.
What are the parts of a CSS rule?: A rule picks elements and styles them. The selector h1 picks every main heading (a type selector, named after the tag), the property color says what to change, and the value green says to what.
What are braces, a declaration and a semicolon?: The braces { } hold the styles. Each property: value pair inside is one declaration, and each ends with a semicolon so the browser knows where it stops.
What are a class and an id?: A class is a name you give elements in HTML, like class="price", so CSS can pick them with .price; many elements can share it. An id names one single element and is picked with #name.
What are padding, border and margin?: Every element is a box. Padding is the space inside the box around the content, the border is the line around it, and margin is the space outside that keeps other boxes away.
What do px, rem and a hex colour like #ff6a00 mean?: A pixel is one tiny dot on the screen, and px sizes stay fixed. rem sizes follow the font size the reader picked. A hex code mixes red, green and blue in six letters and digits.
What do cascade, specificity and inherit mean?: When two rules disagree, the cascade picks a winner. Specificity is its score: an id beats a class, a class beats a tag name. Inherit means a child takes a style, like text colour, from the box around it.
What do you need, and what is your first tiny win?: Just a browser and a plain text editor, nothing to install. Save this as hello.html and open it: the style tag holds two rules that paint the page light yellow and the heading teal.
What will you be able to do after this topic?: Give any page your own colours, fonts and spacing, lay it out in rows and columns that fit phones and laptops, and find out why a style is not showing.

CSS cheatsheet

Layout

display: grid; place-items: center Centre anything both ways
repeat(auto-fill, minmax(min(240px, 100%), 1fr)) Responsive card grid
grid-template-columns: minmax(0, 1fr) Column that never overflows
display: flex; gap: 1rem Row with even spacing
flex: 1; min-width: 0 Equal share that can shrink
margin-inline: auto Centre a block horizontally
grid-template-rows: subgrid Align rows across cards

Responsive

@media (width >= 48rem) Range syntax breakpoint
container-type: inline-size Make a box queryable
@container (width > 30rem) Style by container width
clamp(1rem, 0.8rem + 1vw, 1.5rem) Fluid size with limits
min-block-size: 100svh Full screen without bar jumps
aspect-ratio: 16 / 9 Reserve media shape
@media (prefers-reduced-motion: reduce) Calm motion

Selectors

.parent:has(> img) Parent by child
:where(.a, .b) Group with zero specificity
:is(h1, h2, h3) Group, highest specificity
:focus-visible Keyboard focus ring only
:user-invalid Invalid after interaction
:nth-child(2 of .item) Second match of a class
&:hover Native nesting parent reference

Cascade control

@layer reset, vendor, app; Declare winning order
@import url(x.css) layer(vendor) Put a file in a layer
@scope (.card) to (.slot) Bounded component styles
all: revert-layer Undo to the previous layer
isolation: isolate New stacking context
inherit / initial / unset / revert Reset keywords

Colour and theming

color-scheme: light dark Theme native controls
light-dark(#fff, #111) Pick by colour scheme
oklch(62% 0.19 255) Perceptual colour
oklch(from var(--c) calc(l - .1) c h) Darker shade of a token
color-mix(in oklch, var(--c) 20%, white) Tint
@property --x { syntax: "<angle>" } Typed, animatable variable

Motion and performance

transform / opacity Compositor-only animation
@starting-style { opacity: 0 } Enter transition from first render
@view-transition { navigation: auto } Cross-page transitions
animation-timeline: scroll() Scroll-driven keyframes
content-visibility: auto Skip off-screen rendering
contain-intrinsic-size: auto 300px Placeholder size for skipped boxes