Summary - My first stylesheet

Combine basic CSS concepts to write your first stylesheet.

Five lessons, one theme

In this group you learned what CSS is, how it links to HTML, the style block structure, comments and the cascade. Now it is time to put them together in one stylesheet.

Our goal: write the first stylesheet for a blog page. There will be body, h1 and p blocks; each one styles a part of the page.

What did you learn?

Recap: CSS declarations sit inside curly braces, each one in the form property: value;. We link the stylesheet to HTML with <link rel='stylesheet'>.

If two blocks clash on the same element, the cascade kicks in; on equal priority, the later one wins. Thanks to inheritance, color on body flows down to children; some properties like border do not flow.

Exercise Write your first stylesheet

Write your first stylesheet. It must hold three blocks: body with color: #222, h1 with color: darkblue, and p with line-height: 1.5. Stack the blocks and indent each declaration.

Show example solution

/* write your first stylesheet */
body {
  color: #222;
}
h1 {
  color: darkblue;
}
p {
  line-height: 1.5;
}

Test yourself

Which is a valid CSS declaration?
- color: navy;
- color = navy
- color -> navy
- color(navy)
Show answer

color: navy; — Correct. A CSS declaration has the form 'property: value;'; it uses a colon and a semicolon.

Give the h1 block a font size

h1 {
  ____: 32px;
}

Show answer

h1 {
  font-size: 32px;
}

Match each concept to its meaning

CSS

Styling language
Stylesheet

.css file
Selector

Which element
Declaration

property: value

Next lesson: Type selectors

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies