← Teacher guide

Layout and components: cheat sheet

Layout and components · In any playground, open Reference to copy these.

Rules that combine

<h2> subheading

A smaller heading for a section.

<h2>Subheading</h2>
Example
<h1>Robotics Club</h1>
<h2>This term</h2>
What it draws
A smaller heading under the title

<a> link

A link. The address goes in href; the words between the tags are what people click.

<a href="https://example.com">Link text</a>
Example
<p>Read the <a href="https://example.com">club rules</a>.</p>
What it draws
The link text is blue and underlined

<header>

The top part of a page: usually the title and the menu. Looks like a div; the name tells browsers and screen readers what it is.

<header>
  <h1>Site name</h1>
</header>
Example
<header>
  <h1>Chess club</h1>
</header>
<p>Page content</p>
What it draws
It looks like any block: the name is the difference

<footer>

The bottom part of a page: contact details, small print.

<footer>
  Contact and small print
</footer>
Example
<p>Page content</p>
<footer>
  <p>Contact: chess@example.com</p>
</footer>
What it draws
The bottom of the page

<style> block

Where CSS lives. Each rule is: selector { property: value; }

<style>
  h1 {
    color: red;
  }
</style>
Example
<style>
  h2 {
    color: purple;
  }
</style>
<h2>Purple heading</h2>
<p>Normal text</p>
What it draws
The rule styles every <h2>

rule

Style every element matching the selector.

p {
  color: blue;
}
Example
<style>
  li {
    color: teal;
  }
</style>
<ul>
  <li>One</li>
  <li>Two</li>
</ul>
What it draws
Every <li> is teal

several selectors

One rule for several kinds of element: list the selectors with commas.

h1, h2 {
  color: navy;
}
Example
<style>
  h1, li {
    color: purple;
  }
</style>
<h1>Title</h1>
<ul>
  <li>An item</li>
</ul>
<p>A paragraph</p>
What it draws
The heading and the list item change; the paragraph does not

background-color

The background colour.

background-color: lightyellow;
Example
<style>
  h2 {
    background-color: lightyellow;
  }
</style>
<h2>Notice</h2>
What it draws
The colour behind the text

menu links

Style only the links inside the nav. The space means inside: nav a is every a within a nav.

nav a {
  color: white;
  text-decoration: none;
}
Example
<style>
  nav a {
    color: crimson;
    text-decoration: none;
  }
</style>
<nav>
  <ul>
    <li><a href="https://example.com">Home</a></li>
    <li><a href="https://example.com/rules">Rules</a></li>
  </ul>
</nav>
<p>A <a href="https://example.com">link in the text</a> keeps its look.</p>
What it draws
The menu links change; the link in the text does not

flex row

A row of items. gap is the space between them, justify-content places them along the row, align-items lines them up across it.

.row {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
}
Example
<style>
  .bar {
    display: flex;
    gap: 16px;
    justify-content: space-between;
    align-items: center;
  }
</style>
<section class="bar">
  <h2>Chess club</h2>
  <p>Join us</p>
</section>
What it draws
The title on the left and the text on the right, lined up across

card component

A chunk of HTML with a class. Copy the section for each card; one rule styles every copy.

<style>
  .card {
    padding: 16px;
    border: 1px solid gray;
  }
</style>
<section class="card">
  <h2>Title</h2>
  <p>Some text.</p>
</section>
Example
<style>
  .card {
    padding: 16px;
    border: 1px solid gray;
  }
</style>
<section class="card">
  <h2>Chess</h2>
  <p>Wednesdays.</p>
</section>
<section class="card">
  <h2>Art</h2>
  <p>Thursdays.</p>
</section>
What it draws
Two cards, one rule

<p> paragraph

A paragraph of text.

<p>Some text</p>
Example
<p>We meet on Tuesdays.</p>
<p>Everyone is welcome.</p>
What it draws
Two paragraphs, with a gap between

<ul> list

A bulleted list. Each item is an <li>.

<ul>
  <li>First</li>
  <li>Second</li>
</ul>
Example
<ul>
  <li>Apples</li>
  <li>Pears</li>
  <li>Plums</li>
</ul>
What it draws
A bullet for each <li>

<nav>

The main menu of links.

<nav>
  <a href="#">Home</a>
</nav>
Example
<nav>
  <a href="#">Home</a>
  <a href="#">Games</a>
</nav>
What it draws
A group of menu links

page parts

The parts of a page, named: header, nav, main with its sections, and footer. They look like plain blocks; the names are for screen readers and search engines.

<header>
  <h1>Site name</h1>
  <nav>
    <ul>
      <li><a href="https://example.com">Home</a></li>
    </ul>
  </nav>
</header>
<main>
  <section>
    <h2>Section title</h2>
    <p>Some text.</p>
  </section>
</main>
<footer>
  <p>Contact us</p>
</footer>
Example
<header>
  <h1>Chess club</h1>
  <nav>
    <ul>
      <li><a href="https://example.com">Home</a></li>
      <li><a href="https://example.com/rules">Rules</a></li>
    </ul>
  </nav>
</header>
<main>
  <section>
    <h2>When we meet</h2>
    <p>Wednesdays at lunch.</p>
  </section>
</main>
<footer>
  <p>Contact the teacher in charge.</p>
</footer>
What it draws
Each part is a plain block: the tag names are the difference

class selector

Style only the elements you mark with class="note" in the HTML. The dot is only in the CSS.

.note {
  color: red;
}
Example
<style>
  .tip {
    font-style: italic;
  }
</style>
<p>A normal paragraph.</p>
<p class="tip">A paragraph with class="tip".</p>
What it draws
Only the paragraph with the class changes

color

The text colour.

color: red;
Example
<style>
  em {
    color: crimson;
  }
</style>
<p>A <em>red</em> word</p>
What it draws
Text colour

font-size

How big the text is.

font-size: 20px;
Example
<style>
  h2 {
    font-size: 40px;
  }
</style>
<h2>Big</h2>
<p>Normal</p>
What it draws
A bigger heading

card box

A box with room inside (padding), a line around it (border) and space outside it (margin). Width sets the content only.

.card {
  width: 200px;
  padding: 16px;
  border: 2px solid navy;
  margin: 12px;
}
Example
<style>
  .card {
    width: 200px;
    padding: 16px;
    border: 2px solid navy;
    margin: 12px;
  }
</style>
<section class="card">
  <h2>Chess</h2>
  <p>Wednesdays at lunch.</p>
</section>
What it draws
A card 200px wide inside, 244px with its padding and border

wrapping row

A row that moves items to a new line when there is no room. flex: 1 lets items share the space and min-width stops them getting too narrow.

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.item {
  flex: 1;
  min-width: 150px;
}
Example
<style>
  .gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .item {
    flex: 1;
    min-width: 150px;
    background-color: lightyellow;
  }
</style>
<section class="gallery">
  <p class="item">One</p>
  <p class="item">Two</p>
  <p class="item">Three</p>
  <p class="item">Four</p>
</section>
What it draws
Items share the row, then wrap when the preview is narrow

heading outline

Headings are the page's outline: one h1, then h2 for each part, h3 inside those. Never pick a level for its size; set the size with CSS.

<h1>Page title</h1>
<h2>A part of the page</h2>
<h3>A part of that part</h3>

Boxes

<div> box

A container that groups things together, so you can style them as one.

<div>
  Content
</div>

<main>

The main content of the page. One per page.

<main>
  The page's main content
</main>
Example
<main>
  <h2>This week</h2>
  <p>Practice on Wednesday.</p>
</main>
What it draws
The main content

<form>

Holds the fields and the button that sends them. On its own, a form sends nowhere: code behind it does the work.

<form>
  fields
  <button>Send</button>
</form>
Example
<form>
  <label for="town">Town</label>
  <input id="town" type="text">
  <button>Go</button>
</form>
What it draws
A field and a button

width

How wide the content is. Padding and border are added on top of it.

width: 200px;
Example
<style>
  div {
    width: 120px;
    background-color: lightblue;
  }
</style>
<div>A box 120 pixels wide</div>
What it draws
The box is 120 pixels wide

margin

Space outside an element, between it and its neighbours.

margin: 10px;
Example
<style>
  p {
    border: 1px solid gray;
    margin: 20px;
  }
</style>
<p>One</p>
<p>Two</p>
What it draws
Space around each box

card

A box with a border and rounded corners. The card-body inside gives it padding; card-title and card-text style what is in it.

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Title</h5>
    <p class="card-text">Text</p>
  </div>
</div>
Example
<link rel="stylesheet" href="bootstrap.min.css">

<div class="card m-2">
  <div class="card-body">
    <h5 class="card-title">Robotics</h5>
    <p class="card-text">Fridays in the lab.</p>
  </div>
</div>
What it draws
A bordered box with a title and a line of text

comment

A note that the browser ignores.

<!-- A note to yourself -->
Example
<p>You can see this.</p>
<!-- You cannot see this. -->
What it draws
The comment does not show

<section>

One part of the page, usually with its own heading.

<section>
  <h2>Part</h2>
</section>
Example
<section>
  <h2>Results</h2>
  <p>We won 3 games.</p>
</section>
What it draws
One part of a page with its heading

label and input

An input is a box to type in. Its label says what to type; for and id must match, so clicking the label puts the cursor in the box.

<label for="name">Name</label>
<input id="name" type="text">
Example
<label for="age">Age</label>
<input id="age" type="number">
What it draws
A labelled box for a number

font-family

Which font to use.

font-family: sans-serif;
Example
<style>
  p {
    font-family: monospace;
  }
</style>
<p>Code font</p>
What it draws
A different font

padding

Space inside an element, between its edge and its content.

padding: 10px;
Example
<style>
  p {
    background-color: lightblue;
    padding: 20px;
  }
</style>
<p>Room inside</p>
What it draws
Space between the edge and the text

border

A line around an element: thickness, style, colour.

border: 2px solid black;
Example
<style>
  p {
    border: 2px solid black;
  }
</style>
<p>Boxed</p>
What it draws
A line around the paragraph

Layout

<img> image

A picture. src is the picture file; alt describes it for people who cannot see it. There is no closing tag.

<img src="trophy.svg" alt="A gold trophy">
Example
<img src="medal.svg" alt="A silver medal" width="100">
<p>Second place</p>
What it draws
The picture, 100 pixels wide

gap

Space between the items in a flex row (on the parent, with display: flex).

gap: 16px;
Example
<style>
  .row {
    display: flex;
    gap: 40px;
  }
</style>
<div class="row">
  <p>One</p>
  <p>Two</p>
  <p>Three</p>
</div>
What it draws
40 pixels between the items

list-style

Remove the bullets or numbers from a list: menus are lists without bullets.

list-style: none;
Example
<style>
  ol {
    list-style: none;
  }
</style>
<ol>
  <li>First</li>
  <li>Second</li>
</ol>
What it draws
A list with no numbers

display: flex

Put it on the box that holds the items (the parent): its children line up in a row.

display: flex;
Example
<style>
  .row {
    display: flex;
  }
</style>
<div class="row">
  <p>One</p>
  <p>Two</p>
  <p>Three</p>
</div>
What it draws
The three paragraphs sit side by side

flex-wrap

Let items move to the next line when the row is full.

flex-wrap: wrap;
Example
<style>
  .row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 180px;
  }
</style>
<div class="row">
  <img src="star.svg" alt="Star" width="50">
  <img src="star.svg" alt="Star" width="50">
  <img src="star.svg" alt="Star" width="50">
  <img src="star.svg" alt="Star" width="50">
</div>
What it draws
The fourth star wraps to the next line

alt text

Says what a picture shows, for anyone who can't see it (screen readers read it aloud). Use alt="" for a picture that is only decoration.

<img src="trophy.svg" alt="A gold trophy">

relative path

A file name with no folder means "beside this page"; images/trophy.svg means "in the images folder beside this page". Never a path from your own computer (C:/Users/…).

<img src="trophy.svg" alt="…">
<link rel="stylesheet" href="style.css">

Final challenge: lay out the club page

<button>

A button.

<button>Click me</button>
Example
<button>Start</button>
What it draws
A button (clicking does nothing yet)

jump link

A link to a place on the same page. id names the place; href starts with # and the same name.

<a href="#results">Link text</a>

<h2 id="results">Section title</h2>
Example
<nav>
  <ul>
    <li><a href="#results">Results</a></li>
    <li><a href="#join">Join</a></li>
  </ul>
</nav>
<h2 id="results">Results</h2>
<p>The Owls won.</p>
<h2 id="join">Join</h2>
<p>Come on Wednesday.</p>
What it draws
Clicking a link scrolls the page to its heading

<select> drop-down

A drop-down list: one option to choose.

<select id="house">
  <option>Owls</option>
  <option>Hawks</option>
</select>
Example
<label for="size">Size</label>
<select id="size">
  <option>Small</option>
  <option>Large</option>
</select>
What it draws
A drop-down showing its first option

display: grid

Put it on the box that holds the items: its children are placed in rows and columns (with grid-template-columns).

display: grid;
Example
<style>
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  p {
    background-color: lavender;
  }
</style>
<div class="grid">
  <p>A</p>
  <p>B</p>
  <p>C</p>
  <p>D</p>
</div>
What it draws
Four boxes in two columns

on click

When the element with id="go" is clicked, run the lines inside. # means id, as . means class.

document.querySelector('#go').addEventListener('click', function () {
  what to do
});

<table>

A table: <tr> is a row, <th> a heading cell, <td> a normal cell.

<table>
  <tr>
    <th>Name</th>
    <th>Score</th>
  </tr>
  <tr>
    <td>Sam</td>
    <td>10</td>
  </tr>
</table>
Example
<table>
  <tr>
    <th>Team</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Owls</td>
    <td>12</td>
  </tr>
  <tr>
    <td>Hawks</td>
    <td>9</td>
  </tr>
</table>
What it draws
Headings in bold, one row per <tr>

text-align

Align text: left, center or right.

text-align: center;
Example
<style>
  h2 {
    text-align: center;
  }
</style>
<h2>Centred</h2>
<p>Left</p>
What it draws
The heading moves to the middle

grid-template-columns

The width of each column, in order. 1fr means one share of the space left; repeat(3, 1fr) makes three equal columns.

grid-template-columns: 200px 1fr;
Example
<style>
  .grid {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 8px;
  }
  .cell {
    background-color: lightblue;
  }
</style>
<div class="grid">
  <div class="cell">80px</div>
  <div class="cell">The rest</div>
</div>
What it draws
A fixed column, then one that takes the rest

change the text

Replace the words inside the element with id="message".

document.querySelector('#message').textContent = 'Go!';