01. Your first CSS rule

HTML says what each part of a page is; CSS says how it looks. Write your first rules to colour a heading and size a paragraph.

In the HTML course you described pages: this is a heading, this is a list. CSS (Cascading Style Sheets) is the other half. It says how each part looks: its colour, its size, the space around it, where it sits.

The same HTML can look plain or beautiful. The difference is CSS.

CSS

1h1 {2  color: purple;3}4
5p {6  color: gray;7  font-size: 20px;8}

Each block is a rule. It starts with a selector, h1, which says *which elements* to style: here, every <h1> on the page.

Inside the curly braces { } are declarations: a property (color), a colon, a value (purple) and a semicolon. One rule can have as many declarations as you like, one per line.

Your turn

1Steps

1This page is already connected to style.css. In style.css, write a rule that makes the <h1> heading purple.
2Write a second rule for p that makes the paragraphs gray and 20px big (font-size: 20px;).

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>Cricket Club</title>5    <link rel="stylesheet" href="style.css">6  </head>7  <body>8    <h1>Cricket Club</h1>9    <p>Practice is on Tuesday and Thursday at 4 pm.</p>10    <p>Bring water and your own bat if you have one.</p>11  </body>12</html>

2Expected output

Your page should have

The heading is purple
The paragraphs are gray
The paragraphs are 20px big

Submit answer checks each of these.

3Hints

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

Hint 1

A rule is a selector, then curly braces with declarations inside: selector { property: value; }

Hint 2

The heading's rule starts h1 { and the paragraphs' rule starts p {. The property for text colour is color.

Hint 3

The paragraph rule needs two declarations, each ending in ;: color: gray; and then the font-size one.