Session 12 — Styling lists, tables, and forms

You will apply the box model and selectors to the page's utility elements: lists (list-style, removing bullets/indentation, divider rows), tables (border-collapse, cell borders/padding, header fills, :nth-child zebra stripes), and forms (attribute selectors like input[type="text"], :focus states, font: inherit, ::placeholder, and button styling).

Plan: ideas → worked styles → bridge → short drills → reveal.

Time: about 55–65 minutes if you name the target elements for every rule before reading the reveal.

Session 12 — Styling lists, tables, and forms

The one-paragraph story

The box model and text properties, applied to the page's utility elements: lists get custom bullets and spacing; tables get borders, header styling, and zebra stripes; forms get tidy fields, focus states, and readable labels. None of this is new machinery — it is the same selectors, boxes, and colours — but each element has specific properties worth knowing (list-style, border-collapse, :focus, ::placeholder). This session makes the Harbor Café's menu, hours table, and contact form look intentional rather than default.

---

Styling lists

Three properties shape a list:

ul {
  list-style-type: square;   /* disc | circle | square | none */
  list-style-position: outside;  /* inside | outside */
}

• list-style-type — the bullet or numbering style. none removes the marker entirely (the standard trick when a ul is actually a navigation bar, Session 13).
• list-style-position — whether the marker sits inside the item's text flow (inside) or outside it (outside, the default).
• list-style-image — replaces the marker with a small image; rarely needed now that emoji and CSS shapes are easy.

A common pattern is removing markers and padding from a nav list:

nav ul {
  list-style: none;      /* shorthand for the type  */
  padding: 0;
  margin: 0;
}

list-style: none + zero padding kills the bullets and the indentation, leaving a clean row of links to be laid out in Session 13.

---

Styling tables

Tables have their own box rules. The key property is border-collapse:

table {
  border-collapse: collapse;   /* separate | collapse */
  width: 100%;
}
th, td {
  border: 1px solid #dddddd;
  padding: 8px 12px;
}

• border-collapse: collapse — neighbouring cells share one border line instead of each drawing its own (the separate default doubles up borders and adds gaps). Almost every table wants collapse.
• Borders on th/td — apply the border to the cells, not (only) the table; the table's own border is the outer frame.
• padding inside cells is the breathing room; without it, text touches the cell edges.

Header and stripe styling completes the look:

th {
  background-color: #1f3a5f;
  color: #ffffff;
  text-align: left;
}
tbody tr:nth-child(even) {
  background-color: #f2f2f2;
}

• th gets the accent background and white text.
• tr:nth-child(even) selects every even-numbered row — the zebra stripe. The :nth-child() pseudo-class is the tool for "every other one", and it is not limited to tables.

Note thead/tbody/tfoot from Session 6 become the hooks: thead th { … } styles only the header row group.

---

Styling forms

Form controls are boxes like any other, plus states:

input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #cccccc;
  border-radius: 4px;
  font: inherit;          /* match the page font */
}
input:focus,
textarea:focus {
  border-color: #1f3a5f;
  outline: 2px solid #1f3a5f;
}

Two techniques are worth naming:

• [type="text"] — an attribute selector. It matches input elements with that exact type attribute. input[type="email"] styles only email fields. (Without the attribute part, input matches every input including buttons and checkboxes.)
• :focus — the moment the field is selected for typing (via click or Tab). A visible focus change is how keyboard users know where they are. The default browser outline is often removed and replaced with a custom border/outline — but never remove :focus styling entirely; accessibility depends on it.

Two more details:

• font: inherit — form controls do not inherit the page font by default; setting font: inherit makes them match the rest of the site instead of the browser default.
• ::placeholder — styles the faint hint text: ::placeholder { color: #999999; }.

---

Putting it together

/* Lists */
.menu-list {
  list-style: none;
  padding: 0;
}
.menu-list li {
  padding: 6px 0;
  border-bottom: 1px solid #eeeeee;
}

/* Tables */
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #ddd; padding: 8px 12px; }
th { background-color: #1f3a5f; color: #ffffff; }

/* Forms */
label { display: block; margin: 8px 0 4px; }
input, textarea, select { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }
input:focus, textarea:focus { border-color: #1f3a5f; }

Read it as three mini-systems: the menu list becomes a divider-lined list without bullets; the hours table gets collapsed borders, a dark header, and padded cells; the form gets stacked full-width fields (label { display: block } makes the label sit on its own line) with focus feedback.

---

Pitfalls to watch for

• border-collapse forgotten — tables get doubled borders and gaps between cells.
• input selector styling buttons — input[type="text"] and friends, or buttons look wrong when styled as text fields.
• Removing :focus entirely — keyboard users lose their place; always restyle it, never delete it.
• font: inherit missing on fields — controls keep the browser's font and clash with the page.
• Bullets removed without zeroing padding — list-style: none alone leaves the indentation gap.

Session 12 — Worked examples

Example A — The menu list without bullets

.menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu-list li {
  padding: 8px 0;
  border-bottom: 1px solid #eeeeee;
}

The ul (which in HTML wraps the café menu categories) loses its bullets and indentation; each li becomes a padded row separated by a hairline. The result is a clean divider-list — the standard menu look. Removing list-style and padding: 0 matters: the bullet disappears but the indentation stays unless padding is zeroed.

---

Example B — The hours table

table {
  border-collapse: collapse;
  width: 100%;
}
th, td {
  border: 1px solid #dddddd;
  padding: 8px 12px;
}
th {
  background-color: #1f3a5f;
  color: #ffffff;
  text-align: left;
}
tbody tr:nth-child(even) {
  background-color: #f2f2f2;
}

Walk the rules against the Session 6 hours table:

1. border-collapse: collapse — adjacent cells share borders; no doubled lines, no gaps.
2. th, td — every cell gets a light border and padding.
3. th — the header row group gets the deep blue fill and white text.
4. tbody tr:nth-child(even) — even data rows (the 2nd, 4th, …) get a faint grey stripe. The thead row is not affected because it is not in tbody.

---

Example C — The contact form fields

label {
  display: block;
  margin-bottom: 4px;
}
input[type="text"],
input[type="email"],
textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #cccccc;
  border-radius: 4px;
  font: inherit;
}
input:focus,
textarea:focus {
  border-color: #1f3a5f;
  outline: 2px solid rgba(31, 58, 95, 0.3);
}

• label { display: block; } puts each label on its own line above its field.
• The attribute selector list catches exactly the text-like fields — not the submit button, which stays a button.
• width: 100% stretches fields to their container; font: inherit matches the page's typeface.
• On focus, the field's border turns deep blue and a translucent outline appears — keyboard users can see where they are.

---

Example D — Attribute selectors in action

input[type="submit"] {
  background-color: #1f3a5f;
  color: #ffffff;
  border: none;
  padding: 10px 16px;
  border-radius: 4px;
}

input[type="submit"] targets only the submit button: deep blue fill, white text, comfortable padding. The plain input selector (without [type=…]) would have applied the text-field rules from Example C to the button too — a classic collision. The attribute selector is the precision tool.

---

Example E — Placeholder text

::placeholder {
  color: #999999;
  font-style: italic;
}

The faint hint text ("Your name", "Your email") renders grey and italic. ::placeholder styles only the placeholder, never the value the visitor types.

---

Example F — Zebra stripes beyond tables

li:nth-child(odd) {
  background-color: #faf7f2;
}

:nth-child(odd) also works on lists — odd items get the warm off-white. The same selector family that stripes tables stripes any repeated group.