Project: My first stylesheet

Overview of the 5-lesson project: you will style an HTML page from scratch.

Project: My first stylesheet

In this 5-lesson project you'll style a personal site page from scratch. Each lesson adds one piece to the stylesheet, and by the final lesson you'll have a fully styled page.

You'll use:

An external stylesheet and the link element
Type selectors (body, h1, h2, p)
Color and font settings
Spacing and alignment
Documentation with comments

Ready? Let's start.

Project roadmap

Here's how we'll build the project step by step:

Linking and skeleton: review linking an external stylesheet to HTML, set up the base skeleton with a body type selector.
Color and font: add color, font family, and font size to h1.
Spacing and alignment: add margin, padding, and text alignment to p.
Project final: add an h2 rule and separate sections with comments.

Each lesson's starting code contains the previous lesson's solution; you only add the new piece.

Target stylesheet

At the end of the project you'll have this structure:

File header: an explanatory comment
General settings: margin reset for body
Heading: color, font family, and font size for h1
Subheading: color and font family for h2
Paragraphs: margin, padding, and alignment for p

You'll build this step by step across 5 lessons.

Exercise Add a header comment to the stylesheet

To start the project, add a comment at the top of the stylesheet. The comment should include the words Personal Site. CSS comments use the /* ... */ syntax and are not shown by the browser; they're only visible to anyone reading the source. We'll fill this file in the next lessons.

Test yourself

How does starting code work in a project group?
- Each lesson's starting code contains the previous lesson's solution
- Each lesson starts with an empty file
- There is no starting code; everything is written from scratch
- Starting code only appears in the final lesson
Show answer

Each lesson's starting code contains the previous lesson's solution — Correct. In a project, starting code accumulates; you only add the new piece.
Match each lesson to the piece it adds

Linking and skeleton

body rule
Color and font

color, font-family
Spacing and alignment

margin, padding
Project final

comments + h2 rule

Next lesson: Linking and skeleton

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies