Your First Stylesheet

The previous three lessons established what CSS is, how to connect it to HTML, and how rules are written. This lesson is where you actually apply CSS and watch the page transform in real time.

The starting point

Your styles.css is connected to all Summit Trail Outfitters pages. Right now it may have a few rules from the exercises in Lesson 03. That is the foundation — now you will extend it into a real stylesheet.

The goal: by the end of this lesson, the STO homepage will have a visible, intentional design — not a finished product, but a genuine improvement over the browser’s default rendering.

Building the stylesheet rule by rule

Work through these rules in order, saving and refreshing after each addition.

Body base styles

These rules apply to the entire page because everything is a descendant of <body>. Child elements inherit properties like font-family and color automatically.

body {
  background-color: #f5f0eb;
  color: #1a1a1a;
  font-family: Georgia, serif;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

margin: 0 removes the browser’s default page margin — the gap between the page content and the browser window edges. Without it, the background color does not reach the edges.

Headings

h1 {
  color: #2c4a1e;
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

h2 {
  color: #2c4a1e;
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}

h3 {
  color: #3a5c26;
  font-size: 1.25rem;
}

nav {
  background-color: #2c4a1e;
  padding: 1rem 2rem;
}

nav a {
  color: #f5f0eb;
  text-decoration: none;
  margin-right: 1.5rem;
}

nav a is a descendant selector — it targets <a> elements that are inside a <nav>. You will learn about selectors in detail in Module 02.

Note: nav here is a type selector — it targets every <nav> element on the page. This is fine for a single-page exercise. When you build the full STO site in Module 07, you will replace this with a class selector (.site-nav) so that different navigation elements can be styled independently. Avoiding broad type selectors on elements like nav, header, and footer is a habit worth building early.

Links

a {
  color: #2c4a1e;
}

a:hover {
  color: #4a7c30;
}

a:hover is a pseudo-class — it applies only when the user hovers over the link. When they move away, the style returns to normal. You will cover pseudo-classes fully in Module 02.

Main content area

main {
  max-width: 900px;
  margin: 2rem auto;
  padding: 0 1.5rem;
}

max-width: 900px prevents content from stretching too wide on large screens. margin: 2rem auto centers the element horizontally — auto on the left and right margins distributes the available space equally.

Paragraphs

p {
  margin-bottom: 1rem;
}

footer {
  background-color: #2c4a1e;
  color: #f5f0eb;
  padding: 2rem;
  margin-top: 3rem;
}

A note on browser defaults and CSS resets

Every browser ships with its own default styles: headings have a built-in font-size, <body> has a small margin, lists have bullets and indentation. The stylesheet you are building in this lesson overrides some of these defaults (like body { margin: 0 }) but not all of them.

In Module 03 you will learn about the CSS reset — a block of rules placed at the very top of your stylesheet that wipes out browser defaults before any of your custom styles apply. Writing the reset first is important: if your styles come first and the reset comes after, the reset rules could accidentally override your intentional styles rather than the browser defaults.

For now, continue with the stylesheet below. When you reach Module 03, you will add the reset block to the top and everything will keep working — the reset only removes defaults you are not relying on.

The complete stylesheet so far

/* === Base === */
body {
  background-color: #f5f0eb;
  color: #1a1a1a;
  font-family: Georgia, serif;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

/* === Headings === */
h1 {
  color: #2c4a1e;
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

h2 {
  color: #2c4a1e;
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}

h3 {
  color: #3a5c26;
  font-size: 1.25rem;
}

/* === Navigation === */
nav {
  background-color: #2c4a1e;
  padding: 1rem 2rem;
}

nav a {
  color: #f5f0eb;
  text-decoration: none;
  margin-right: 1.5rem;
}

/* === Links === */
a {
  color: #2c4a1e;
}

a:hover {
  color: #4a7c30;
}

/* === Layout === */
main {
  max-width: 900px;
  margin: 2rem auto;
  padding: 0 1.5rem;
}

/* === Content === */
p {
  margin-bottom: 1rem;
}

/* === Footer === */
footer {
  background-color: #2c4a1e;
  color: #f5f0eb;
  padding: 2rem;
  margin-top: 3rem;
}

Inspecting styles in DevTools

Every browser has developer tools. Open them with F12 or right-click → “Inspect” on any element.

In the Elements panel, click an element on the page. The Styles panel on the right shows every CSS rule that applies to it:

Rules you wrote in styles.css appear first
Browser default styles appear below them
Overridden rules appear with a strikethrough

This is how you debug CSS. When a style is not applying, DevTools tells you whether the rule is being recognized and whether something else is overriding it.

Exercise

With the complete stylesheet applied:

Open index.html in your browser. The page should now have a green navigation bar, cream background, green headings, and centered content.
Open DevTools (F12). Click the <h1> element. Confirm the Styles panel shows your h1 rule with color: #2c4a1e and font-size: 2.5rem.
Add three more CSS rules of your own — something you identified in the Lesson 01 exercise. Possible ideas:
- Style the <header> element
- Add padding to <section> elements
- Change the font-size on footer links
Copy the final styles.css to all STO pages that link to it. Open each page — the navigation and base styles should appear consistently.

Recap

body { margin: 0 } removes the browser’s default page margin.
font-family and color on body inherit to all child elements — set your base typography once.
max-width prevents content from stretching too wide; margin: auto centers block elements.
nav a is a descendant selector — it targets <a> elements inside <nav>.
a:hover applies styles when the user hovers over a link.
Browser DevTools → Elements → Styles panel shows what CSS is applying and what is overriding what.