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.

Space turn over · K got it · J again · ← back

All topics

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 (16 cards): Rules, selectors, the box model, units and how the cascade picks a winner.
3. Next steps (16 cards): Flexbox, grid, positioning, responsive and fluid design, variables, dark mode and motion.
4. Go deeper (17 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