CSS
CSS Cheat Sheet
The selectors, properties and patterns from the CSS track, in the order you learn them. Use it as a quick reminder while you build, and open the linked lesson when a row needs more context.
Syntax and adding CSS Lesson
selector { property: value; } | One rule: what to style, then the declarations |
<link rel="stylesheet" href="style.css"> | External stylesheet in <head> – the usual choice |
<style> p { color: navy; } </style> | Internal styles for one page |
<p style="color: navy"> | Inline style; hard to reuse or override |
/* comment */ | A note the browser ignores |
color: red !important; | Beats normal declarations; avoid except as a last resort |
When two rules have the same specificity, the one that comes later wins.
Selectors Lesson
p | Every <p> element |
.card | Elements with class="card" |
#main | The element with id="main" |
h1, h2 | A group: every <h1> and <h2> |
nav a | Links anywhere inside <nav> (descendants) |
ul > li | Only direct <li> children of a list |
h2 + p | The paragraph right after an <h2> |
input[type="email"] | Elements with a matching attribute |
a:hover input:focus-visible | States: pointer over it, keyboard focus |
li:nth-child(odd) | The 1st, 3rd, 5th… list items |
.price::before | A pseudo-element: generated content before the element |
#nav (1,0,0) .link (0,1,0) a (0,0,1) | Specificity: ids beat classes, classes beat element names |
Colours and backgrounds Lesson
color: #1d4ed8; | Text colour as a hex code |
rgb(29 78 216 / 50%) | Red, green, blue, with 50% opacity |
hsl(220 80% 50%) | Hue, saturation and lightness |
background-color: #fef3c7; | Fills the box behind the content |
background-image: url("hero.jpg"); | An image behind the content |
background-size: cover; | Image fills the box; edges may be cropped |
background-position: center; | Where the image sits in the box |
background-repeat: no-repeat; | Shows the image once |
linear-gradient(to right, #f97316, #db2777) | A gradient, used as a background image |
opacity: 0.6; | Fades the whole element, children included |
Body text needs a contrast ratio of at least 4.5:1 with its background (WCAG AA).
Box model Lesson
padding: 16px 24px; | 16px top and bottom, 24px left and right |
margin: 10px 20px 30px 40px; | Clockwise: top, right, bottom, left |
margin: 0 auto; | Centres a block that has a width |
border: 2px solid #ccc; | Width, style and colour in one line |
border-radius: 8px; | Rounded corners; 50% on a square makes a circle |
box-sizing: border-box; | Width now includes padding and border |
*, *::before, *::after { box-sizing: border-box; } | Common reset applied to every element |
box-shadow: 0 4px 12px rgb(0 0 0 / 0.15); | x offset, y offset, blur, colour |
outline: 2px solid orange; | Line outside the border; takes no space |
Vertical margins between blocks collapse: 20px and 30px give a 30px gap, not 50px.
Text and fonts Lesson
font-family: "Poppins", Arial, sans-serif; | Preferred font, then fallbacks |
font-size: 1.125rem; | Text size; rem respects the reader's settings |
font-weight: 600; | Boldness from 100 to 900 (400 normal, 700 bold) |
font-style: italic; | Italic text |
line-height: 1.5; | Line spacing; a unitless number scales with size |
text-align: center; | left, right, center or justify |
text-decoration: none; | Removes underlines, e.g. from links |
text-transform: uppercase; | Changes letter case visually |
letter-spacing: 0.05em; | Space between letters |
@font-face { font-family: "Brand"; src: url(brand.woff2); } | Loads your own web font file |
font-display: swap; | Shows fallback text while the web font loads |
max-width: 65ch; | Keeps lines of text a comfortable length |
Display and position Lesson
display: block; | Starts on a new line and fills the width |
display: inline; | Flows inside text; width and height are ignored |
display: inline-block; | Flows inline but accepts width and height |
display: none; | Removed from the page and from screen readers |
visibility: hidden; | Invisible, but still takes up its space |
position: relative; | Nudges from its normal place; anchors absolute children |
position: absolute; top: 0; right: 0; | Placed inside the nearest positioned ancestor |
position: fixed; | Stays put relative to the window when scrolling |
position: sticky; top: 0; | Scrolls normally, then sticks at the top |
inset: 0; | Shorthand for top, right, bottom and left |
z-index: 10; | On positioned items, higher numbers stack on top |
Flexbox Lesson
display: flex; | Children become flex items in a row |
flex-direction: column; | Stacks items vertically instead |
justify-content: space-between; | Spreads items along the main axis |
align-items: center; | Aligns items on the cross axis |
flex-wrap: wrap; | Lets items move onto new lines |
gap: 1rem; | Space between items |
flex: 1; | Item grows to share the free space |
flex: 0 0 200px; | Fixed 200px: no growing or shrinking |
align-self: flex-end; | Aligns one item differently |
margin-left: auto; | Pushes an item to the far end |
order: -1; | Moves an item visually; reading order stays the same |
Grid Lesson
display: grid; | Turns the element into a grid container |
grid-template-columns: repeat(3, 1fr); | Three equal columns |
grid-template-columns: 250px 1fr; | A fixed sidebar and a flexible main column |
repeat(auto-fit, minmax(220px, 1fr)) | As many columns as fit – responsive without media queries |
gap: 1.5rem; | Space between rows and columns |
grid-column: 1 / 3; | From column line 1 to line 3 |
grid-column: span 2; | Takes up two columns |
grid-column: 1 / -1; | Stretches across the full width |
grid-template-areas: "head head" "side main"; | Names areas to draw the layout |
grid-area: main; | Places an item in a named area |
grid-auto-rows: minmax(150px, auto); | Size of rows the grid creates automatically |
place-items: center; | Centres items both ways in their cells |
Responsive design Lesson
<meta name="viewport" content="width=device-width, initial-scale=1"> | Needed in HTML, or phones show a zoomed-out page |
@media (min-width: 768px) { … } | Mobile first: these rules apply from 768px up |
@media (width >= 768px) { … } | The same query in newer range syntax |
img { max-width: 100%; height: auto; } | Images shrink to fit their container |
@media (hover: hover) { … } | Only for devices with a real hover pointer |
@media (prefers-color-scheme: dark) { … } | When the system is set to dark mode |
container-type: inline-size; | Makes an element a size container |
@container (min-width: 400px) { … } | Rules based on the container's width, not the screen's |
@media print { … } | Styles for printed pages |
Units and math functions Lesson
px | Fixed pixels; good for borders and shadows |
rem | Relative to the root font size (16px by default) |
em | Relative to the element's own font size |
% | Relative to the parent, e.g. its width |
vw vh | 1% of the viewport's width or height |
dvh | Viewport height that follows mobile browser bars |
ch | Width of the "0" character; good for line length |
fr | A share of the free space in a grid |
calc(100% - 2rem) | Mixes units in a calculation |
min(100%, 600px) | Uses the smaller of the values |
clamp(1rem, 0.8rem + 1vw, 1.5rem) | Fluid value with a minimum and maximum |
With font-size, em is relative to the parent's font size.
Transitions and animations Lesson
transition: background-color 0.3s ease; | Animates a change of that property |
transition: transform 200ms, opacity 200ms; | Animates two properties |
ease ease-in-out linear | Timing functions: how the speed changes |
transform: translateY(-4px); | Moves the element without affecting layout |
transform: scale(1.05) rotate(5deg); | Grows and turns the element |
@keyframes pulse { from { … } to { … } } | Defines the steps of an animation |
animation: pulse 2s ease-in-out infinite; | Runs the keyframes on an element |
animation-fill-mode: forwards; | Keeps the final frame after it ends |
@media (prefers-reduced-motion: reduce) { … } | Tone down motion for people who ask for less |
Animate transform and opacity for the smoothest results.
CSS variables Lesson
:root { --brand: #0a7a3d; } | Declares a variable for the whole page |
color: var(--brand); | Uses the variable |
var(--gap, 1rem) | Fallback value if the variable is not set |
.card { --brand: #b45309; } | Overrides it for this element and its children |
[data-theme="dark"] { --bg: #121212; } | Swaps values for a dark theme |
padding: calc(var(--space) * 2); | Calculates with a variable |
el.style.setProperty('--brand', 'teal'); | Changes a variable from JavaScript |
getComputedStyle(el).getPropertyValue('--brand') | Reads a variable in JavaScript |
Variable names are case-sensitive: --Brand and --brand are different.