What CSS is and how to connect it

Right now your website works, but it looks like a document from 1995. Black text, white background, everything stacked on the left. That's what HTML looks like on its own.

CSS is where that changes. CSS stands for Cascading Style Sheets, and it's the language that controls how everything looks: colors, fonts, spacing and layout. Same HTML, completely different look.

CSS is written as a list of rules. Here's one:

Let's take it apart:

• h1 is the selector. It picks which elements the rule applies to. Here, every h1 on the page.
• Everything between the curly braces { } is the declaration block.
• color: darkblue; is a declaration. It's made of a property (color), a colon, a value (darkblue) and a semicolon at the end.

You can have as many declarations in a rule as you like. Each one goes on its own line, and each one ends with a semicolon. Forgetting the semicolon is one of the most common CSS mistakes, and it can break the next line too, so keep an eye out for it.

There are three ways to add CSS to a page. You'll see all of them in the wild, but only one is the one you'll normally use.

1. Inline styles, with a style attribute on an element:

This only affects that one element. If you want all paragraphs red, you'd have to add it to every single one. Avoid it except for quick tests.

2. A style element in the head:

Better, because it styles every paragraph on the page. But the styles only work for that one page.

3. A separate CSS file, linked from the head:

This is the one to use. All your styles live in one file, styles.css, and every page that links to it gets the same look. Change a color once and it changes everywhere.

Let's connect a stylesheet to your website. In your my-website folder, create a file called styles.css next to index.html:

Then add this line inside the head of index.html, just below the title:

The href works exactly like the paths you learned for links and images. Since styles.css sits in the same folder as index.html, the file name is enough.

To check that it works, add this to styles.css:

Save, and the whole page should turn light yellow. If it doesn't, the link isn't working. Check the spelling of the file name and that the link is inside the head.

The "cascading" in CSS describes how the browser decides what to do when several rules affect the same element. Two ideas cover most of it:

Later rules win. If two rules with the same selector set the same property, the one further down in the file wins:

Paragraphs end up green.

Some properties are inherited. If you set a font or a text color on the body, the elements inside it inherit that value unless something else overrides it. That's why setting your font on body changes the text on the whole page.

You'll learn more about which rules win in the next lesson. For now, if a style isn't showing up, there's a good chance another rule is overriding it.