Project final - Blog page
Combine all parts and finalize the blog page.
Final step: bring it together
Our stylesheet is almost done: typography, box model, and colors are in place. Now we'll add the final touch: split the file into sections with comments and add an h2 rule to color the post titles.
This makes the stylesheet more readable, so anyone opening it can see at a glance what each section does.
Split into sections with comments
In long stylesheets, comments are a great way to separate sections. A short comment above each block lets anyone opening the file see at a glance what they're looking at.
The typical order is: general settings (body) first, then structural sections (.post), and finally sub-headings (h2).
Color the subtitle
Let's give the post titles (h2) a color to make them stand out. Pick a warm tone that contrasts with the white card background, like the brown #6a4c2c. Also bump the weight with font-weight: 700.
This rule should come after the .post rule, so the card styles are read first and the heading styles after. With the section comments in place, anyone opening the file can follow the order at a glance.
Exercise Apply the final touches
Split the file into sections with comments: at least three comments including the file header. After the .post rule, add a new h2 rule with color: #6a4c2c and font-weight: 700. Don't remove existing declarations.
Show example solution
/* Travel Diary stylesheet - Alex Carter */
/* General settings */
body {
font-family: Georgia, "Times New Roman", serif;
font-size: 18px;
font-weight: 400;
line-height: 1.6;
color: #2b2b2b;
background-color: #f4f1ea;
}
/* Post cards */
.post {
width: 640px;
padding: 24px;
margin: 16px auto;
box-sizing: border-box;
background-color: #ffffff;
}
/* Subtitle */
h2 {
color: #6a4c2c;
font-weight: 700;
}Test yourself
-
Which sign starts a CSS comment?
- /* opening
- // opening
- <!-- opening
- { opening
Show answer
/* opening — Correct. A CSS comment starts with /* and ends with */.
-
Complete the comment opening
____ General settings */Show answer
/* General settings */ -
Match each comment to the section it labels
- /* General settings */
- body rule
- /* Post cards */
- .post rule
- /* Subtitle */
- h2 rule
- /* Travel Diary */
- file header