Styles

Goal for this step

Part 3 improves reading comfort. You will add a shared stylesheet so Harbor Notes looks intentional: limited line length, clear type, calm spacing, and a post list that is easy to scan.

You are not turning the blog into a busy dashboard. One quiet visual system is enough. The words remain the star; CSS should make those words easier to read.

What you should already know

You need the multi-page HTML from Part 2. You should know that CSS rules select elements and set properties such as font, color, margin, and width.

If CSS is brand new, treat this part as a gentle first stylesheet. Copy the patterns, change one value at a time, and reload the browser to see what happened.

Concepts in plain language

A stylesheet is a file of design instructions. HTML says what the content is. CSS says how it should appear. Linking one stylesheet from every page keeps the whole site visually consistent.

Line length matters for reading. Very wide paragraphs make eyes travel too far. A common approach is to constrain the content width—sometimes called a measure—so text stays in a comfortable column.

Custom properties (CSS variables) store repeated values in one place. If you define a measure or a font stack on :root, you can reuse those names throughout the file and adjust the whole site by editing one line.

Share one stylesheet and set a readable measure

Create styles.css in the site root. On root pages, link it with href="styles.css". Inside posts/, link with href="../styles.css". Missing that difference is the most common styling failure in this project.

Define a few variables for measure and fonts, then center the header, main, and footer with a max width. Use generous line-height for body text, and give the post list enough spacing that each entry feels separate without heavy borders or card clutter.

Optionally mark the current nav item with aria-current="page" and style that state. Visitors then get a visual cue for where they are, and assistive technology gets the same hint.

<!-- on pages in the site root -->
<link rel="stylesheet" href="styles.css">

<!-- on pages inside posts/ -->
<link rel="stylesheet" href="../styles.css">

:root {
  --measure: 40rem;
  --serif: "Source Serif 4", Palatino, serif;
  --sans: "Source Sans 3", system-ui, sans-serif;
}

.site-header,
main,
.site-footer {
  width: min(100% - 2rem, calc(var(--measure) + 4rem));
  margin-inline: auto;
}

Run the snapshot and verify

Serve Part 3 and reload Home, About, and the post. All three should share the same fonts, spacing, and column width.

Resize the browser to a phone-like width. Text should wrap cleanly, horizontal scrolling should not appear, and navigation should remain usable. If only the home page looks styled, fix the stylesheet path on the other pages.

git clone https://github.com/michaeldunga1/fcc-static-blog.git
cd fcc-static-blog/03-Styles
python3 -m http.server 8000
# Then visit http://localhost:8000

Common mistakes

Linking styles.css from a post without ../ leaves that page unstyled while the home page looks finished. Check every HTML file’s link tag.

Setting an enormous fixed width breaks small screens. Prefer a fluid rule such as min(100% - 2rem, ...) so margins remain on narrow viewports.

Over-decorating with many boxes, shadows, and competing accent colors fights the goal of a readable blog. Keep the stylesheet calm.

Checklist and practice tip

Practice tip: change only the measure variable and reload. Watch how the whole layout responds. That single experiment shows why shared variables are worth learning early.

• All pages load the same stylesheet
• Body text is easy to read at desktop and phone widths
• Current nav item can be marked with aria-current="page"
• Post list entries are visually distinct without clutter
• No page depends on browser-default styling alone