CSS — Styling Fundamentals

C1 — Styling with CSS

Link an external stylesheet rather than writing inline styles — the scheme's own common-misconceptions note flags inline CSS as a habit to move away from, since external stylesheets are far easier to maintain across a whole site.

<link rel="stylesheet" href="styles.css">

body {
  font-family: "Segoe UI", sans-serif;
  color: #1e293b;
}

nav a {
  color: #166534;
  text-decoration: none;
  margin-right: 16px;
}

button {
  background: #166534;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
}

Colour (color, background), typography (font-family) and text formatting (text-decoration, and properties like font-weight/text-align the same way) are all applied the same way — a selector, then property/value pairs.

Why external over inline

<p style="color: green;"> (inline) works for one element, once. An external stylesheet rule (p { color: green; }) applies everywhere automatically, and changing your brand colour later means editing one line instead of hunting through every page.

Styling tables

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
}

th {
  background: #f0fdf4;
  font-weight: 600;
}

border-collapse: collapse removes the double-border gap browsers add between table cells by default — almost always what you want for a clean-looking table.

Styling forms

label {
  display: block;
  margin-top: 12px;
  font-weight: 600;
}

input, textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-family: inherit;
}

input:focus, textarea:focus {
  border-color: #166534;
  outline: none;
}

font-family: inherit matters here specifically: form fields don't inherit the page's font by default in every browser, so without this line your inputs can end up in a different typeface from the rest of the page.

Task

Create styles.css and link it from every page of your site. Style your navigation, buttons, and the table and form you built in Lesson 16 — all four, not just the first two — consistently, matching the visual style you developed in Lesson 10.