HTML and CSS cheat sheet
Core HTML and CSS for building pages. Combine with the JavaScript sheet for behaviour.
Page structure
<!doctype html> <html lang="en">- Start of every page
<meta name="viewport" content="width=device-width, initial-scale=1">- Required for responsive pages
<header> <nav> <main> <footer>- Semantic landmarks
<section> <article> <aside>- Content grouping
<h1> to <h6>- Headings (one h1 per page)
Text, links, media
<a href="/page">text</a>- Link
<img src="a.webp" alt="description" width="600" height="400">- Image with alt text and size
<ul><li> <ol><li>- Bulleted and numbered lists
<strong> <em> <code>- Important, emphasized, code
<button type="button">- Button (type avoids accidental form submits)
Forms
<label for="email">Email</label>- Label tied to an input by id
<input id="email" type="email" required>- Validated email field
<input type="number" min="0" max="10">- Number with limits
<select><option> <textarea>- Dropdown and multi-line text
<form action="/send" method="post">- Where and how to submit
Selectors
p .class #id- Tag, class, id
nav a- Any link inside nav
ul > li- Direct children only
a:hover input:focus- States
li:nth-child(2n)- Every second item
:is(h1, h2) a- Match one of several selectors
Box model and text
box-sizing: border-box;- Include padding and border in width
margin: 1rem; padding: 1rem;- Outside and inside spacing
border: 2px solid #000; border-radius: 8px;- Border and rounded corners
font: 1rem/1.5 system-ui, sans-serif;- Size, line height, family
color: #111; background: #fff;- Colors
Flexbox and grid
display: flex; gap: 1rem;- Row of items with spacing
justify-content: space-between;- Spread along the main axis
align-items: center;- Center on the cross axis
flex-wrap: wrap;- Allow items to wrap
display: grid; grid-template-columns: repeat(3, 1fr);- Three equal columns
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));- Responsive grid without media queries
Responsive and variables
@media (max-width: 600px) { ... }- Styles for small screens
:root { --brand: #0e7490; }- Define a custom property
color: var(--brand);- Use it
max-width: 100%; height: auto;- Make images scale down
position: sticky; top: 0;- Stick to the top while scrolling
Learn it properly