LEARN TO CODE | QUICK REFERENCE

HTML & CSS CHEAT SHEET

Common elements, attributes, selectors and properties at a glance. Covers all four sections of the HTML & CSS course.

JUMP TO A TOPIC

Choose a topic below to jump straight to its reference section. Each entry pairs a short explanation with a ready-to-adapt example. HTML uses elements and attributes; CSS uses selectors and properties.

01 | PAGE STRUCTURE

Page structure reference
Item Use and example
Document type Use the modern HTML document type. 

<!doctype html>
Document root Declare the page language. 

<html lang="en">
  <!-- Head and body go here. -->
</html>
Head / body Metadata belongs in head; page content in body. 

<head>...</head>
<body>...</body>
Character encoding Use UTF-8 for document text. 

<meta charset="UTF-8">
Viewport Let the layout match the device width. 

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0"
>
Page title Text for the browser tab and other contexts. 

<title>My portfolio</title>
Description Summarise the page for search engines. 

<meta
  name="description"
  content="Student projects and coding notes."
>
External CSS Load a stylesheet relative to this HTML file. 

<link rel="stylesheet" href="static/css/styles.css">
External JavaScript Run a classic external script after HTML parsing. 

<script src="script.js" defer></script>
Comment A source note; not hidden or secret data. 

<!-- Main navigation starts here. -->

02 | TEXT AND MEANING

Text and meaning reference
Item Use and example
Headings Use heading levels to reflect document structure. 

<h1>My projects</h1>
<h2>Robotics</h2>
<h3>Sensor testing</h3>
Paragraph A paragraph of text. 

<p>Build, test and improve your idea.</p>
Strong / emphasis Importance / stress emphasis, not just appearance. 

<strong>Save your work.</strong>
<em>Test one change at a time.</em>
Line / thematic break A necessary line break / thematic change. 

Line one<br>Line two
<hr>
Code / preformatted Use pre to preserve whitespace in code. 

<pre><code>print("Hello")</code></pre>
Quotation A block quotation; attribute the source visibly. 

<blockquote>
  <p>A short quoted passage.</p>
</blockquote>
Generic containers div groups flow content; span groups inline text. 

<div class="card">...</div>
<p>A <span class="tag">new</span> project.</p>
Special characters Write markup characters as character references. 

&lt; means <
&gt; means >
&amp; means &

Use CSS for spacing. Repeated br elements are not a page-layout system.

03 | SEMANTIC PAGE REGIONS

Semantic page regions reference
Item Use and example
header Introductory content for a page or section. 

<header>...</header>
nav A significant navigation region. 

<nav aria-label="Main navigation">
  <a href="index.html">Home</a>
</nav>
main The page’s dominant content. 

<main id="main-content">...</main>
section A thematic section, normally with a heading. 

<section>
  <h2>Recent projects</h2>
</section>
article A self-contained item such as a post or project. 

<article>
  <h2>Robot arm project</h2>
</article>
aside Related, tangential content. 

<aside>Related resources</aside>
footer Footer information for a page or section. 

<footer>Contact and site information</footer>

Choose elements for their meaning. A semantic element does not automatically supply the desired layout.

04 | LINKS, PATHS AND IMAGES

Links, paths and images reference
Item Use and example
Relative link Open another page in the current site. 

<a href="about.html">About</a>
Parent folder Move up one folder in a relative path. 

<a href="../index.html">Home</a>
Page anchor Link to a unique matching element ID. 

<a href="#contact">Contact</a>
<section id="contact">...</section>
External new tab Use clear link text and a suitable rel value. 

<a
  href="https://developer.mozilla.org/"
  target="_blank"
  rel="noopener noreferrer"
>
  MDN reference
</a>
Email / download Open a mail handler / suggest downloading a file. 

<a href="mailto:hello@example.com">Email</a>
<a href="notes.pdf" download>Download notes</a>
Image Give meaningful images useful alternative text. 

<img
  src="static/images/robot.jpg"
  alt="Robot arm lifting a foam cube"
  width="640"
  height="480"
>
Decorative image An empty alt marks a purely decorative image. 

<img src="decoration.svg" alt="">
Caption Associate an image and caption. 

<figure>
  <img src="robot.jpg" alt="A four-wheel robot">
  <figcaption>Our first prototype.</figcaption>
</figure>

Use forward slashes in web paths. CSS url(...) paths are relative to the stylesheet. download has origin restrictions; it is not a guarantee.

05 | LISTS AND TABLES

Lists and tables reference
Item Use and example
Unordered list A collection without meaningful numbering. 

<ul>
  <li>Python</li>
  <li>HTML</li>
</ul>
Ordered list A meaningful sequence or ranking. 

<ol>
  <li>Plan</li>
  <li>Build</li>
</ol>
Description list Terms and their descriptions. 

<dl>
  <dt>HTML</dt>
  <dd>Webpage structure and meaning.</dd>
</dl>
Table caption Give a data table a descriptive caption. 

<table>
  <caption>Club places</caption>
  <!-- Rows go here. -->
</table>
Table regions thead groups heading rows; tbody groups body rows. 

<thead>...</thead>
<tbody>...</tbody>
Row / heading / cell tr is a row; th is a header; td is a data cell. 

<tr>
  <th scope="col">Club</th>
  <th scope="col">Places</th>
</tr>
<tr>
  <td>Robotics</td>
  <td>12</td>
</tr>

Use tables for tabular data. Use Flexbox or Grid for page layout.

06 | FORMS AND INPUTS

Forms and inputs reference
Item Use and example
Form action is the destination; method controls submission. 

<form action="/contact" method="post">
  <!-- Labelled fields go here. -->
</form>
Label + input The label for matches the input id. 

<label for="name">Name : </label>
<input id="name" name="name" type="text">
Email / password Use an appropriate input type. 

<input type="email" name="email">
<input type="password" name="password">
Number Set numeric bounds and allowed step. 

<input
  type="number"
  name="tickets"
  min="1"
  max="6"
  step="1"
>
Date / file Choose a date / select a file. 

<input type="date" name="visit">
<input type="file" name="photo" accept="image/*">
Textarea A multi-line text control. 

<label for="message">Message : </label>
<textarea id="message" name="message" rows="4">
</textarea>
Select Choose from options; give it a visible label. 

<label for="club">Club : </label>
<select id="club" name="club">
  <option value="robotics">Robotics</option>
  <option value="art">Art</option>
</select>
Checkbox Independent on/off choice; label can wrap it. 

<label>
  <input type="checkbox" name="updates" value="yes">
  Receive updates
</label>
Radio group One choice in a group sharing the same name. 

<label>
  <input type="radio" name="level" value="beginner">
  Beginner
</label>
<label>
  <input type="radio" name="level" value="advanced">
  Advanced
</label>
Fieldset + legend Label a related group of controls. 

<fieldset>
  <legend>Choose a level</legend>
  <!-- Radio options go here. -->
</fieldset>
Buttons Submit a form / perform another scripted action. 

<button type="submit">Send</button>
<button type="button">Show help</button>

A server or JavaScript handler must implement the action. HTML alone does not send email or store records. Password inputs obscure display, not network traffic; use HTTPS.

07 | USEFUL ATTRIBUTES

Useful attributes reference
Item Use and example
id / class Unique page identifier / reusable styling classes. 

<p id="result" class="notice success">Ready</p>
name / value A form field’s submitted key / value. 

<input name="quantity" value="1">
required Require a value under the control’s rules. 

<input type="email" name="email" required>
minlength / maxlength Text-length constraints on supported controls. 

<input name="username" minlength="3" maxlength="20">
pattern A supported text-control pattern; explain the rule. 

<input
  name="code"
  pattern="[A-Z]{3}"
  title="Three capital letters"
>
placeholder A short hint; not a substitute for a label. 

<input name="email" placeholder="alex@example.com">
autocomplete Help the browser identify the expected data. 

<input name="email" autocomplete="email">
checked / selected Initial checkbox/radio / option selection. 

<input type="checkbox" name="news" checked>
<option value="js" selected>JavaScript</option>
disabled / readonly Disabled fields are normally not submitted. 

<input name="code" value="ABC" readonly>
<button type="submit" disabled>Unavailable</button>
Boolean attributes Presence means true; omit to make false. 

<!-- disabled="false" still disables a control. -->
hidden / data-* Hide a region / attach custom string data. 

<p hidden>Extra details</p>
<button type="button" data-topic="css">CSS</button>

Browser validation can be bypassed. A real backend must validate received data independently. readonly applies only to supported controls.

08 | MEDIA AND DISCLOSURE

Media and disclosure reference
Item Use and example
Video Show native controls; provide appropriate captions. 

<video controls width="640">
  <source src="demo.mp4" type="video/mp4">
  <track
    kind="captions"
    src="captions.vtt"
    srclang="en"
    label="English"
  >
</video>
Audio Show playback controls for an audio source. 

<audio controls src="explanation.mp3">
  Your browser cannot play this audio.
</audio>
Disclosure A keyboard-operable expandable explanation. 

<details>
  <summary>Show an example</summary>
  <p>Example content goes here.</p>
</details>

09 | CSS SELECTORS

Css selectors reference
Item Use and example
Element Match every element of that type. 

p {
  line-height: 1.6;
}
Class Match a reusable class. 

.card {
  padding: 1rem;
}
ID Match an ID; prefer classes for reusable styles. 

#result {
  font-weight: 700;
}
Group Apply the rule to either selector. 

h1, h2 {
  color: #24988f;
}
Descendant / child Any matching descendant / direct child. 

.card p {
  margin-bottom: 1rem;
}
nav > a {
  text-decoration: none;
}
Combined classes Both classes must be on the same element. 

.card.featured {
  border: 2px solid #24988f;
}
Attribute Match an attribute value. 

input[type="email"] {
  width: 100%;
}
Pseudo-class Match a state or structural condition. 

a:hover {
  text-decoration: underline;
}
li:first-child {
  font-weight: 700;
}
Focus Show a visible keyboard-focus indicator. 

a:focus-visible {
  outline: 3px solid #24988f;
  outline-offset: 3px;
}
Pseudo-element Style a part or generated decorative content. 

.tag::before {
  content: "★ ";
}

.card p is not the same as .card.featured. Pseudo-class names start with :; pseudo-elements normally use ::.

10 | COLOUR AND TYPOGRAPHY

Colour and typography reference
Item Use and example
Text / background Foreground colour / background colour. 

color: #243332;
background-color: #f3faf8;
Font family Give a preferred family and fallbacks. 

font-family: Arial, sans-serif;
Size / weight Set text size / weight. 

font-size: 1rem;
font-weight: 700;
Line height Unitless values scale with the font size. 

line-height: 1.6;
Alignment / decoration Align inline content / underline text. 

text-align: center;
text-decoration: underline;
Case / spacing Change presentation without changing source text. 

text-transform: uppercase;
letter-spacing: 0.05em;
Wrapping Allow long strings to wrap within their box. 

overflow-wrap: anywhere;

11 | BOX MODEL AND SIZING

Box model and sizing reference
Item Use and example
Border box Include padding and border in declared size. 

*,
*::before,
*::after {
  box-sizing: border-box;
}
Padding / margin Inner spacing / outside spacing. 

padding: 1rem;
margin: 0 0 1.5rem;
Four-value order Top, right, bottom, left. 

padding: 8px 16px 12px 16px;
Two-value order Vertical, then horizontal. 

padding: 12px 20px;
Border / rounding Outline the box / round its corners. 

border: 2px solid #24988f;
border-radius: 12px;
Width / max-width Set preferred width and a maximum. 

width: 100%;
max-width: 70rem;
Centre a block Use auto side margins with a constrained width. 

width: 90%;
max-width: 70rem;
margin-inline: auto;
Height / min-height Fixed height / allow at least this height. 

min-height: 12rem;
Overflow Allow scrolling when content exceeds a box. 

overflow-x: auto;

Content-box size excludes padding and border. Vertical block margins can collapse; Flexbox and Grid layouts behave differently.

12 | FLEXBOX

Flexbox reference
Item Use and example
Flex container Lay out direct children along a main axis. 

.row {
  display: flex;
  gap: 1rem;
}
Direction / wrapping Choose axis direction and allow extra lines. 

flex-direction: row;
flex-wrap: wrap;
Main-axis alignment Distribute children along the main axis. 

justify-content: space-between;
Cross-axis alignment Align children on the cross axis. 

align-items: center;
Grow / shrink / basis A flexible child with a 16rem starting basis. 

flex: 1 1 16rem;
Centre both ways Axes depend on flex-direction. 

display: flex;
justify-content: center;
align-items: center;

Flexbox is useful for navigation, toolbars and one-dimensional arrangements. Properties on a container affect its direct flex items.

13 | CSS GRID

Css grid reference
Item Use and example
Two equal columns Two tracks that can shrink without min-content overflow. 

display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;
Responsive card tracks Fit as many minimum-sized tracks as available. 

display: grid;
grid-template-columns:
  repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
gap: 1rem;
Span every column A grid item spans all the explicit columns. 

grid-column: 1 / -1;
Track sizing Specify a sidebar and flexible content track. 

grid-template-columns: 14rem minmax(0, 1fr);
Item alignment Align items within their grid areas. 

align-items: start;
justify-items: stretch;

Grid is useful for rows and columns together. fr distributes available track space; gap creates gutters between tracks.

14 | RESPONSIVE DESIGN AND IMAGES

Responsive design and images reference
Item Use and example
Small-screen rule Apply these rules when the viewport is at most 700px. 

@media (max-width: 700px) {
  .cards {
    grid-template-columns: 1fr;
  }
}
Responsive image Preserve proportions and avoid oversized images. 

img {
  max-width: 100%;
  height: auto;
}
Size and centre one image Use an image class for deliberate sizing. 

.lesson-image {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  margin-inline: auto;
}
Crop into a frame cover may crop; contain preserves the whole image. 

.thumbnail {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
Fluid font size A minimum, preferred value and maximum. 

font-size: clamp(1.5rem, 4vw, 3rem);
Relative units Root font / current font / viewport dimensions. 

1rem /* root font size */
1em  /* depends on property/context */
1vw  /* 1% of viewport width */
1vh  /* 1% of viewport height */

15 | POSITION, VISIBILITY AND EFFECTS

Position, visibility and effects reference
Item Use and example
Relative Keep normal space; establish positioning context. 

position: relative;
Absolute Remove from normal flow; use containing-block rules. 

position: absolute;
top: 1rem;
right: 1rem;
Fixed Usually position relative to the viewport. 

position: fixed;
bottom: 1rem;
right: 1rem;
Sticky Stick within scrolling/containing-block limits. 

position: sticky;
top: 0;
Layer order Applies within stacking-context rules. 

z-index: 10;
Hide and remove layout Also normally removes content from accessibility tree. 

display: none;
Invisible but keep layout Different from removing its layout space. 

visibility: hidden;
Shadow Add a visual shadow. 

box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
Transition Animate a specific changing property. 

transition: background-color 0.2s ease;
Reduced motion Respect visitors who request less movement. 

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
}

Absolute positioning often uses the nearest positioned ancestor, but other properties can establish containing blocks too. Avoid positioning for ordinary page flow.

16 | VARIABLES, CASCADE AND COMMON FIXES

Variables, cascade and common fixes reference
Item Use and example
Custom property Define a reusable CSS value. Use it via var(). 

:root {
  --accent: #24988f;
}
.card {
  border-color: var(--accent);
}
Specificity Within the same origin/layer context: ID beats class, class beats type. 

/* #result is more specific than .notice. */
Source order If relevant priority and specificity tie, later wins. 

.notice { color: navy; }
.notice { color: darkgreen; }
Inheritance Some properties, such as color, inherit. Not all do. 

body {
  color: #243332;
}
button {
  font: inherit;
}
List markers Use square list markers. 

ul {
  list-style-type: square;
}
Collapsed table borders Join adjacent cell borders. 

table {
  border-collapse: collapse;
}
th, td {
  padding: 0.75rem;
  text-align: left;
}

The cascade also considers origins, importance and layers. Use browser DevTools to inspect matched rules rather than solving every conflict with !important.

17 | ACCESSIBILITY QUICK CHECK

Accessibility quick check reference
Item Use and example
Meaningful links Make the destination clear from the label. 

<a href="projects.html">View robotics projects</a>
Skip link Let keyboard visitors jump to main content. 

<a href="#main-content">Skip to content</a>
<main id="main-content">...</main>
Visible labels Do not rely on a placeholder alone. 

<label for="email">Email : </label>
<input id="email" name="email" type="email">
Native controls Use buttons for actions, links for navigation. 

<button type="button">Show explanation</button>
Image alternatives Describe useful meaning; use empty alt for decoration. 

<img src="chart.png" alt="Scores rise from 4 to 9">
Focus and contrast Keep focus visible; do not communicate only by colour. 

/* Add a text label as well as a status colour. */

Test by keyboard, zoom and a narrow viewport. Semantic HTML helps but does not by itself guarantee an accessible page.

18 | MINIMAL STARTER PAGE

Create index.html and styles.css in the same VS Code folder. Save both, then open or preview index.html in your browser.

index.html


<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My first page</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>My project</h1>
  </header>
  <main>
    <section class="card">
      <h2>About this project</h2>
      <p>A short introduction goes here.</p>
      <a href="about.html">Read more</a>
    </section>
  </main>
</body>
</html>

styles.css


* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #243332;
}
header,
main {
  width: 90%;
  max-width: 70rem;
  margin-inline: auto;
}
.card {
  margin-block: 1.5rem;
  padding: 1.5rem;
  border: 2px solid #24988f;
  border-radius: 12px;
}
a:focus-visible {
  outline: 3px solid #24988f;
  outline-offset: 3px;
}

Create about.html before using the example’s Read more link. No JavaScript or extra installation is needed for this starter.

QUICK FIXES BEFORE YOU LEAVE

  • CSS not loading? Check the href, filename, path and saved file.
  • Selector not working? Check the class/ID spelling and cascade.
  • Layout too wide? Check fixed widths, box sizing and long content.
  • Image too big? Give it a class, max-width and height: auto.
  • Form value missing? Check its name and disabled state.

BACK TO HTML & CSS

Reference: HTML elements · CSS reference