Project final - My first page

Combine all parts and finalize the stylesheet.

Project final: combine everything

You've reached the final step. The stylesheet has the header comment plus body, h1, and p rules. Now you'll add two more things: an h2 subheading rule and section comments.

Comments keep the file readable for you and others. The browser doesn't show them, but anyone viewing the source can read them. A short comment above each section makes the file structure easy to scan. The h2 rule makes subheadings consistent with h1.

Comment writing practices

When writing comments, keep these in mind:

Keep it short: a few words or one sentence is enough. Long comments clutter the file.
Place matters: a comment should sit right above the section it explains.
Be specific: write 'General settings' or 'Heading' rather than 'section'.

Good comments help you understand the file quickly when you return months later.

Full file structure

At the end of the project your file will be split into these sections:

File header: an explanatory comment at the top
General settings: the body rule
Heading: the h1 rule (color, font, size)
Subheading: the h2 rule (color, font)
Paragraphs: the p rule (spacing, alignment)

Each section will have a short comment above it. This structure lets you see what each section does at a glance.

Exercise Add the h2 rule and section comments

Take the file with all the rules from the previous lesson. Make these additions:

Before the body rule, add a /* General settings */ comment.
Before the h1 rule, add a /* Heading */ comment.
After the h1 rule, add a /* Subheading */ comment and an h2 rule with color: #2a3d66 and font-family: Georgia, serif.
Before the p rule, add a /* Paragraphs */ comment.

Show example solution

/* Personal Site stylesheet - Alex York */

/* General settings */
body {
  margin: 0;
}

/* Heading */
h1 {
  color: #2a3d66;
  font-family: Georgia, serif;
  font-size: 2rem;
}

/* Subheading */
h2 {
  color: #2a3d66;
  font-family: Georgia, serif;
}

/* Paragraphs */
p {
  margin: 12px 0;
  padding: 0 16px;
  text-align: left;
}

Test yourself

Why is it useful to add comments to a CSS file?
```
/* This is a comment */
```
- To explain sections and improve readability
- To hide style changes from the browser
- To speed up page loading
- To pick colors automatically
Show answer

To explain sections and improve readability — Correct. Comments write explanations for humans reading the file; the browser ignores them.

Complete the marker that starts a CSS comment

____ This file styles the Personal Site */

Show answer

/* This file styles the Personal Site */

Match each project concept to its meaning

link element

connects CSS to HTML
type selector

selects by tag name
comment

/* explanation */
external CSS

separate .css file

Next lesson: Font family

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies