0x00Lesson 1 of 9

Give a page its first styles

Connect CSS to a page and write your first selector and declaration.

12 min 5-question quiz 1 code exercise

By the end of this lesson you can

Explain what CSS controls
Recognize a CSS rule
Connect an external stylesheet

CSS (Cascading Style Sheets) controls how HTML content looks and is arranged. A CSS rule has a selector, which chooses elements, and a declaration block, which sets properties and values. Keep page structure in HTML and visual presentation in CSS.

styles.css

1h1 {
2  color: darkgreen;
3  font-size: 2rem;
4}

Output

h1 text is dark green and larger

An HTML page can load an external stylesheet with <link rel="stylesheet" href="styles.css"> inside its head. The selector h1 matches every h1 element. Inside the braces, each declaration ends with a semicolon.

Key takeaways

CSS controls presentation; HTML describes content.
Selectors choose elements.
Declarations pair a property with a value.

Lesson quiz

5 questions · pass with 4 correct · up to 50 XP

Passing this quiz completes the lesson and keeps your streak going. Questions you miss come back in review sessions later.

Practice: write CSS

Style the sample page, see your changes in the sandboxed preview, and run checks against the computed styles.

Exercise 1

Style the headline

+25 XP

Select .page-title and set its text color to #165b33 and font size to 32px.

Headline styles

styles.css

Loading editor…

Styled page preview

Your CSS is applied to a sample page in a sandboxed preview. Tests check computed styles.

Questions about this lesson

Stuck? Ask. Figured something out? Share it. Explaining is one of the best ways to learn.

Loading posts…