03. Styles in a tag, or in a sheet

A style attribute puts CSS inside one tag. It works, but a style sheet is tidier. Move a page's inline styles into style.css.

There's another way to add CSS: the style attribute, right on a tag. Its value is declarations, without a selector or braces:

HTML

1<h1 style="color: crimson;">Lost and Found</h1>2<p style="color: gray;">A blue water bottle, found near the canteen.</p>3<p style="color: gray;">A maths notebook, found in Room 12.</p>

That's called an inline style. It works, but look how the same color: gray; is written twice. With ten paragraphs, it's ten times, and changing the colour means finding every one.

In a style sheet, one rule styles them all: p { color: gray; }. Your HTML stays about *what* things are, and your CSS about *how they look*.

Your turn

1Steps

1Every tag on this Sports Day page has its own style attribute. Move the styles into style.css as rules: the heading darkgreen, the paragraphs slategray.
2Then delete the style attributes from the HTML. The page should look the same as before.

Write it in index.html and style.css; the page shows as you type.

Starting code

The editor starts empty. Copy this into it to begin, or write your own from scratch.

HTML

1<!DOCTYPE html>2<html lang="en">3  <head>4    <title>Sports Day</title>5    <link rel="stylesheet" href="style.css">6  </head>7  <body>8    <h1 style="color: darkgreen;">Sports Day</h1>9    <p style="color: slategray;">Races start at 9 am on the main ground.</p>10    <p style="color: slategray;">Bring a water bottle and a cap.</p>11  </body>12</html>

2Expected output

Your page should have

No tag has a style attribute any more
The heading is still darkgreen
The first paragraph is still slategray
The last paragraph is still slategray

Submit answer checks each of these.

3Hints

Stuck? Open one hint at a time: each gives a bit more help.

Hint 1

Each style attribute's declarations go inside a rule in style.css, with a selector for that kind of tag.

Hint 2

You need two rules: one for h1 and one for p. One p rule styles both paragraphs.

Hint 3

The h1 rule gets color: darkgreen; and the p rule color: slategray;. Then delete each style="..." from the tags.