pagehaus

Learn HTML · Lesson 5 of 8 · about 15 minutes

Style it with CSS

HTML says what each part of a page is. CSS says how it should look: colours, fonts, spacing, layout. In this lesson you'll write one stylesheet that styles every page of your site at once.

What a CSS rule looks like

CSS is a list of rules. Each rule picks some elements, and says how they should look:

h1 {
  color: #b8692c;
}

In the examples on this page, the CSS is in a <style> element at the top, so you can change the CSS and the HTML in one place. On your site, it goes in a file of its own; you'll set that up next.

Try it: change the code

What the browser shows

Try changing the colours. #b8692c is a hex colour: a # and six characters, two each for red, green and blue. Every design program and online colour picker shows them. CSS also knows about 140 colour names, such as darkred, teal and tomato.

CSS uses American spelling: color, not colour. A misspelled property is silently ignored, which makes it one of the most common reasons a rule "doesn't work".

One stylesheet for the whole site

Create a new file in your my-site folder called style.css, next to index.html. Put the rules in it, without the <style> tags: a .css file contains only CSS.

Then connect each page to it with a <link> in the <head>:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sam Rivera</title>
  <link rel="stylesheet" href="style.css">
</head>

The href is an address like the ones in lesson 4. The sourdough page is in the recipes folder, so its link needs to go up a folder first: href="../style.css".

Now every page shares the same look. Change a colour in style.css and it changes on every page, which is the whole point.

Fonts

font-family takes a list of fonts. The browser uses the first one the visitor's device has, so end the list with a general family as a fallback:

Fonts the visitor doesn't have, like the thousands on Google Fonts, can be loaded from the web too. They're a nice touch for headings, but they make the page a little slower; the fonts above are already on every device.

A readable layout

Lines of text that run the full width of a big screen are tiring to read. A few declarations on body fix that, and one rule on img keeps photos from spilling off small screens:

Try it: change the code

What the browser shows

Sizes in CSS need a unit: px (pixels) for things like borders, rem for spacing and text, % for a share of the space available. Leave the unit off (padding: 1;) and the declaration is ignored. line-height is the exception: a plain number there means "times the text size".

Styling the menu

A selector can be more precise. nav a means "links inside a <nav>", so you can style the menu without changing the other links on the page. And a:hover is a link while the mouse is over it:

Try it: change the code

What the browser shows

The margin-right spaces the links out, so you can remove the | between them from lesson 4. (The links in this example lead nowhere: the pages they point to are on your computer.)

Classes: style some things, not all

Sometimes you want one paragraph to look different, not every <p>. Give it a class, a name you make up, and write a rule for that class with a dot in front:

Try it: change the code

What the browser shows

You can use a class on as many elements as you like, and give an element several, separated by spaces: class="tip important". Choose names for what the thing is (tip, warning), not how it looks (yellow-box), so the name still fits if you change the colour.

When two rules disagree

If two rules set the same property on the same element, the more specific selector wins: a class beats a plain element name, and nav a beats a. If they're equally specific, the one further down the stylesheet wins. That's the "cascading" in Cascading Style Sheets. In practice: put general rules first, and more particular ones after them.

Sam's stylesheet

Here's everything together, as Sam's style.css. Text between /* and */ is a comment, like <!-- --> in HTML.

/* Sam's site: one stylesheet for every page */

body {
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: #333333;
  background-color: #fdf8f0;
  max-width: 40rem;
  margin: 0 auto;
  padding: 1rem;
}

h1, h2 {
  font-family: Georgia, serif;
  color: #b8692c;
  line-height: 1.2;
}

a {
  color: #8a4a1c;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

nav {
  border-bottom: 2px solid #b8692c;
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}

nav a {
  font-weight: bold;
  text-decoration: none;
  margin-right: 1rem;
}

nav a:hover {
  text-decoration: underline;
}

.tip {
  background-color: #fff4d6;
  border-left: 4px solid #f5b700;
  padding: 0.5rem 1rem;
}

With the stylesheet linked, remove the width from the home page's photo, or set it to its real width (width="800"): the CSS now keeps it from taking over the page. Use your own colours: pick two or three and use them everywhere, and your site will look designed.

See and try CSS in your browser

Every browser has tools for looking inside a page. Right-click anything on your page and choose Inspect. You'll see the HTML of the page, and next to it the CSS rules that apply to what you clicked. You can tick rules off and on, and change values to try them out. Nothing you change there is saved, so experiment freely, then copy what you like into style.css. It works on any website, too: it's a good way to find out how a site you like does something.

If it doesn't work

Check your work

Next, you'll fix the copying from lesson 4: one menu, written once, on every page.