Connecting HTML and CSS

CSS has its own course. This lesson covers the HTML side: how styles get into a page, and how to write markup that's easy to style.

Three ways to add CSS

<head>
  <meta charset="utf-8">
  <title>Styles</title>
  <!-- 1. External stylesheet: the normal way -->
  <link rel="stylesheet" href="/css/site.css">
  <link rel="stylesheet" href="/css/print.css" media="print">

  <!-- 2. A style element -->
  <style>
    .notice { border-left: 4px solid orange; padding: 0.5rem 1rem; }
  </style>
</head>
<body>
  <p class="notice">We're closed on public holidays.</p>
  <!-- 3. An inline style attribute -->
  <p style="color: darkred;">Sold out today.</p>
</body>

• External stylesheets are cached by the browser and shared by every page. Use them for almost everything.
• The media attribute applies a stylesheet only when the media query matches (here: when printing). The browser still downloads it, at low priority.
• style elements suit small, page-specific styles and critical CSS inlined for speed (Level 3).
• Inline style attributes are hard to maintain, can't use media queries or :hover, and are blocked by strict Content Security Policies. Use them rarely — or for values set by JavaScript.

Stylesheets in the head are render-blocking: the browser waits for them before painting, which prevents a flash of unstyled content. Keep them small.

Hooks for styling

<article class="card card--featured" id="rye" data-state="sold-out">
  <h2 class="card__title">Rye loaf</h2>
  <p class="card__price">£4.20</p>
</article>

• Use classes for styling; keep ids for fragment links, labels, and ARIA references (an id selector is hard to override in CSS).
• Name classes by what things are (card, price), not how they look (red-text, left-box).
• Styling state through attributes ([aria-expanded="true"], [data-state="sold-out"]) keeps the visual state and the accessible state in sync.

HTML is not for presentation

Old presentational elements and attributes — font, center, big, bgcolor, align, border on tables — are obsolete. The validator reports them:

<!-- Wrong: presentational HTML -->
<center><font color="red">Sale!</font></center>
<table border="1" bgcolor="yellow"><tr><td>1</td></tr></table>

error: The 'center' element is obsolete. Use CSS instead.
error: The 'font' element is obsolete. Use CSS instead.
warning: The 'border' attribute on the 'table' element is obsolete. Consider specifying 'img { border: 0; }' in CSS instead.
warning: The 'bgcolor' attribute on the 'table' element is obsolete. Use CSS instead.

The same result belongs in CSS: text-align: center, color: red, border: 1px solid, background: yellow.

Accessibility and CSS

CSS can change what people see without changing the HTML order or meaning. Remember that screen readers and keyboard users follow the source order, and display: none hides content from everyone — including screen readers.