Your First Rule

A stylesheet tells the browser how to draw a page. The shop's index.html already links styles.css in its head. The file is empty, so for now the browser draws everything with its own defaults. A stylesheet is a list of rules.

A rule starts with a selector, which says which elements it styles. Then come curly braces that hold its declarations. Each declaration is a property, a colon, a value and a semicolon. Here is a rule for another element:

h2 {
  color: navy;
}

This rule selects every h2 on the page and sets its color to navy. A tag selector is the tag name alone, without angle brackets. Some properties, like font-family, are inherited. Set one on body and every element inside the body uses it too. A font-family value is a list: the browser uses the first font the visitor's computer has.

The check asks for the style of the h1 and the three h3. After each value it prints the rule the value comes from. With your stylesheet it must print:

> the style of h1 (1 element, window 1024 px wide)
  h1 "Corner Shop"
    color: #0a7   <- h1
    font-family: Arial, sans-serif   <- inherited, body
> the style of h3 (3 elements, window 1024 px wide)
  h3 "Mug"
    color: (not set)
    font-family: Arial, sans-serif   <- inherited, body
  h3 "Notebook Out of stock"
    color: (not set)
    font-family: Arial, sans-serif   <- inherited, body
  h3 "Lamp Sale"
    color: (not set)
    font-family: Arial, sans-serif   <- inherited, body

Your task: in styles.css, write a rule for h1 that sets color to #0a7, the shop's green. Then write a rule for body that sets font-family to Arial, sans-serif.

Assignment
Follow the Coding Tutorial to write your first two rules in styles.css: one for h1 that sets its color, and one for body that sets the font of the whole page.

Hint
A declaration goes between its rule's braces and ends with a semicolon. The two font names in font-family are separated by a comma.