Styling the Global Stylesheet — CSS Reset, Base Styles, and CSS Custom Properties

Every page on the Summit Trail Outfitters site shares the same visual foundation: the same type scale, the same brand colors, the same base spacing. That foundation lives in one place — the global stylesheet. This lesson builds it from scratch, and introduces CSS custom properties as the tool that ties everything together.

Why a global stylesheet

The STO site has six pages: homepage, tours, blog, blog article, about, and contact. Without a shared foundation, you would repeat the same color values, font declarations, and reset rules in every file. Change the primary green and you would need to update dozens of individual rules.

The global stylesheet solves this: every page links to it, every page inherits from it, and every page looks consistent without duplicating a line of CSS.

The CSS reset

Before any brand styles, reset the browser’s default inconsistencies:

/* === CSS Reset === */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  line-height: 1.6;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

box-sizing: border-box on every element prevents the width-calculation surprises from Module 03. Zeroing margins and padding removes browser defaults so you start from a known baseline. font: inherit on form elements ensures your body font applies to inputs — browsers do not do this by default.

height: auto on media elements is easy to forget but important. When max-width: 100% shrinks an image on a narrow viewport, the browser needs height: auto to recalculate the height proportionally — without it, any explicit height attribute in the HTML keeps its fixed pixel value and the image appears squashed.

CSS custom properties

CSS custom properties (also called CSS variables) let you define a value once and reference it anywhere in the stylesheet. They are declared with a -- prefix and read with var():

:root {
  --color-primary: #2c4a1e;
}

.site-header {
  background-color: var(--color-primary);
}

Declaring them on :root makes them available on every element — :root is the <html> element and sits at the top of the cascade.

The STO brand palette as custom properties

:root {
  /* Brand colors */
  --color-primary:    #2c4a1e;  /* deep forest green — headers, buttons */
  --color-secondary:  #3a5c26;  /* medium green — hover states, accents */
  --color-accent:     #a8c97f;  /* light sage green — highlights, tags */
  --color-text:       #1a1a1a;  /* near-black — body text */
  --color-text-muted: #5a5a5a;  /* mid-gray — metadata, captions */
  --color-bg:         #f5f0eb;  /* warm off-white — page background */
  --color-bg-alt:     #eae4da;  /* slightly darker warm — alternate sections */
  --color-border:     #d8d2c8;  /* warm gray — borders and dividers */
  --color-white:      #ffffff;

  /* Spacing scale */
  --space-xs:   0.25rem;   /*  4px */
  --space-sm:   0.5rem;    /*  8px */
  --space-md:   1rem;      /* 16px */
  --space-lg:   2rem;      /* 32px */
  --space-xl:   4rem;      /* 64px */
  --space-2xl:  6rem;      /* 96px */

  /* Typography */
  --font-body:    'Source Sans 3', system-ui, sans-serif;
  --font-heading: 'Playfair Display', Georgia, serif;

  /* Border radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  16px;
  --radius-full: 9999px;   /* pill shape */

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.16);

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
}

Base typography and color

You may notice that body appears twice in the stylesheet — once in the reset block and again here. CSS handles this correctly: the browser applies all declarations from both rules, with later declarations winning for any property that appears in both. Two body blocks is a valid and common pattern when you want to keep reset concerns separate from brand concerns. If the same property appears in both blocks (as line-height: 1.6 does here), they must match — or the second block wins.

/* === Base Styles === */

body {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.125rem; }

p {
  margin-bottom: var(--space-md);
}

a {
  color: var(--color-secondary);
  text-decoration: underline;
}

a:hover {
  color: var(--color-primary);
}

ul,
ol {
  list-style: none;
}

Reusable utility classes

A handful of shared classes that appear on every page:

/* === Utilities === */

.content-wrapper {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.section-padding {
  padding: var(--space-xl) 0;
}

.section-heading {
  font-size: 2rem;
  margin-bottom: var(--space-lg);
  text-align: center;
}

.btn {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn-primary:hover {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

.btn-accent {
  background-color: var(--color-accent);
  color: var(--color-primary);
}

Why custom properties beat preprocessor variables for beginners

CSS custom properties live in the browser. Unlike Sass variables (which are compiled away before the browser sees them), custom properties:

Are visible in DevTools — click any element and see its inherited custom properties in the Computed tab
Can be overridden locally — you can redefine --color-primary inside a .dark-section block and it cascades to all children
Require no build step — they work in plain CSS, in every modern browser

Exercise

Build the STO global stylesheet:

Create or open styles.css. Add the full reset, custom property block, and base styles from this lesson.
Link it in every HTML file before any page-specific styles.
Open DevTools, click the <html> element, and look at the Computed tab. Search for --color. You should see all your custom properties listed with their values.
Try changing --color-primary directly in DevTools to another color. Watch the header background update in real time — without touching any other rule.

Recap

The global stylesheet provides a shared visual foundation for every page: reset, base typography, brand colors, and utility classes.
The CSS reset removes browser inconsistencies and sets a predictable baseline.
CSS custom properties are declared on :root with --name: value syntax and used with var(--name) — they are inspectable in DevTools and can be locally overridden.
Define the complete brand palette, spacing scale, and shared design tokens as custom properties — change them in one place, update everywhere.

Lesson 02 applies the global styles to the site header and navigation — the first component visible on every page.