HTML and CSS Reference

Structure, selectors, the box model, flexbox.

The skeleton — every page, every time

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shown in the browser tab</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <!-- page content -->

</body>
</html>

Structure — lesson 11

Forms and input — lesson 11

<form>
  <label for="city">City</label>
  <input id="city" type="text" placeholder="Toronto">
  <input id="qty" type="number" min="0">
  <select id="size"><option value="s">Small</option></select>
  <textarea id="notes" rows="4"></textarea>
  <button type="submit">Save</button>
</form>

<form> groups the inputs that are sent together, and a <button> inside it submits the form.

A <label for="…"> matching an input's id is what makes the label clickable and readable by a screen reader.

Selectors — lesson 11

A class styles many elements. An id names exactly one.

Properties

Custom properties — lesson 11

Declare a value once on :root and read it back anywhere with var(). Changing the declaration changes every use of it.

:root {
  --brand: #0b5a8a;
  --rule: #d9e0e6;
}

h1     { color: var(--brand); }
.panel { border: 1px solid var(--rule); }

A colour used in eleven places is written down once. Real codebases call these design tokens.

The box model

Content, then padding, then border, then margin. Add this once and sizes stop surprising you:

*, *::before, *::after { box-sizing: border-box; }

Units

In-page links — lesson 12

An href that starts with # links to the element on the same page whose id is the name after the #. The two names must match exactly, capitals included.

<a href="#hours">Hours</a>

<section id="hours">Monday to Saturday, 9:00 to 20:00.</section>

Flexbox — lesson 12

Flexbox arranges the items directly inside a container. Six of its properties go in the container's rule, and flex goes in the rule for the items.

.event-list {
  display: flex;                    /* on the CONTAINER */
  flex-direction: row;              /* row (the default) or column */
  justify-content: space-between;   /* along the direction */
  align-items: center;              /* across the direction */
  gap: 16px;                        /* space between the items */
  flex-wrap: wrap;                  /* allow a second line */
}

.event {
  flex: 1 1 240px;                  /* on each ITEM: grow, shrink, starting width */
}

The most common mistake is putting display: flex in the rule for the items instead of the container. The element whose children need arranging is the one that gets it.

Media queries — lesson 12

Rules inside the block apply only when the condition is true; rules outside it apply always. Write the wide layout as your normal rules, and put the query after them, at the end of the file, to change what does not survive at a narrow width. A query written above a rule with the same selector is overruled by it.

@media (max-width: 600px) {
  .masthead {
    flex-direction: column;
  }

  .event-list {
    flex-direction: column;
  }
}

max-width: 600px means "600 pixels wide or narrower". Test it by narrowing the browser window; the query applies live, with no reload. Changing flex-direction to column is often the only change a container needs, and a query that changes only a colour has not made the page usable.

Grid — lesson 13

Flexbox lays items out in one direction at a time; Grid handles rows and columns together, which is why a card grid is a Grid job. display: grid and grid-template-columns go in the container's rule.

.branch-page {
  display: grid;
  grid-template-columns: 220px 1fr;   /* a fixed column, then one share of the rest */
  gap: 24px;
}

.event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));   /* as many 160px+ columns as fit */
  gap: 16px;
}

Keyboard focus — lesson 13

A rule whose selector ends in :focus-visible styles the element the Tab key has reached. outline is written like border but is drawn outside it and takes up no space. Never remove the outline with outline: none.

a:focus-visible,
button:focus-visible {
  outline: 3px solid darkorange;
  outline-offset: 2px;
}

Not taught in class — Level 4 material