<h2> subheading
A smaller heading for a section.
<h2>Subheading</h2>Example
<h1>Robotics Club</h1>
<h2>This term</h2>
Structure and style a page: cheat sheet
Structure and style a page · In any playground, open Reference to copy these.
Text and style
<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>
color
The text colour.
color: red;Example
<style>
em {
color: crimson;
}
</style>
<p>A <em>red</em> word</p>
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><p> paragraph
A paragraph of text.
<p>Some text</p>Example
<p>We meet on Tuesdays.</p>
<p>Everyone is welcome.</p>
<em> emphasis
Emphasise text (usually italic).
<em>emphasis</em>Example
<p>Do <em>not</em> run inside.</p>
rule
Style every element matching the selector.
p {
color: blue;
}Example
<style>
li {
color: teal;
}
</style>
<ul>
<li>One</li>
<li>Two</li>
</ul>
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>
Lists, links and pictures
<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>
comment
A note that the browser ignores.
<!-- A note to yourself -->Example
<p>You can see this.</p>
<!-- You cannot see this. -->
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>
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>
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>
<ol> numbered list
A numbered list.
<ol>
<li>First</li>
<li>Second</li>
</ol>Example
<ol>
<li>Plug in</li>
<li>Switch on</li>
<li>Press start</li>
</ol>
<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>
<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>
font-size
How big the text is.
font-size: 20px;Example
<style>
h2 {
font-size: 40px;
}
</style>
<h2>Big</h2>
<p>Normal</p>
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>
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">Parts of a page
<button>
A button.
<button>Click me</button>Example
<button>Start</button>
<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>
<nav>
The main menu of links.
<nav>
<a href="#">Home</a>
</nav>Example
<nav>
<a href="#">Home</a>
<a href="#">Games</a>
</nav>
<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>
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>
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">
background-color
The background colour.
background-color: lightyellow;Example
<style>
h2 {
background-color: lightyellow;
}
</style>
<h2>Notice</h2>
<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>
<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>
<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>
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>
<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>
<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>
Final challenge: a club page
text-align
Align text: left, center or right.
text-align: center;Example
<style>
h2 {
text-align: center;
}
</style>
<h2>Centred</h2>
<p>Left</p>