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
bodyrule - Heading: the
h1rule (color, font, size) - Subheading: the
h2rule (color, font) - Paragraphs: the
prule (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
bodyrule, add a /* General settings */ comment. - Before the
h1rule, add a /* Heading */ comment. - After the
h1rule, add a /* Subheading */ comment and anh2rule with color: #2a3d66 and font-family: Georgia, serif. - Before the
prule, 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