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