Hello, CSS

Your pages have structure. Now let's make them look good. CSS describes how HTML elements should be displayed: colours, fonts, spacing, layout. The same HTML can look completely different with different CSS.

Your first CSS

Try color: tomato; or font-size: 30px;.

A rule has:

• a selector: which elements (h1);
• declarations inside { }: what to change, each as property: value;.

Forget a semicolon or a brace and the rule (or the next one) may be ignored, with no error message, so check your punctuation when something doesn't work.

Three ways to add CSS

<!-- 1. A linked stylesheet: the normal way for real sites -->
<head>
  <link rel="stylesheet" href="style.css">
</head>
 
<!-- 2. A <style> element in the page: fine for one page (and for these lessons) -->
<style>
  p { color: navy; }
</style>
 
<!-- 3. A style attribute on one element: avoid, except for quick tests -->
<p style="color: red;">Just this paragraph</p>

With a linked stylesheet, every page shares one style.css: change it once and the whole site updates. In these lessons we'll use <style> so everything fits in one editor.

Selectors: type, class and id

An element can have several classes (class="note warning") and gets the styles of each. Classes are the workhorse of CSS: reusable and flexible. Use ids sparingly.

/* … */ is a CSS comment.

Colours and backgrounds

Colours can be names (teal, tomato), hex (#0f766e), rgb() or hsl(). Day 9 covers them properly.

Fonts and text

• font-family lists fonts in order of preference; the browser uses the first one it has. End with a generic family: serif, sans-serif, monospace or system-ui (the device's own font).
• font-size, font-weight (400 normal, 700 bold), font-style (italic).
• text-align: left, center, right.
• text-decoration: underline or none, often for links.

Recap

• A rule = selector { property: value; }.
• Add CSS with a linked .css file (best), a <style> element, or a style attribute.
• Select by type (p), class (.note), id (#intro); group with commas.
• Colours, backgrounds and fonts: color, background-color, font-family, font-size, font-weight, text-align.

Tomorrow: more powerful selectors, and what happens when two rules disagree.