HTML and CSS cheat sheet

Everything you learn in the course, on one page. At the top, the HTML: the elements a page is built from. Below it, the CSS: how selectors find elements, and the properties per family, from text to grid. Each selector shows its specificity, as (ids, classes, elements).

Tip: print this page or save it as a PDF.

The skeleton

Every page has the same shape. What's in <head> doesn't show on the page itself; what's in <body> does.

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Cold Comfort ice cream parlour</title>
  </head>
  <body>
    <h1>Cold Comfort</h1>
  </body>
</html>

The doctype says this is modern HTML. lang tells screen readers and search engines which language the page is in.

Pitfall: Without <!DOCTYPE html>, the browser draws the page in an old mode, with other sizes.

<meta name="viewport">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

Tells a phone the page is as wide as its screen. Needed for every site that has to work on a phone.

Pitfall: Without it, a phone pretends to be 980px wide and shrinks everything: your media queries seem not to work.

<link>
<head>
  <link rel="stylesheet" href="style.css">
</head>

Links a stylesheet to the page. That way every page of your site shares the same CSS.

Pitfall: A style attribute on an element works too, but then your styling is scattered through the HTML, and it nearly always wins.

Text, links and images

<h1> to <h6>
<h1>Cold Comfort</h1>
<h2>Our flavours</h2>

Headings, from the most important (h1) to the least (h6). One h1 per page.

Pitfall: Pick a heading for what it means, not for its size. The size is set with CSS.

<p>
<p>Open every day from 11 am to 10 pm.</p>

A paragraph. The browser puts space above and below.

<strong> and <em>
<p>Pistachio is <strong>sold out</strong>, <em>really</em>.</p>

strong is important (bold), em puts the stress (italic). A screen reader reads them differently.

Pitfall: <b> and <i> look the same, but say nothing about the meaning.

<a href>
<a href="flavours.html">See our flavours</a>

A link. href is the address: relative (flavours.html, on your own site) or absolute (https://…).

Pitfall: "Click here" says nothing. A link text says where you'll end up.

<img>
<img src="hoorntje.svg" alt="A cone with pink ice cream">

An image. alt describes what's on it, for whoever can't see it. img has no closing tag.

Pitfall: Without alt, a screen reader only knows the file name. An image that says nothing gets alt="".

Lists and tables

<ul>, <ol> and <li>
<ul>
  <li>Vanilla</li>
  <li>Pistachio</li>
</ul>

ul is a list with bullets, ol a numbered one. Each point is an li.

Pitfall: An li always sits in a ul or ol, never on its own.

<table>
<table>
  <tr>
    <th>Flavour</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Vanilla</td>
    <td>£2.50</td>
  </tr>
</table>

A table, row by row (tr). th is a header cell, td an ordinary cell.

Pitfall: A table is for data in rows and columns, not to build a page with. That's what grid is for.

Structure

These blocks look plain, but say what a part of the page is. Screen readers and search engines use that.

<header>, <main> and <footer>
<header>Cold Comfort</header>
<main>Our flavours</main>
<footer>12 Marine Parade, Brighton</footer>

The top, the main content (one per page) and the foot of the page.

<nav>
<nav>
  <a href="index.html">Home</a>
  <a href="flavours.html">Flavours</a>
</nav>

The menu of the site.

<section> and <article>
<section>
  <h2>News</h2>
  <article>
    <h3>New flavour: honeycomb</h3>
  </article>
</section>

A section is a part of the page with a heading of its own. An article stands on its own, like a news item.

<div> and <span>
<div class="card">
  <p>Two scoops <span class="price">£4.50</span></p>
</div>

A div is a block without meaning, a span a piece of text without meaning. Handy as a hook for CSS.

Pitfall: If there's an element with meaning (nav, button, li), use that.

Forms

<label> and <input>
<label for="name">Your name</label>
<input id="name" type="text">

A field with its label. for and id tie them together: tap the label and you're in the field.

Pitfall: A placeholder is not a label: it disappears as soon as you type.

<input type>
<label for="email">Email</label>
<input id="email" type="email">

The type picks the keyboard and the check: email, tel, number, date, checkbox.

<button>
<button type="submit">Sign up</button>

A button. In a form, it sends the form.

Selectors

A selector says which elements a rule finds. Does another rule win? Then specificity counts: ids first, then classes, then elements. On a tie, the last rule wins.

pSpecificity (0,0,1)
p {
  line-height: 1.5;
}

Every element of that kind.

.priceSpecificity (0,1,0)
.price {
  color: red;
}

Every element with class="price", however many there are.

Pitfall: In the HTML you write class="price" without a dot, in the CSS .price with one. And capitals count: .Price finds nothing.

#menuSpecificity (1,0,0)
#menu {
  background: white;
}

The one element with id="menu".

Pitfall: An id weighs a lot: a rule on #menu is hard to beat. Prefer a class.

nav aSpecificity (0,0,2)
nav a {
  text-decoration: none;
}

Every a anywhere inside a nav, however deep.

ul > liSpecificity (0,0,2)
ul > li {
  margin: 4px 0;
}

Only an li that is a direct child of a ul.

h1, h2
h1, h2 {
  font-family: Georgia, serif;
}

Two selectors, one rule. Each selector counts on its own.

Pitfall: One comma too many or too few changes everything: h1 h2 looks for an h2 inside an h1.

a[href^="https"]Specificity (0,1,1)
a[href^="https"] {
  color: green;
}

An attribute selector: every link whose href starts with https. $= is "ends with", = is "exactly".

a:hoverSpecificity (0,1,1)
a:hover {
  text-decoration: underline;
}

A pseudo-class: the link while the mouse is on it. :focus is the field or button you've reached with Tab.

li:nth-child(2n)Specificity (0,1,1)
li:nth-child(2n) {
  background: #f5f5f5;
}

Every second item. :first-child and :last-child are the first and the last.

Pitfall: :nth-child(3) for "the last one" only works while there are three. Use :last-child.

Text and colour

color
h1 {
  color: #e4572e;
}

The colour of the text. red, #f00, rgb(255 0 0) and hsl(0 100% 50%) are the same colour.

Pitfall: colour doesn't exist in CSS: it's the American color. And a forgotten ; after a value drops the next property.

font-family
body {
  font-family: Georgia, serif;
}

The typeface, with a fallback: if the computer doesn't have Georgia, it takes a serif.

font-size
h1 {
  font-size: 2rem;
}

The size. rem is a multiple of the default size, so the text grows when someone makes theirs bigger.

font-weight
.price {
  font-weight: bold;
}

How bold the text is, from 100 to 900; bold is 700.

text-align
header {
  text-align: center;
}

Puts text, and small blocks such as an image, left, centre or right within their parent.

Pitfall: You don't centre a block itself like this, but with margin: auto.

line-height
p {
  line-height: 1.5;
}

The height of a line. A number without a unit grows with the font size.

The box model

Every element is a box: the content, then padding, then border, then margin.

padding
.card {
  padding: 16px 24px;
}

Space inside the border. Two values: top and bottom, then left and right.

border
.card {
  border: 2px solid #3b2a1a;
}

The border: width, style and colour.

margin
.card {
  margin-bottom: 24px;
}

Space outside the border, between this element and the rest.

Pitfall: Two margins above each other collapse: 24px and 16px give 24px, not 40px.

box-sizing
* {
  box-sizing: border-box;
}

With border-box, width includes the padding and the border. That way a box of 100% really stays 100% wide.

Pitfall: Without border-box, width: 100% plus padding is wider than the parent.

max-width and margin auto
main {
  max-width: 40rem;
  margin: 0 auto;
}

Never wider than 40rem, and in the middle: auto shares the space on the left and right.

Pitfall: A fixed margin like margin-left: 120px only centres at one width.

display
.menu a {
  display: inline-block;
}

block takes a whole line, inline runs along in the text, inline-block runs along but gets a width and padding, none hides.

Flexbox

Flexbox puts items on one line, the main axis. The cross axis runs at right angles to it. The rules go on the container, not on the items.

display: flex
.trucks {
  display: flex;
}

The children of .trucks sit side by side.

justify-content
.trucks {
  display: flex;
  justify-content: space-between;
}

Spreads the items along the main axis: center, flex-end, space-between, space-around.

Pitfall: justify-content works on the main axis, align-items on the cross axis. With flex-direction: column they turn along.

align-items
.trucks {
  display: flex;
  align-items: center;
}

Places the items on the cross axis: flex-start, center, flex-end, stretch or baseline.

flex-direction
.trucks {
  display: flex;
  flex-direction: column;
}

Turns the main axis: row (the default) or column.

flex-wrap and gap
.trucks {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

Items that don't fit move to a new row, with 16px between them.

Pitfall: A margin on each item also adds space on the outside.

flex
.truck {
  flex: 1;
}

On an item: it grows into the free space. flex: 1 on every item makes them equally wide.

Grid

Grid divides the container into rows and columns at once.

grid-template-columns
.pitches {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Three columns that each get a share (fr) of the free space.

Pitfall: 33% doesn't count the gap and overflows; 1fr only shares what is left.

gap
.pitches {
  display: grid;
  gap: 12px 24px;
}

Space between the rows, then between the columns.

grid-column
.pond {
  grid-column: 1 / -1;
}

From line 1 to the last line: across the whole width. span 2 is two columns wide.

Pitfall: Lines are not columns: three columns have four lines.

grid-template-areas
body {
  display: grid;
  grid-template-areas:
    "top top"
    "side main";
}
header {
  grid-area: top;
}

Draw the layout with names, and put each element in its area with grid-area.

minmax and auto-fit
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

As many columns of at least 12rem as will fit: one on a phone, four on a big screen. Without a media query.

Positioning and responsive

position
.table {
  position: relative;
}
.label {
  position: absolute;
  top: 8px;
  right: 8px;
}

absolute places the label relative to the nearest parent with a position. relative makes the table that parent.

Pitfall: Without position: relative on the table, the label hangs off the corner of the page.

position: sticky
header {
  position: sticky;
  top: 0;
}

Scrolls along until it reaches the top, and stays there. fixed always stays in the same place in the window.

@media
.cards {
  display: block;
}
@media (min-width: 600px) {
  .cards {
    display: flex;
  }
}

Rules that only apply from 600px wide. Start with the phone and add for bigger screens: mobile first.

Pitfall: Put min-width breakpoints from small to large; otherwise a later rule overrides the earlier one.

max-width on img
img {
  max-width: 100%;
  height: auto;
}

An image never gets wider than its parent, and keeps its proportions.

custom properties
:root {
  --accent: #e4572e;
}
.button {
  background: var(--accent);
}

A variable of your own: pick the colour once, use it everywhere.

Pitfall: --Accent and --accent are two different variables.

transition
.button {
  transition: background-color 0.2s;
}
.button:hover {
  background-color: #c4401c;
}

A soft change when the colour changes.

Pitfall: Put transition on the element itself, not only on :hover: otherwise the colour jumps back without a transition.