HTML and CSS, 1–32

1
2
3
4
5
6
7
8
9
10
11<h1>Jibowu Park</h1>
<p>A working bus terminal on the Lagos mainland, and the busiest of the four.</p>

<h2>Getting there</h2>
<p>Six routes stop outside the gate. The walk from Yaba takes about twenty minutes.</p>

<h3>By bus</h3>
<p>Any vehicle marked for Oyingbo passes the entrance.</p>

<h2>Opening hours</h2>
<p>Ticketing opens at 05:00 and the last departure boards at 21:30.</p>

1
2
3
4
5
6
7
8
9
10
11
12
13body {
  max-width: 62ch;          /* a readable measure, in characters */
  color: #17171a;
}

h1 { font-size: 1.6rem; margin: 0 0 0.4rem; }
h2 { font-size: 1.15rem; margin: 1.4rem 0 0.3rem; }
h3 { font-size: 1rem; margin: 1rem 0 0.3rem; }

p {
  margin: 0 0 0.8rem;       /* the gap between paragraphs, not a <br> */
  line-height: 1.6;
}

1
2
3<p>The last bus leaves at <strong>21:30</strong>, not 22:00.</p>
<p>Bring the ticket <em>and</em> the receipt; one alone is not enough.</p>
<p>The park is named after the <i lang="yo">jibowu</i> tree that stood at the gate.</p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15strong {
  font-weight: 700;         /* already the default; stated so it is deliberate */
  color: #a3341f;
}

/* em stays italic. Restyling it to bold would make it look like strong while
   still being announced as emphasis, so the two would disagree. */
em {
  font-style: italic;
}

i[lang] {
  font-style: italic;
  color: #5c5c66;
}

1
2
3
4
5
6
7
8
9<p><a href="#fares">Jump to the fares table</a></p>

<p><a href="https://example.com/timetable.pdf" target="_blank" rel="noopener noreferrer">
  Full timetable (PDF, opens in a new tab)</a></p>

<p><a href="mailto:tickets@example.com?subject=Refund">Email the ticket office</a></p>

<h2 id="fares">Fares</h2>
<p>Lagos to Abuja is &#8358;18,000 one way.</p>

1
2
3
4
5
6
7
8
9
10
11
12a {
  color: #3055d8;
  text-decoration: underline;   /* keep it; the underline is the affordance */
  text-underline-offset: 2px;
}

a:hover { color: #2543b4; }

a:focus-visible {
  outline: 2px solid #17171a;
  outline-offset: 2px;
}

1
2
3
4
5
6
7
8
9
10
11<img
  class="shot"
  width="240" height="150"
  alt="Six bays under a corrugated roof, each with a bus reversed into it"
  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='150'%3E%3Crect width='240' height='150' fill='%233055d8'/%3E%3Crect y='96' width='240' height='54' fill='%230b3a8f'/%3E%3C/svg%3E">

<img
  class="rule"
  width="240" height="8"
  alt=""
  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='8'%3E%3Crect width='240' height='8' fill='%23ffd75e'/%3E%3C/svg%3E">

1
2
3
4
5
6
7
8
9
10
11img {
  display: block;      /* removes the few pixels of gap an inline image leaves */
  max-width: 100%;     /* never wider than the column */
  height: auto;        /* so the aspect ratio survives the shrink */
  border-radius: 6px;
}

.rule {
  margin-top: 10px;
  border-radius: 2px;
}

1
2
3
4
5
6
7<figure class="fig">
  <img
    width="240" height="140"
    alt="A queue of about thirty people along a painted kerb"
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='140'%3E%3Crect width='240' height='140' fill='%23e9ecf6'/%3E%3Crect x='16' y='108' width='208' height='10' fill='%233055d8'/%3E%3C/svg%3E">
  <figcaption>Boarding for the 06:30 to Abuja. Photographed in March.</figcaption>
</figure>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22.fig {
  max-width: 240px;
  margin: 0;
  padding: 8px;
  border: 1px solid #c9cad1;
  border-radius: 8px;
  background: #f7f7f8;
}

.fig img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.fig figcaption {
  margin-top: 8px;
  color: #5c5c66;
  font-size: 0.85rem;
  line-height: 1.45;
}

1
2
3
4
5
6
7
8
9
10<picture>
  <!-- Only on a wide viewport. The preview frame is narrower than this, so the
       fallback below is what you see rendered. -->
  <source media="(min-width: 60em)" srcset="park-wide.svg">
  <img
    class="hero"
    width="240" height="120"
    alt="The terminal frontage, seen from the road"
    src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120'%3E%3Crect width='240' height='120' fill='%230b3a8f'/%3E%3Crect x='24' y='72' width='192' height='24' fill='%23ffd75e'/%3E%3C/svg%3E">
</picture>

1
2
3
4
5
6
7
8
9
10
11picture {
  display: block;
  max-width: 240px;
}

.hero {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13<h2>Buying a ticket</h2>
<ol start="2">
  <li>Join the queue at the window marked for your route.</li>
  <li>Pay and take the printed slip.</li>
  <li>Show the slip at the bay.</li>
</ol>

<h2>On board</h2>
<ul>
  <li>Air conditioning</li>
  <li>Reclining seats</li>
  <li>One free bag</li>
</ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14ol, ul {
  margin: 0 0 1rem;
  padding-left: 1.4rem;
}

li {
  margin-bottom: 0.3rem;
  line-height: 1.5;
}

ol li::marker {
  color: #3055d8;
  font-weight: 600;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14<ul class="routes">
  <li>Northbound
    <ul>
      <li>Abuja</li>
      <li>Kano</li>
    </ul>
  </li>
  <li>Eastbound
    <ul>
      <li>Enugu</li>
    </ul>
  </li>
  <li>Local shuttle</li>
</ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23.routes {
  margin: 0;
  padding-left: 1.3rem;
  list-style-type: disc;
}

/* Second level: a different marker, so depth is visible without indentation
   alone carrying the message. */
.routes ul {
  margin: 0.3rem 0 0.5rem;
  padding-left: 1.2rem;
  list-style-type: circle;
}

.routes > li {
  margin-bottom: 0.35rem;
  font-weight: 600;
}

.routes ul li {
  font-weight: 400;
  color: #5c5c66;
}

1
2
3
4
5
6
7
8
9
10
11<dl class="spec">
  <dt>Departures</dt>
  <dd>05:00 to 21:30, every day</dd>

  <dt>Bays</dt>
  <dd>Six, lettered A to F</dd>

  <dt>Payment</dt>
  <dd>Cash at the window</dd>
  <dd>Transfer, with the slip shown at the bay</dd>
</dl>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22.spec {
  display: grid;
  grid-template-columns: max-content 1fr;   /* term column hugs its widest term */
  gap: 6px 16px;
  margin: 0;
  max-width: 380px;
}

.spec dt {
  font-weight: 600;
  color: #17171a;
}

.spec dd {
  margin: 0;               /* browsers indent dd by 40px; reset it */
  color: #5c5c66;
}

/* The second description of a term sits under the first, in the value column. */
.spec dd + dd {
  grid-column-start: 2;
}

1
2
3
4
5
6
7
8
9
10
11<ul class="ticks" role="list">
  <li>Ticket printed</li>
  <li>Bag tagged</li>
  <li>Seat assigned</li>
</ul>

<ol class="steps">
  <li>Queue</li>
  <li>Pay</li>
  <li>Board</li>
</ol>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26/* list-style: none is what drops the role in Safari, which is why the markup
   carries role="list" as well. */
.ticks {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}

.ticks li::before {
  content: '\2713\00a0';   /* tick, then a non-breaking space */
  color: #17734b;
  font-weight: 700;
}

.steps {
  margin: 0;
  padding-left: 2.2rem;
}

/* ::marker styles the number the browser already generates, so the counter and
   the list semantics stay the browser's job. */
.steps li::marker {
  content: 'Step ' counter(list-item) '. ';
  color: #3055d8;
  font-weight: 600;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29<table class="fares">
  <caption>Fares from Jibowu, one way</caption>
  <thead>
    <tr>
      <th scope="col">Route</th>
      <th scope="col">Seats</th>
      <th scope="col">Fare</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Abuja</th>
      <td>14</td>
      <td>&#8358;18,000</td>
    </tr>
    <tr>
      <th scope="row">Kano</th>
      <td>30</td>
      <td>&#8358;22,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Total</th>
      <td>44</td>
      <td>&#8358;40,000</td>
    </tr>
  </tfoot>
</table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30.fares {
  border-collapse: collapse;
  font-size: 0.9rem;
}

.fares caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 8px;
  color: #5c5c66;
  font-weight: 600;
}

.fares th,
.fares td {
  padding: 7px 12px;
  border-bottom: 1px solid #c9cad1;
  text-align: left;
}

.fares thead th {
  background: #e9ecf6;
}

.fares tfoot th,
.fares tfoot td {
  border-top: 2px solid #17171a;
  border-bottom: 0;
  font-weight: 700;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25<table class="bays">
  <caption>Bay assignments</caption>
  <thead>
    <tr>
      <th scope="col">Bay</th>
      <th scope="col">Morning</th>
      <th scope="col">Afternoon</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">A</th>
      <td colspan="2">Closed for resurfacing</td>
    </tr>
    <tr>
      <th scope="row">B</th>
      <td rowspan="2">Abuja</td>
      <td>Kano</td>
    </tr>
    <tr>
      <th scope="row">C</th>
      <td>Enugu</td>
    </tr>
  </tbody>
</table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24.bays {
  border-collapse: collapse;
  font-size: 0.9rem;
}

.bays caption {
  text-align: left;
  padding-bottom: 8px;
  color: #5c5c66;
  font-weight: 600;
}

.bays th,
.bays td {
  padding: 7px 12px;
  border: 1px solid #c9cad1;
  text-align: left;
}

.bays thead th { background: #e9ecf6; }

/* A merged cell reads better centred over the columns it covers. */
.bays td[colspan] { text-align: center; color: #5c5c66; }
.bays td[rowspan] { vertical-align: middle; background: #f7f7f8; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16<table class="grid">
  <caption>Departures</caption>
  <thead>
    <tr>
      <th scope="col">Time</th>
      <th scope="col">Route</th>
      <th scope="col">Bay</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>06:30</td><td>Abuja</td><td>B</td></tr>
    <tr><td>08:00</td><td>Kano</td><td>C</td></tr>
    <tr><td>11:15</td><td>Enugu</td><td>D</td></tr>
    <tr><td>14:45</td><td>Ibadan</td><td>A</td></tr>
  </tbody>
</table>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34.grid {
  border-collapse: collapse;   /* one border per edge, not two side by side */
  width: 100%;
  max-width: 340px;
  font-size: 0.9rem;
}

.grid caption {
  text-align: left;
  padding-bottom: 8px;
  color: #5c5c66;
  font-weight: 600;
}

.grid th,
.grid td {
  padding: 7px 10px;
  border-bottom: 1px solid #c9cad1;
  text-align: left;
}

.grid thead th {
  background: #17171a;
  color: #ffffff;
}

/* Counting inside tbody, so the header is never striped. */
.grid tbody tr:nth-child(even) {
  background: #f2f3f5;
}

.grid tbody tr:hover {
  background: #e9ecf6;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18<form class="book" action="#" method="post">
  <p class="row">
    <label for="name">Full name</label>
    <input id="name" name="name" type="text" autocomplete="name" required>
  </p>

  <p class="row">
    <label for="email">Email</label>
    <input id="email" name="email" type="email" autocomplete="email" required>
  </p>

  <p class="row">
    <label for="travel">Travel date</label>
    <input id="travel" name="travel" type="date" required>
  </p>

  <button type="submit">Reserve</button>
</form>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39.book { max-width: 300px; }

.row {
  display: grid;
  gap: 4px;
  margin: 0 0 12px;
}

.row label {
  font-size: 0.85rem;
  font-weight: 600;
}

.row input {
  padding: 8px 10px;
  border: 1px solid #8e8e98;
  border-radius: 6px;
  font: inherit;            /* inputs do not inherit typography by default */
}

.row input:focus-visible {
  outline: 2px solid #3055d8;
  outline-offset: 1px;
}

button {
  padding: 9px 16px;
  border: 0;
  border-radius: 6px;
  background: #3055d8;
  color: #ffffff;
  font: inherit;
  cursor: pointer;
}

button:focus-visible {
  outline: 2px solid #17171a;
  outline-offset: 2px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18<fieldset class="seats">
  <legend>Seat class</legend>

  <p class="opt">
    <input id="cls-std" name="seatclass" type="radio" value="standard" checked>
    <label for="cls-std">Standard</label>
  </p>

  <p class="opt">
    <input id="cls-exec" name="seatclass" type="radio" value="executive">
    <label for="cls-exec">Executive</label>
  </p>

  <p class="opt">
    <input id="cls-sleep" name="seatclass" type="radio" value="sleeper">
    <label for="cls-sleep">Sleeper</label>
  </p>
</fieldset>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32.seats {
  max-width: 280px;
  margin: 0;
  padding: 10px 14px 14px;
  border: 1px solid #c9cad1;
  border-radius: 8px;
}

.seats legend {
  padding: 0 6px;
  font-weight: 600;
}

.opt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
}

.opt input {
  accent-color: #3055d8;   /* tints the native control, no rebuild needed */
  width: 16px;
  height: 16px;
}

.opt input:focus-visible {
  outline: 2px solid #17171a;
  outline-offset: 2px;
}

.opt label { cursor: pointer; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18<p class="row">
  <label for="pickup">Pick-up point</label>
  <select id="pickup" name="pickup">
    <option value="jibowu" selected>Jibowu</option>
    <option value="ojota">Ojota</option>
    <option value="berger">Berger</option>
  </select>
</p>

<p class="check">
  <input id="bag" name="bag" type="checkbox" value="yes">
  <label for="bag">I am carrying a bag over 20kg</label>
</p>

<p class="row">
  <label for="notes">Anything we should know</label>
  <textarea id="notes" name="notes" rows="3" maxlength="200"></textarea>
</p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40.row {
  display: grid;
  gap: 4px;
  margin: 0 0 12px;
  max-width: 300px;
}

.row label,
.check label { font-size: 0.9rem; }

.row label { font-weight: 600; }

select,
textarea {
  padding: 8px 10px;
  border: 1px solid #8e8e98;
  border-radius: 6px;
  font: inherit;
}

textarea {
  resize: vertical;    /* let it grow downwards, not sideways out of the column */
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 12px;
  max-width: 300px;
}

.check input { accent-color: #3055d8; margin-top: 3px; }

select:focus-visible,
textarea:focus-visible,
.check input:focus-visible {
  outline: 2px solid #3055d8;
  outline-offset: 1px;
}

1
2
3
4
5
6
7
8
9<p class="field">
  <label for="plate">Vehicle plate</label>
  <input
    id="plate" name="plate" type="text"
    inputmode="latin" autocomplete="off"
    pattern="[A-Z]{3}-[0-9]{3}-[A-Z]{2}" minlength="10" maxlength="10"
    required aria-describedby="plate-hint">
  <span class="hint" id="plate-hint">Three letters, three digits, two letters. For example LAG-441-XA.</span>
</p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32.field {
  display: grid;
  gap: 4px;
  max-width: 320px;
  margin: 0;
}

.field label { font-weight: 600; font-size: 0.9rem; }

.field input {
  padding: 8px 10px;
  border: 1px solid #8e8e98;
  border-radius: 6px;
  font: inherit;
  text-transform: uppercase;
}

.field input:focus-visible {
  outline: 2px solid #3055d8;
  outline-offset: 1px;
}

/* Only after the field has been touched, so an untouched form is not all red. */
.field input:user-invalid {
  border-color: #a3341f;
}

.hint {
  color: #5c5c66;
  font-size: 0.8rem;
  line-height: 1.4;
}

1
2<div class="box content">width: 200px, content-box</div>
<div class="box border">width: 200px, border-box</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17.box {
  width: 200px;
  padding: 16px;
  border: 2px solid #3055d8;
  margin-bottom: 10px;
  background: #eef1fd;
  color: #17171a;
  font-size: 0.85rem;
}

.content {
  box-sizing: content-box;   /* the default: 200 + 32 + 4 = 236px on screen */
}

.border {
  box-sizing: border-box;    /* 200px on screen, 164px of it for content */
}

1
2
3
4
5
6<div class="a">margin-bottom: 24px</div>
<div class="b">margin-top: 16px</div>

<div class="parent">
  <div class="child">My 30px top margin stays inside</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26.a {
  margin-bottom: 24px;
  padding: 8px;
  background: #e9ecf6;
}

.b {
  margin-top: 16px;    /* the gap above is 24px, not 40px */
  padding: 8px;
  background: #eef1fd;
}

/* flow-root establishes a new block formatting context, so the child's margin
   is contained instead of poking out through the top of the parent. */
.parent {
  display: flow-root;
  background: #f2f3f5;
  border-radius: 6px;
}

.child {
  margin-top: 30px;
  padding: 8px;
  background: #ffd75e;
  color: #17171a;
}

1
2
3
4<div id="intro">
  <p class="lede">Which colour am I?</p>
  <p>And which colour am I?</p>
</div>

1
2
3
4
5
6
7
8
9p          { color: #5c5c66; }   /* 0,0,1 */
.lede      { color: #17734b; }   /* 0,1,0 */
p.lede     { color: #a3341f; }   /* 0,1,1 */
#intro p   { color: #3055d8; }   /* 1,0,1 — this one wins for both paragraphs */

p {
  margin: 0 0 8px;
  font-size: 0.95rem;
}

1
2
3
4
5<div class="card">
  <p>This paragraph was never given a colour or a font. It inherited both.</p>
  <p><em>So did this emphasis, through two levels.</em></p>
  <input type="text" value="And this control, only because it was told to">
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28.card {
  /* Set once here. Everything textual below picks it up. */
  color: #17171a;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 0.95rem;
  line-height: 1.6;

  /* None of these reach the children. */
  padding: 14px;
  border: 1px solid #c9cad1;
  border-radius: 8px;
  background: #f7f7f8;
}

.card p { margin: 0 0 10px; }

/* Controls do not inherit typography. This is the fix, and it is not optional
   if you want the form to look like the page. */
.card input {
  font: inherit;
  color: inherit;
  padding: 6px 8px;
  border: 1px solid #8e8e98;
  border-radius: 6px;
  background: #ffffff;
  width: 100%;
  box-sizing: border-box;
}

1
2
3
4<div class="swatch hex">#3055d8</div>
<div class="swatch rgb">rgb(48 85 216)</div>
<div class="swatch hsl">hsl(226 68% 40%)</div>
<div class="swatch veil">alpha over the blue</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20.swatch {
  padding: 10px 12px;
  margin-bottom: 6px;
  border-radius: 6px;
  color: #ffffff;
  font-size: 0.85rem;
}

.hex { background: #3055d8; }

.rgb { background: rgb(48 85 216); }        /* the same colour, other notation */

.hsl { background: hsl(226 68% 40%); }     /* same hue, darker */

/* A translucent layer over an opaque one. Alpha applies to this colour only,
   unlike opacity, which fades the element and everything inside it. */
.veil {
  background: rgb(48 85 216);
  box-shadow: inset 0 0 0 999px rgb(23 23 26 / 55%);
}

1
2
3
4
5
6<div class="parent">
  parent, font-size 20px
  <p class="in-em">1.5em &rarr; 30px, because em looks at the parent</p>
  <p class="in-rem">1.5rem &rarr; 24px, because rem looks at the root</p>
  <p class="in-ch">max-width 30ch, a measure that tracks the font</p>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15:root { font-size: 16px; }

.parent {
  font-size: 20px;
  padding: 12px;
  border: 1px solid #c9cad1;
  border-radius: 8px;
  background: #f7f7f8;
}

.in-em  { font-size: 1.5em; }    /* 1.5 x 20 = 30px */
.in-rem { font-size: 1.5rem; }   /* 1.5 x 16 = 24px */
.in-ch  { max-width: 30ch; }

.parent p { margin: 0 0 8px; }

1
2
3<p class="prose">Set in whichever of these the reader already has.</p>
<p class="ui">Interface text, using the system font.</p>
<pre class="code">border-collapse: collapse;</pre>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20.prose {
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 1rem;
}

/* system-ui is the operating system's own interface font: no download, and it
   already looks native on every platform. */
.ui {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

.code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.85rem;
  padding: 8px 10px;
  border-radius: 6px;
  background: #f2f3f5;
  color: #17171a;
  overflow-x: auto;
}

1
2
3
4
5
6<div class="wrap">
  <p>Body copy at 16px with a line-height factor of 1.5, so 24px of leading.</p>
  <p class="big">A pull quote at 24px. The same factor gives it 36px, so it never
    collides with itself.</p>
  <h3 class="kicker">Departures board</h3>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19.wrap {
  font-size: 16px;
  line-height: 1.5;      /* a factor, not a length: recomputed per element */
  max-width: 46ch;
}

.big {
  font-size: 24px;       /* inherits the 1.5, so 36px of leading */
}

/* Uppercase set solid looks cramped, so open it up a little. Applied to the
   transform, not to the source text, so the markup stays readable. */
.kicker {
  margin: 14px 0 0;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #5c5c66;
}

1
2
3<div class="panel flat">A flat colour</div>
<div class="panel fade">A two-stop gradient</div>
<div class="panel stripe">Repeating stripes</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23.panel {
  padding: 16px;
  margin-bottom: 8px;
  border-radius: 8px;
  color: #ffffff;
  font-size: 0.9rem;
}

.flat { background-color: #0b3a8f; }

.fade {
  background-image: linear-gradient(135deg, #0b3a8f 0%, #3055d8 100%);
}

/* Hard stops, so each colour ends exactly where the next begins. The text sits
   on the darker of the two, which is the one that has to clear contrast. */
.stripe {
  background-image: repeating-linear-gradient(
    45deg,
    #0b3a8f 0 12px,
    #17307a 12px 24px
  );
}

1
2
3
4
5
6<article class="card">
  <h3 class="card__title">Lagos to Abuja</h3>
  <p class="card__meta">Departs 06:30 &middot; Bay B</p>
  <p class="card__price">&#8358;18,000</p>
  <a class="card__cta" href="#book">Reserve a seat</a>
</article>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33.card {
  box-sizing: border-box;
  max-width: 240px;
  padding: 16px;
  border: 1px solid #e4e5e9;
  border-radius: 12px;
  background: #ffffff;
  /* Two layers: a tight one for the edge, a soft one for the lift. */
  box-shadow: 0 1px 2px rgb(23 23 26 / 8%), 0 10px 24px rgb(23 23 26 / 10%);
}

.card__title { margin: 0 0 4px; font-size: 1rem; }

.card__meta { margin: 0 0 10px; color: #5c5c66; font-size: 0.85rem; }

.card__price { margin: 0 0 12px; font-size: 1.25rem; font-weight: 700; }

.card__cta {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 8px;
  background: #3055d8;
  color: #ffffff;
  text-decoration: none;
  font-size: 0.9rem;
}

.card__cta:hover { background: #2543b4; }

.card__cta:focus-visible {
  outline: 2px solid #17171a;
  outline-offset: 2px;
}

1
2
3
4
5<p>Before them.
  <span class="chip a">inline</span>
  <span class="chip b">inline-block</span>
  <span class="chip c">block</span>
  After them.</p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14.chip {
  width: 130px;              /* the same request for all three */
  padding: 10px;
  background: #eef1fd;
  border: 1px solid #3055d8;
  border-radius: 6px;
  font-size: 0.85rem;
}

.a { display: inline; }        /* width and vertical padding do not apply */

.b { display: inline-block; }  /* stays in the line, but takes the box */

.c { display: block; }         /* breaks the line, takes the box */

1
2
3
4
5<div class="card">
  <span class="badge">3 left</span>
  <h2 class="card__title">Kano, 08:00</h2>
  <p class="card__body">Executive coach, one stop at Kaduna.</p>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23.card {
  position: relative;    /* the anchor: without this the badge escapes */
  box-sizing: border-box;
  max-width: 260px;
  padding: 14px;
  border: 1px solid #c9cad1;
  border-radius: 10px;
  background: #ffffff;
}

.badge {
  position: absolute;
  top: -10px;
  right: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #a3341f;
  color: #ffffff;
  font-size: 0.75rem;
}

.card__title { margin: 0 0 4px; font-size: 1rem; }
.card__body { margin: 0; color: #5c5c66; font-size: 0.85rem; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15<div class="scroller">
  <h2 class="stuck">Departures</h2>
  <p>06:30 Abuja</p>
  <p>08:00 Kano</p>
  <p>11:15 Enugu</p>
  <p>14:45 Ibadan</p>
  <p>17:00 Benin</p>
  <p>19:30 Warri</p>
</div>

<div class="stack">
  <div class="layer under">z-index: 1</div>
  <div class="layer over">z-index: 2</div>
  <div class="layer inert">z-index: 5, and ignored</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56.scroller {
  height: 130px;
  overflow-y: auto;        /* this is the scrolling ancestor sticky works within */
  border: 1px solid #c9cad1;
  border-radius: 8px;
  padding: 0 10px 10px;
}

.stuck {
  position: sticky;
  top: 0;                  /* the threshold; without it, nothing sticks */
  margin: 0 -10px 8px;
  padding: 8px 10px;
  background: #17171a;
  color: #ffffff;
  font-size: 0.9rem;
}

.scroller p { margin: 0 0 6px; font-size: 0.85rem; }

.stack {
  position: relative;
  height: 90px;
  margin-top: 12px;
}

.layer {
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.8rem;
  color: #ffffff;
}

.under {
  position: absolute;
  top: 0; left: 0;
  z-index: 1;
  width: 150px;
  background: #0b3a8f;
}

.over {
  position: absolute;
  top: 22px; left: 40px;
  z-index: 2;
  width: 150px;
  background: #a3341f;
}

/* No position, so the z-index below is thrown away. Left in on purpose. */
.inert {
  z-index: 5;
  width: 200px;
  margin-top: 56px;
  background: #17734b;
}

1
2
3
4
5
6
7
8
9<ul class="board">
  <li><a href="#r1">06:30 Abuja</a></li>
  <li><a href="#r2">08:00 Kano</a></li>
  <li><a href="#r3">11:15 Enugu</a></li>
  <li><a href="#r4">14:45 Ibadan</a></li>
  <li><a href="#r5">17:00 Benin</a></li>
  <li><a href="#r6">19:30 Warri</a></li>
  <li><a href="#r7">21:30 Jos</a></li>
</ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32.board {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 240px;
  border: 1px solid #c9cad1;
  border-radius: 8px;
  overflow: hidden;
}

.board li { border-bottom: 1px solid #e4e5e9; }

/* Items 1, 4 and 7. The +1 is where the run starts, not how many are skipped. */
.board li:nth-child(3n + 1) { background: #eef1fd; }

.board li:last-child { border-bottom: 0; font-weight: 600; }

.board a {
  display: block;
  padding: 8px 12px;
  color: #17171a;
  text-decoration: none;
  font-size: 0.88rem;
}

.board a:hover { background: #3055d8; color: #ffffff; }

/* Not the same rule: a keyboard user gets a ring, a mouse user does not. */
.board a:focus-visible {
  outline: 2px solid #3055d8;
  outline-offset: -2px;
}

1
2
3
4
5
6
7
8<blockquote class="pull">
  <p>The 06:30 leaves at 06:30. That is the whole reputation.</p>
</blockquote>

<p class="field">
  <label class="req" for="phone">Phone</label>
  <input id="phone" name="phone" type="tel" required>
</p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45.pull {
  position: relative;
  margin: 0 0 14px;
  padding: 4px 0 4px 34px;
  max-width: 300px;
  font-size: 0.95rem;
}

/* Decorative, and announced to nobody: alt text on generated content is what
   aria-hidden on the parent would be, so keep it purely visual. */
.pull::before {
  content: '\201C';        /* a left double quotation mark */
  position: absolute;
  left: 0;
  top: -4px;
  font-size: 2.4rem;
  line-height: 1;
  color: #3055d8;
}

.pull p { margin: 0; }

.field { display: grid; gap: 4px; max-width: 240px; }

.req { font-weight: 600; font-size: 0.9rem; }

/* The marker is a hint, not the requirement. The input carries the required
   attribute, so the real state is in the markup and this is only the cue. */
.req::after {
  content: ' (required)';
  color: #a3341f;
  font-weight: 400;
}

.field input {
  padding: 8px 10px;
  border: 1px solid #8e8e98;
  border-radius: 6px;
  font: inherit;
}

.field input:focus-visible {
  outline: 2px solid #3055d8;
  outline-offset: 1px;
}