MGU Computer Science Series — Web Development: HTML, CSS, and JavaScript
Part V: Web Projects and Components
Sections · Containers · Cards · Callouts · Buttons · Reusable Classes
Chapter 25 of 30
25
MGU Computer Science Series  ·  Web Development: HTML, CSS, and JavaScript  ·  Library Textbook Edition

Chapter 25:
Building Reusable
Page Sections

Containers, hero sections, content sections, cards, callouts, buttons, and feature lists — the reusable building blocks professional websites are made from

■ Part V of VII ■

■ 11 Sections  •  Chapter 25 of 30 ■

Builds on HTML structure, CSS styling, Flexbox, Grid, and responsive design from Parts II and III

Chapter 25 — Front Matter

Chapter Introduction and Learning Objectives

Up to this point, you have learned how to build individual HTML pages, apply CSS styling, create responsive layouts with Flexbox and Grid, and write JavaScript that responds to user actions and updates the DOM. You have the fundamental tools. Now you begin learning how to think like a website builder rather than a page builder.

Real websites are not single pages. They are systems of pages that share a consistent visual language, repeating structural patterns, and reusable building blocks. A well-built website uses the same card style in ten different places. It uses the same button style throughout. Its hero section follows a pattern that could appear on multiple pages with different content. Its spacing, colors, and typography come from a shared design vocabulary rather than being invented fresh for each page.

This chapter teaches you how to design and build those reusable building blocks: page sections. You will learn how to identify sections as patterns, how to write HTML that makes sections reusable, how to write CSS that makes section styles consistent and easy to maintain, and how to assemble a complete page from these sections the way a professional web developer would.

Opening Idea

By the end of this chapter, you will be able to look at any well-built website and recognize its section structure. You will also be able to build a page from your own reusable components rather than styling every element from scratch each time — the same mental model used by modern component-based frameworks like React and Vue, built here with plain HTML and CSS.

11Sections
12Objectives
12Key Terms
30Total Chapters

Learning Objectives

By the end of this chapter, you should be able to:

  1. 1Explain why professional websites are built from reusable sections rather than one-off styles for every element.
  2. 2Describe the three-layer section pattern: the section wrapper, the container, and the section content.
  3. 3Build a container that limits content width and centers it on the page at any screen size.
  4. 4Build a hero section with a headline, supporting description, and one or more call-to-action buttons.
  5. 5Build content sections with section headers, subtitles, and alternating background bands.
  6. 6Build a card component and explain how Flexbox keeps cards in a row at equal height.
  7. 7Build a responsive card grid using CSS Grid and media query breakpoints.
  8. 8Build accessible callout boxes for notes, tips, warnings, and important messages.
  9. 9Build a consistent button system with primary, secondary, and ghost variants, including accessible focus styles.
  10. 10Build a feature list section using semantic list markup.
  11. 11Explain the difference between a reusable class and a modifier class, and apply both correctly.
  12. 12Apply a CSS spacing scale to create consistent vertical rhythm across a page.
Chapter 25 — Contents

Sections at a Glance

Sections 25.1 – 25.2
The Section Pattern and the Container
Sections as Units of Design · The Three-Layer Pattern · Containers
Section 25.1

Websites Are Built from Sections

Open almost any website and look carefully at its structure. Beneath the visual design, you will notice the same fundamental pattern: the page is divided into horizontal bands of content, each serving a clear purpose.

A typical homepage might have a large banner at the top with a headline and a call-to-action button, a row of feature cards explaining what the site offers, a section with a bold statement and a supporting description, another row of cards with images and short descriptions, a strip with contact information or a newsletter signup, and a footer with links and copyright information.

Each of these bands is a section: a self-contained unit of content and layout that can be designed once and reused with different content wherever it is needed.

Reason 1
Sections Match How Users Read
Research shows users scan pages top to bottom, pausing at visual landmarks. Sections create those landmarks.
Reason 2
Sections Make Design Consistent
When every card follows the same pattern, the page looks intentional. When every hero follows the same structure, pages feel unified.
Reason 3
Sections Make Development Efficient
Writing a .card style once and applying it in fifty places is far better than writing fifty slightly different card styles.
Reason 4
Sections Make Maintenance Manageable
When a design needs to change, you change one set of CSS rules and the change propagates everywhere that style is used.
Reason 5
Sections Prepare You for Frameworks
Modern frameworks like React and Vue are built almost entirely around reusable components — exactly the mental model taught in this chapter.

The Section as a Unit of Design

Think of a section as having three layers: a container that controls the section's maximum width and horizontal centering on the page, a section wrapper that controls the section's background color, padding, and vertical spacing, and section content that holds the actual text, images, cards, or other elements.

This three-layer structure appears so consistently across professional websites that it is worth memorizing before you write a single line of code.

HTML — the three-layer pattern
<!-- The three-layer pattern -->
<section class="hero">               <!-- Layer 2: background, padding, spacing -->
  <div class="container">            <!-- Layer 3: max-width, centering -->
    <h1>Welcome to My Site</h1>
    <p>A place for learning.</p>
    <a href="lessons.html" class="btn btn-primary">Start Learning</a>
  </div>
</section>
CSS — layers 2 and 3
/* Layer 2: controls the section's visual treatment */
.hero {
  background-color: var(--color-primary);
  padding: var(--space-xl) var(--space-md);
}

/* Layer 3: controls content width and centering */
.container {
  max-width: 1100px;
  margin-inline: auto;
}
Study Note

Notice that the .container class appears inside many different sections. It is a reusable utility: it does not know or care what section it is inside. It simply centers content and limits its width. You will write many sections in this chapter, and every one of them will follow this pattern.

Section 25.2

The Container Pattern

Before you can build any section, you need to understand the container — the single most reused CSS pattern in professional web development.

Without a container, your content stretches the full width of the browser window. On a wide monitor, a paragraph of text might span 1600 pixels across the screen. That is nearly unreadable; comfortable reading line length is roughly 55–75 characters, which in practice means content should usually be no wider than about 700–900 pixels for running text, or up to 1200 pixels or so for wider layouts with multiple columns.

The container fixes this by limiting width and centering the content.

CSS — the container
.container {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--space-md);
}
Breaking Down Each Declaration
What every line of the container does
  • max-widthThe content will grow to fill the available space, but never exceed 1100 pixels wide. On small screens, where the viewport is narrower than 1100px, the content takes the full width naturally. On large screens, it caps at 1100px.
  • margin-inlineSetting this to auto produces equal left and right margins automatically, centering the container horizontally inside its parent. margin-inline is a modern shorthand for margin-left: auto; margin-right: auto.
  • padding-inlineAdds horizontal padding so content does not press against the screen edges on small screens. Without this, on a narrow phone screen, your text would touch the left and right edges.

Variations on the Container

You may sometimes want a narrower container for reading-focused content and a wider one for full-width layouts.

CSS — container variations
.container {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.container-narrow {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.container-wide {
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: var(--space-md);
}

For this chapter's projects and exercises, you will primarily use .container with a max-width of around 1100px.

The Container Does Not Control Background

An important principle: the container controls content width, not background color. If you want a section to have a colored background that stretches full-width across the screen, you apply the background color to the section element, not the container. The container sits inside the section and keeps the content centered.

HTML — correct placement of background
<!-- CORRECT: background on section, container inside -->
<section class="highlight-band">
  <div class="container">
    <h2>Our Mission</h2>
    <p>We help students learn to build for the web.</p>
  </div>
</section>
CSS
.highlight-band {
  background-color: var(--color-accent-light);
  padding-block: var(--space-xl);
}
Why This Matters

This gives you a full-width colored band with centered content inside — a pattern you will see on nearly every professional website.

Sections 25.3 – 25.5
Hero, Content Sections, and Cards
Headlines · Calls to Action · Section Headers · Equal-Height Cards
Section 25.3

Hero Sections

The hero section is the first large section at the top of a page, designed to orient the visitor, convey the site's purpose, and invite action. It typically appears before the navigation on marketing pages, or just after the navigation on informational sites.

A basic hero section contains a headline (the primary message), a subheading or short description (supporting context), one or two call-to-action buttons (the primary action you want visitors to take), and optionally an image or illustration.

HTML — a basic hero section
<section class="hero">
  <div class="container">
    <div class="hero-content">
      <h1 class="hero-title">Learn Web Development from the Ground Up</h1>
      <p class="hero-description">
        Structured lessons, hands-on projects, and everything you need
        to build real websites with HTML, CSS, and JavaScript.
      </p>
      <div class="hero-actions">
        <a href="lessons.html" class="btn btn-primary">Start Learning</a>
        <a href="about.html" class="btn btn-secondary">About This Site</a>
      </div>
    </div>
  </div>
</section>
CSS — hero styles
/* Hero section */
.hero {
  background-color: var(--color-primary-dark);
  color: var(--color-text-on-dark);
  padding-block: var(--space-2xl);
  text-align: center;
}

.hero-title {
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: var(--space-md);
}

.hero-description {
  font-size: var(--text-lg);
  line-height: 1.7;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: var(--space-lg);
  color: var(--color-text-on-dark-muted);
}

.hero-actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

Analyzing the Hero Design

Deliberate Decisions
Why this CSS is written the way it is
  • Description widthEven though .container limits the overall width, long lines of descriptive text are harder to read. Giving .hero-description a max-width: 640px keeps it comfortably readable without affecting the headline.
  • Wrapping buttons.hero-actions uses Flexbox with flex-wrap: wrap. On narrow screens, if there is not enough room for both buttons side by side, they will wrap to a second line gracefully.
  • CSS variablesThe text uses CSS variables throughout, which makes the hero section easy to retheme. Changing one variable value updates the entire hero.
  • padding-blockThe hero uses padding-block rather than padding. This modern shorthand sets padding-top and padding-bottom together, separating vertical spacing decisions from horizontal ones, which pairs consistently with padding-inline on containers.

Two-Column Hero

A common variation places text on the left and an image on the right in a two-column layout.

HTML — two-column hero
<section class="hero">
  <div class="container">
    <div class="hero-layout">
      <div class="hero-content">
        <h1 class="hero-title">Learn Web Development from the Ground Up</h1>
        <p class="hero-description">
          Structured lessons, hands-on projects, and everything you need
          to build real websites with HTML, CSS, and JavaScript.
        </p>
        <div class="hero-actions">
          <a href="lessons.html" class="btn btn-primary">Start Learning</a>
        </div>
      </div>
      <div class="hero-image">
        <img src="images/hero-illustration.png" alt="Student working at a computer" />
      </div>
    </div>
  </div>
</section>
CSS — two-column layout and mobile stacking
.hero-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

/* On small screens, stack the columns */
@media (max-width: 700px) {
  .hero-layout {
    grid-template-columns: 1fr;
  }

  .hero-image {
    order: -1; /* Move image above text on mobile */
  }
}
Key Idea

This two-column hero uses CSS Grid for layout and includes a responsive breakpoint so that on small screens the two columns collapse into a single vertical stack.

Section 25.4

Content Sections

Not every section of a page is a hero. Most sections carry supporting information: explanations, feature lists, descriptions, quotes, or calls to action. These content sections are the workhorses of a page.

A basic content section has a heading, perhaps a subheading, and supporting text.

HTML — a basic content section
<section class="content-section">
  <div class="container">
    <div class="section-header">
      <h2>What You Will Learn</h2>
      <p class="section-subtitle">
        This course covers everything from your first HTML page to
        publishing a complete multi-page website.
      </p>
    </div>
    <div class="section-body">
      <p>
        You will begin with how the web works, then move through HTML structure,
        CSS styling and layout, JavaScript interaction, multi-page projects,
        and finally accessibility, debugging, and deployment.
      </p>
      <p>
        Each part builds on the last. By the end, you will have built a real
        website you can share with others.
      </p>
    </div>
  </div>
</section>
CSS — content section styles
.content-section {
  padding-block: var(--space-xl);
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.section-header h2 {
  font-size: var(--text-3xl);
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.section-subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 600px;
  margin-inline: auto;
  line-height: 1.7;
}

.section-body {
  max-width: 720px;
  margin-inline: auto;
}

.section-body p {
  margin-bottom: var(--space-md);
  line-height: 1.8;
}

Alternating Section Backgrounds

Pages often alternate between white and light-gray backgrounds to visually separate sections without harsh dividers.

CSS — alternating backgrounds
.content-section {
  padding-block: var(--space-xl);
  background-color: var(--color-bg);
}

.content-section-alt {
  padding-block: var(--space-xl);
  background-color: var(--color-bg-alt);
}
Key Idea

By giving some sections the .content-section-alt class, you create visual rhythm on the page without adding borders or extra markup.

Section 25.5

Cards

Cards are one of the most commonly used patterns in web development. A card is a self-contained visual unit that groups related information — typically an image or icon, a title, a short description, and optionally a link or button.

Cards appear in product listings, article previews, team member profiles, course overviews, feature explanations, and resource directories.

The key property of a card is that it is self-contained. Its styles do not depend on what cards surround it. You can put two cards in a row, three cards in a row, four cards in a grid, or one card alone — the card itself stays consistent.

HTML — a basic card
<div class="card">
  <img
    class="card-image"
    src="images/lesson-html.jpg"
    alt="Code showing HTML document structure"
  />
  <div class="card-body">
    <h3 class="card-title">HTML Structure</h3>
    <p class="card-description">
      Learn how HTML gives every web page its structure, meaning, and
      organization using elements, tags, and attributes.
    </p>
    <a href="lessons/html.html" class="card-link">Start Lesson →</a>
  </div>
</div>
CSS — basic card styles
.card {
  background-color: var(--color-bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease;
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.card-body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-title {
  font-size: var(--text-xl);
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.card-description {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-md);
  flex: 1;
}

.card-link {
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  font-size: var(--text-sm);
  align-self: flex-start;
}

.card-link:hover {
  text-decoration: underline;
}
Why flex: 1 and flex-direction: column Matter in Cards

When you display multiple cards in a row, their heights may differ because their descriptions have different lengths. Without careful CSS, shorter cards would not align with taller ones.

The solution is to make the .card itself a flex column and give .card-description flex: 1. This tells the description to grow and fill whatever space is available. The result: all cards in a row stretch to the same height, with the link always sitting at the bottom. This is a small technique, but it produces significantly more polished results.

Placing Cards in a Grid

Cards are almost always placed inside a card grid section.

HTML — cards inside a grid
<section class="content-section">
  <div class="container">
    <div class="section-header">
      <h2>Course Lessons</h2>
      <p class="section-subtitle">
        Six topic areas, from HTML foundations to publishing your first website.
      </p>
    </div>
    <div class="card-grid">
      <div class="card"><!-- card content --></div>
      <div class="card"><!-- card content --></div>
      <div class="card"><!-- card content --></div>
      <div class="card"><!-- card content --></div>
      <div class="card"><!-- card content --></div>
      <div class="card"><!-- card content --></div>
    </div>
  </div>
</section>
CSS — responsive card grid
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

@media (max-width: 900px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 580px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}
Key Idea

This three-column grid collapses to two columns on medium screens and one column on small screens. The cards themselves do not change; only their container grid adapts.

Sections 25.6 – 25.8
Callouts, Buttons, and Feature Lists
Notices · Calls to Action · Accessible Icons · Semantic Lists
Section 25.6

Callouts and Notices

A callout is a visually distinct section of content that draws the reader's attention to something important. Callouts appear in documentation, tutorials, educational materials, and anywhere a note, warning, tip, or important message needs to stand out from surrounding content.

Common callout types are: Note (supplementary information), Tip (a helpful suggestion), Warning (something to be careful about), and Important (critical information the reader must not miss).

HTML — a tip callout
<div class="callout callout-tip">
  <div class="callout-icon" aria-hidden="true">💡</div>
  <div class="callout-content">
    <strong class="callout-label">Tip</strong>
    <p>
      You can test your responsive design directly in the browser.
      Open Developer Tools, click the device toolbar icon, and choose
      a screen size to preview.
    </p>
  </div>
</div>
CSS — callout base and type variations
.callout {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  border-left: 4px solid transparent;
  margin-block: var(--space-lg);
}

.callout-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 0.1em;
}

.callout-content {
  flex: 1;
}

.callout-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-xs);
}

.callout p {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.6;
}

/* Callout type variations */
.callout-note {
  background-color: #e8f0fe;
  border-left-color: #1a73e8;
}

.callout-tip {
  background-color: #e6f4ea;
  border-left-color: #34a853;
}

.callout-warning {
  background-color: #fef7e0;
  border-left-color: #f9ab00;
}

.callout-important {
  background-color: #fce8e6;
  border-left-color: #ea4335;
}
Accessibility Note for Callouts

The aria-hidden="true" attribute on the icon element tells screen readers to skip it. The callout label ("Tip", "Warning") already communicates the callout type in text, so the decorative icon does not need to be announced. If you prefer not to use emoji icons, you can use a simple left-border callout without an icon — the left border alone communicates visual distinction effectively.

Section 25.7

Buttons and Links as Actions

Buttons and links that invite action — calls to action — appear throughout every professional website. A consistent button system makes a site feel designed rather than assembled.

A basic button system includes a primary button for the main action, a secondary button for an alternative action, a ghost button for low-emphasis actions, and a danger button for destructive actions (used in interactive applications).

HTML — button usage
<a href="lessons.html" class="btn btn-primary">Start Learning</a>
<a href="about.html" class="btn btn-secondary">Learn More</a>
<button type="button" class="btn btn-ghost">Cancel</button>
CSS — base and variant button styles
/* Base button styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.6em 1.4em;
  font-size: var(--text-base);
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* Focus styles — critical for keyboard accessibility */
.btn:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Primary button */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
  border-color: var(--color-primary);
}

.btn-primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* Secondary button */
.btn-secondary {
  background-color: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

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

/* Ghost button */
.btn-ghost {
  background-color: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn-ghost:hover {
  background-color: var(--color-bg-alt);
}

Button Accessibility Requirements

Rule 1
Anchor vs. Button
Use <a> for navigation, <button> for actions. If clicking opens a new page, use an anchor. If clicking performs an action on the current page, use a button element. Never use a div or span as a button.
Rule 2
Visible Focus Styles
Always include :focus-visible styles. Keyboard users navigate with the Tab key and need to see clearly which element is focused. :focus-visible applies focus styles only for keyboard navigation, not mouse clicks.
Rule 3
Descriptive Link Text
Avoid "Click here" as link text. Screen readers often present a list of links to users out of context. "Start Learning" is meaningful; "Click here" is not.
Rule 4
Sufficient Contrast
Ensure sufficient color contrast. White text on a medium-blue background may or may not have enough contrast. Use a contrast checker to verify at least 4.5:1 for normal text.
Section 25.8

Feature Lists

A feature list section presents a set of related items, each with an icon (or visual), a short title, and a brief description. Feature lists communicate what a service offers, what a course covers, what a product does, or what an organization stands for.

HTML — a feature list section
<section class="content-section content-section-alt">
  <div class="container">
    <div class="section-header">
      <h2>Why Build with Web Standards</h2>
      <p class="section-subtitle">
        Learning browser-native HTML, CSS, and JavaScript gives you a foundation
        that remains relevant regardless of which tools and frameworks emerge.
      </p>
    </div>
    <ul class="feature-list" role="list">
      <li class="feature-item">
        <div class="feature-icon" aria-hidden="true">📐</div>
        <div class="feature-content">
          <h3 class="feature-title">Structural Thinking</h3>
          <p class="feature-description">
            HTML teaches you to organize content meaningfully before
            you think about how it looks.
          </p>
        </div>
      </li>
      <li class="feature-item">
        <div class="feature-icon" aria-hidden="true">🎨</div>
        <div class="feature-content">
          <h3 class="feature-title">Visual Systems</h3>
          <p class="feature-description">
            CSS teaches you to build consistent, scalable design systems
            rather than applying one-off styles.
          </p>
        </div>
      </li>
      <li class="feature-item">
        <div class="feature-icon" aria-hidden="true">⚡</div>
        <div class="feature-content">
          <h3 class="feature-title">Controlled Interaction</h3>
          <p class="feature-description">
            JavaScript teaches you to respond to users, update pages,
            and validate input in a structured way.
          </p>
        </div>
      </li>
      <li class="feature-item">
        <div class="feature-icon" aria-hidden="true">♿</div>
        <div class="feature-content">
          <h3 class="feature-title">Accessible by Default</h3>
          <p class="feature-description">
            Web standards are built on accessibility. Learning them correctly
            means building for all users from the start.
          </p>
        </div>
      </li>
    </ul>
  </div>
</section>
CSS — feature list layout
.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.feature-item {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.feature-icon {
  font-size: 2rem;
  flex-shrink: 0;
  line-height: 1;
}

.feature-content {
  flex: 1;
}

.feature-title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-xs);
}

.feature-description {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 640px) {
  .feature-list {
    grid-template-columns: 1fr;
  }
}
Why Use <ul> for a Feature List

The feature list is a list of related items, and <ul> is the correct semantic element. The CSS resets its visual appearance — removing bullets and indentation — but the semantic meaning remains. This matters because screen readers announce lists with context ("list, 4 items") that helps users understand the structure. A set of <div> elements does not carry that meaning.

Sections 25.9 – 25.11
Reusable Classes, Spacing, and Assembly
Naming Discipline · Modifier Classes · Spacing Scales · A Complete Page
Section 25.9

Reusable CSS Classes

Throughout this chapter, you have seen patterns like .card, .btn, .container, .section-header, and .feature-list. These are all examples of reusable CSS classes — styles that are defined once and applied wherever they are needed.

Reusable classes are the foundation of maintainable CSS. They stand in contrast to overly specific selectors like section#home div.content h2.big-title that only work in one exact place, inline styles that cannot be shared or updated centrally, and duplicated rules that copy the same declarations into multiple places and must be updated individually when something changes.

Design Your Classes Around What They Do, Not Where They Are

A class named .homepage-card describes a location. If you later want to use the same card design on a resources page, the name becomes misleading. A class named .card describes what the element is. It works anywhere.

CSS — fragile vs. reusable naming
/* Fragile: tied to one location */
.homepage-card { ... }
.resources-card { ... }
.about-card { ... }

/* Reusable: works anywhere */
.card { ... }

Modifier Classes

Sometimes you need a card that behaves slightly differently in one context. Use a modifier class alongside the base class rather than duplicating the base styles.

CSS — base card with modifiers
/* Base card */
.card { ... }

/* Modifier: a horizontal card layout */
.card-horizontal {
  flex-direction: row;
}

.card-horizontal .card-image {
  width: 200px;
  height: auto;
  flex-shrink: 0;
}

/* Modifier: a featured card with a different background */
.card-featured {
  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
}
HTML — applying modifier classes
<!-- Standard card -->
<div class="card">...</div>

<!-- Horizontal card -->
<div class="card card-horizontal">...</div>

<!-- Featured card -->
<div class="card card-featured">...</div>
Key Idea

The base .card styles apply to all three examples above. The modifier classes add or override only what differs.

Section 25.10

Consistent Spacing and Alignment

One of the most visible differences between amateur and professional web design is spacing consistency. Amateur designs apply margins and padding with arbitrary numbers: margin-top: 37px here, padding: 22px there. Professional designs use a limited set of spacing values drawn from a spacing scale.

Chapter 18 introduced CSS variables as the foundation of reusable design systems. Here you apply that knowledge to spacing specifically.

A Spacing Scale

A spacing scale is a set of named spacing values that grow in a consistent ratio. Every margin, padding, and gap in your stylesheets should use a value from this scale.

CSS — the spacing scale
:root {
  --space-xs:  0.25rem;  /*  4px */
  --space-sm:  0.5rem;   /*  8px */
  --space-md:  1rem;     /* 16px */
  --space-lg:  1.5rem;   /* 24px */
  --space-xl:  2.5rem;   /* 40px */
  --space-2xl: 4rem;     /* 64px */
}

With this scale, every spacing decision in your stylesheet is one of these six values. Elements look visually related because they share spacing values. Sections breathe because they use larger spacing. Text within a card is comfortable because it uses medium and small spacing.

Vertical Rhythm

When sections stack on a page, each section's top and bottom padding contributes to vertical rhythm: the sense that the page has a consistent beat of content and space. Using consistent padding-block values on sections creates that rhythm.

CSS — vertical rhythm
.content-section {
  padding-block: var(--space-xl);
}

.content-section-large {
  padding-block: var(--space-2xl);
}

Every section on the page has predictable top and bottom breathing room, and the visual rhythm feels intentional.

Alignment Within Sections

Key Idea

Elements within sections should align consistently. If your section header text is centered, center it with text-align: center and a centered max-width block — not by adding large left or right margins on one side. This keeps behavior predictable and responsive-friendly.

Section 25.11

Putting It Together: Building a Page from Sections

Now you have all the components. Let us see how they assemble into a complete page. Here is the full HTML for a homepage that uses the sections you have learned in this chapter. The file is index.html in the root of the project folder.

HTML — a complete homepage built from sections
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Student Learning Site</title>
  <link rel="stylesheet" href="css/main.css" />
</head>
<body>

  <!-- Navigation (covered in Chapter 26) -->
  <header class="site-header">
    <div class="container">
      <a href="index.html" class="site-logo">LearnWeb</a>
      <nav class="site-nav" aria-label="Main navigation">
        <ul role="list">
          <li><a href="index.html" class="nav-link nav-link-active">Home</a></li>
          <li><a href="lessons.html" class="nav-link">Lessons</a></li>
          <li><a href="resources.html" class="nav-link">Resources</a></li>
          <li><a href="about.html" class="nav-link">About</a></li>
          <li><a href="contact.html" class="nav-link">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main>

    <!-- Hero Section -->
    <section class="hero">
      <div class="container">
        <h1 class="hero-title">Learn Web Development from the Ground Up</h1>
        <p class="hero-description">
          Structured lessons, hands-on projects, and everything you need to build
          real websites with HTML, CSS, and JavaScript.
        </p>
        <div class="hero-actions">
          <a href="lessons.html" class="btn btn-primary">Start Learning</a>
          <a href="about.html" class="btn btn-secondary">About This Site</a>
        </div>
      </div>
    </section>

    <!-- Feature List Section -->
    <section class="content-section">
      <div class="container">
        <div class="section-header">
          <h2>What You Will Learn</h2>
          <p class="section-subtitle">
            Six areas of study covering everything from your first HTML tag
            to publishing a complete, accessible website.
          </p>
        </div>
        <ul class="feature-list" role="list">
          <li class="feature-item">
            <div class="feature-icon" aria-hidden="true">🏗️</div>
            <div class="feature-content">
              <h3 class="feature-title">HTML Structure</h3>
              <p class="feature-description">
                How to build meaningful, semantic document structure
                that works for users and search engines alike.
              </p>
            </div>
          </li>
          <li class="feature-item">
            <div class="feature-icon" aria-hidden="true">🎨</div>
            <div class="feature-content">
              <h3 class="feature-title">CSS Styling and Layout</h3>
              <p class="feature-description">
                How to style pages with consistent typography, color, spacing,
                Flexbox, Grid, and responsive design.
              </p>
            </div>
          </li>
          <li class="feature-item">
            <div class="feature-icon" aria-hidden="true">⚡</div>
            <div class="feature-content">
              <h3 class="feature-title">JavaScript Interaction</h3>
              <p class="feature-description">
                How to respond to user actions, update the page, and
                validate forms with browser-native JavaScript.
              </p>
            </div>
          </li>
          <li class="feature-item">
            <div class="feature-icon" aria-hidden="true">📐</div>
            <div class="feature-content">
              <h3 class="feature-title">Project Organization</h3>
              <p class="feature-description">
                How to structure multi-page websites with shared navigation,
                clean files, and reusable components.
              </p>
            </div>
          </li>
        </ul>
      </div>
    </section>

    <!-- Lesson Cards Section -->
    <section class="content-section content-section-alt">
      <div class="container">
        <div class="section-header">
          <h2>Course Lessons</h2>
          <p class="section-subtitle">
            Browse lessons by topic, from foundations to publishing.
          </p>
        </div>
        <div class="card-grid">

          <div class="card">
            <img class="card-image"
                 src="images/lesson-foundations.jpg"
                 alt="Browser window showing a web page loading" />
            <div class="card-body">
              <h3 class="card-title">Foundations of the Web</h3>
              <p class="card-description">
                How the internet works, how browsers request and render pages,
                and how to set up your first project folder.
              </p>
              <a href="lessons/foundations.html" class="card-link">Begin Lesson →</a>
            </div>
          </div>

          <div class="card">
            <img class="card-image"
                 src="images/lesson-html.jpg"
                 alt="HTML code with semantic elements highlighted" />
            <div class="card-body">
              <h3 class="card-title">HTML: Structure and Meaning</h3>
              <p class="card-description">
                Elements, attributes, semantic tags, links, images, forms,
                and how to build well-structured HTML documents.
              </p>
              <a href="lessons/html.html" class="card-link">Begin Lesson →</a>
            </div>
          </div>

          <div class="card">
            <img class="card-image"
                 src="images/lesson-css.jpg"
                 alt="CSS rules and colorful layout boxes" />
            <div class="card-body">
              <h3 class="card-title">CSS: Style and Layout</h3>
              <p class="card-description">
                Selectors, the box model, Flexbox, Grid, responsive design,
                custom properties, and reusable style systems.
              </p>
              <a href="lessons/css.html" class="card-link">Begin Lesson →</a>
            </div>
          </div>

        </div>
      </div>
    </section>

    <!-- Callout / Notice Section -->
    <section class="content-section">
      <div class="container container-narrow">
        <div class="callout callout-tip">
          <div class="callout-icon" aria-hidden="true">💡</div>
          <div class="callout-content">
            <strong class="callout-label">Tip for New Students</strong>
            <p>
              Start with the Foundations section before jumping ahead. Each part
              of this course builds on the last. Taking time to understand how the
              web works will make everything else easier.
            </p>
          </div>
        </div>
      </div>
    </section>

  </main>

  <!-- Footer (covered in Chapter 26) -->
  <footer class="site-footer">
    <div class="container">
      <p class="footer-credit">Student Learning Site — MGU Web Development</p>
    </div>
  </footer>

</body>
</html>
What to Notice

This is not a small exercise. This is a real homepage built from reusable sections. Notice how each section can be read independently in the HTML, how each section follows the two-layer container pattern, and how the page assembles like building blocks.

Chapter 25 — Back Matter

Chapter Summary

Key Terms

hero section
The large top section of a page, typically containing a headline, supporting description, and call-to-action buttons. It orients the visitor and communicates the site's primary purpose.
container
A div element with a max-width and centered margins, used inside sections to limit content width and keep it readable on wide screens.
card
A self-contained visual unit grouping related information, typically with an image or icon, a title, a short description, and a link.
card grid
A CSS Grid layout used to arrange multiple cards in columns, with responsive breakpoints that reduce columns on smaller screens.
callout
A visually distinct block that draws attention to a note, tip, warning, or important message, often with a colored left border and a descriptive label.
reusable class
A CSS class designed to be applied in multiple places across a website, making it possible to change a style in one place and have the change propagate everywhere.
modifier class
A CSS class applied alongside a base class to add or override specific styles for a variation, without duplicating the base class rules.
spacing scale
A set of named CSS variable values for spacing (margin, padding, gap) that ensures all spacing decisions use a consistent set of sizes.
vertical rhythm
The visual consistency created by applying uniform top and bottom padding to stacked sections, giving a page a readable sense of space and pace.
feature list
A section pattern that presents multiple related items, each with an icon, a title, and a short description, arranged in a grid for scannable reading.
call to action (CTA)
A button or link that invites the user to take a specific action, such as "Start Learning", "Contact Us", or "View Resources".
object-fit: cover
A CSS property applied to images that scales the image to fill its container while maintaining aspect ratio and cropping edges if necessary.
PracticeCode Reading

Exercise CR-25-A

Read the following HTML and answer the questions below.

HTML
<section class="content-section content-section-alt">
  <div class="container">
    <div class="section-header">
      <h2>Featured Resources</h2>
      <p class="section-subtitle">
        Guides, references, and tools for learning web development.
      </p>
    </div>
    <div class="card-grid">
      <div class="card card-featured">
        <div class="card-body">
          <h3 class="card-title">HTML Element Reference</h3>
          <p class="card-description">
            A complete guide to every HTML element covered in this course,
            with usage examples and accessibility notes.
          </p>
          <a href="resources/html-reference.html" class="card-link">
            View Reference →
          </a>
        </div>
      </div>
      <div class="card">
        <div class="card-body">
          <h3 class="card-title">CSS Selector Chart</h3>
          <p class="card-description">
            A printable reference for CSS selectors, specificity,
            and the cascade.
          </p>
          <a href="resources/css-selectors.html" class="card-link">
            View Chart →
          </a>
        </div>
      </div>
    </div>
  </div>
</section>
  1. This section uses two classes: content-section and content-section-alt. What is the purpose of having two classes on one element instead of a single class?
  2. The first card has the class card card-featured. The second card has only card. What styling behavior do you expect to differ between these two cards?
  3. Neither card has a .card-image element. How would the .card-body rendering likely differ from a card that does include an image?
  4. The .container inside the section does not have a modifier class like .container-narrow. What does this tell you about the expected layout width?
  5. Rewrite the link text "View Reference →" to be equally descriptive but slightly more informative for a user navigating by screen reader.

Exercise CR-25-B

Read the following CSS and answer the questions.

CSS
.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.feature-item {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.feature-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.feature-content {
  flex: 1;
}

@media (max-width: 640px) {
  .feature-list {
    grid-template-columns: 1fr;
  }
}
  1. Why does .feature-list set list-style: none and padding: 0?
  2. The .feature-icon has flex-shrink: 0. What problem would occur without this declaration?
  3. On a screen 800px wide, how many columns does the feature list display?
  4. On a screen 400px wide, how many columns does the feature list display?
  5. What does align-items: flex-start do in .feature-item? How would the layout look different with align-items: center?
PracticeCode Tracing

Exercise CT-25-A

Trace through the following CSS to determine what visual properties the described card would have.

Given CSS variables
:root {
  --color-bg-card: #ffffff;
  --color-primary: #1a73e8;
  --color-text-on-primary: #ffffff;
  --radius-md: 8px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --space-md: 1rem;
  --space-xs: 0.25rem;
  --text-xl: 1.25rem;
  --text-base: 1rem;
  --text-sm: 0.875rem;
  --color-text-muted: #555;
}
Given card CSS
.card {
  background-color: var(--color-bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease;
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card-featured {
  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
}
  1. A .card element (not hovered) has what background color, border radius, and box shadow?
  2. When a user hovers over a .card, what changes and what stays the same?
  3. An element with classes card card-featured has what background color? Why does the .card-featured declaration override .card?
  4. Write the resolved (actual) values for the following declarations in .card: background-color, border-radius, box-shadow.
PracticePredict the Result

Exercise PR-25-A

Look at the following HTML structure without any CSS. Predict what the browser would display, then describe what it would look like after the CSS in this chapter is applied.

HTML
<section class="hero">
  <div class="container">
    <h1 class="hero-title">Welcome</h1>
    <p class="hero-description">Get started today.</p>
    <div class="hero-actions">
      <a href="#" class="btn btn-primary">Sign Up</a>
      <a href="#" class="btn btn-secondary">Learn More</a>
    </div>
  </div>
</section>
  1. Without CSS: how does the browser display this content?
  2. After .hero adds a dark background color and padding-block: var(--space-2xl): how does the section's appearance change?
  3. After .container adds max-width: 1100px and margin-inline: auto: how does content behavior change at a viewport width of 1400px? At 800px?
  4. After .hero-actions adds display: flex; gap: var(--space-sm); justify-content: center: how do the two buttons appear relative to each other?
  5. After .btn-secondary adds border: 2px solid var(--color-primary); background-color: transparent; color: var(--color-primary): how does the "Learn More" button visually differ from the "Sign Up" button?
PracticeDebugging and Error Analysis

Exercise DA-25-A

The following card has a layout problem. When placed in a three-column grid alongside other cards, it does not match their height, and the link sits in the middle of the card rather than at the bottom. Identify the missing CSS declarations and explain what each one does.

HTML
<div class="card">
  <img class="card-image" src="images/lesson.jpg" alt="Coding screen" />
  <div class="card-body">
    <h3 class="card-title">CSS Layout</h3>
    <p class="card-description">
      Flexbox, Grid, and responsive design.
    </p>
    <a href="lessons/css.html" class="card-link">Start →</a>
  </div>
</div>
Current CSS
.card {
  background-color: var(--color-bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card-body {
  padding: var(--space-md);
}

.card-description {
  color: var(--color-text-muted);
}
  1. What CSS property and value is missing from .card that causes the height problem?
  2. What two CSS properties are missing from .card that prevent it from being a flex column?
  3. What CSS property is missing from .card-description that keeps the link from pushing to the bottom?
  4. Write the corrected .card and .card-body CSS.

Exercise DA-25-B

The following button has a critical accessibility problem. Identify and fix it.

CSS
.btn {
  display: inline-flex;
  align-items: center;
  padding: 0.6em 1.4em;
  font-weight: 600;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.btn:focus {
  outline: none;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-text-on-primary);
}
  1. What accessibility problem does outline: none on .btn:focus create?
  2. Which users are most affected by this problem?
  3. Write a replacement for the .btn:focus rule that maintains keyboard accessibility while providing good visual design.
PracticeShort Build Tasks
Task SB-25-A — Container Experiment

Create a file named container-test.html. Inside a <main> element, create three sections, each with a .container inside. Apply a different background color to each section and set max-width: 800px with margin-inline: auto on the container.

Add enough text to each section to make the experiment readable. Open the file in a browser and resize the window to observe how the container behaves at different widths. Write two sentences describing what you observe when the browser window is narrower than 800px.

Task SB-25-B — Card with Equal Height Links

Build a set of three cards using the card HTML and CSS from this chapter. Give each card a different-length description — one short, one medium, one long. Apply the full .card CSS including display: flex; flex-direction: column on the card and flex: 1 on .card-description.

Describe in writing what happens to the link position in each card. Then remove flex: 1 from .card-description and observe the difference.

Task SB-25-C — Callout Variations

Build all four callout types from this chapter (note, tip, warning, important) on a single HTML page. Each callout should have a different icon, label, and short message.

Without changing the base .callout CSS, use only the modifier classes (.callout-note, .callout-tip, .callout-warning, .callout-important) and CSS variables to control the background and border colors.

Task SB-25-D — Feature List Collapse

Take the four-item feature list from Section 25.8 and adjust the media query breakpoint to see how layout changes. First, change the breakpoint from 640px to 900px and preview the layout. Then change it to 400px. Write one paragraph explaining what breakpoint you would choose for a real website and why.

Mini-Project: Landing Page Sections
Build a complete single-page website using the section patterns from this chapter

Project goal: Build a complete single-page website for a fictional student project, school club, or learning resource using the section patterns from this chapter.

Suggested themes: a study guide site for a school subject, a school club website (robotics, drama, coding, art), a local community resource directory, a personal learning portfolio, or a fictional small business.

Requirements
  • A valid HTML5 document structure with linked external CSS
  • A hero section with a headline, description, and at least one button
  • A feature list section with at least four items, each with an icon, title, and description
  • A card grid section with at least three cards, each with a title, description, and link
  • One callout (note, tip, warning, or important)
  • Consistent use of a container inside every section
  • At least one responsive breakpoint for the card grid
  • CSS custom properties for at least three colors and the spacing scale
  • Accessible alt text on all images
  • Accessible, meaningful link text on all card links and buttons
Evaluation Checklist
  • All sections use the container pattern
  • Card grid collapses on small screens
  • All images have meaningful alt text
  • All buttons and links have descriptive text (no "click here" or "read more" without context)
  • CSS custom properties are used for colors and spacing
  • CSS is in an external file, not inline or in a <style> block
  • The page looks intentional and consistent, not randomly styled
  • The callout uses the correct class variation for its message type
Accessibility Check
Review the completed Mini-Project page using this checklist
Headings
  • The page has one <h1> (the hero title)
  • Section headings are <h2> elements
  • Card titles are <h3> elements
  • Headings descend logically (h1 → h2 → h3) without skipping levels
Images
  • Every <img> has an alt attribute
  • Alt text describes the image content in context, not just "image" or the filename
  • Decorative icons have aria-hidden="true"
Links and Buttons
  • All link text is descriptive in isolation
  • Buttons have visible :focus-visible styles
  • No links use generic text like "click here" or "read more" without context
Structure
  • The <main> element wraps the page's primary content
  • The hero section uses a <section> element, not a bare <div>
  • Feature lists use <ul> with role="list" to preserve list semantics after CSS reset
Color
  • Primary action buttons have at least 4.5:1 contrast between text and background
  • Muted text (.color-text-muted) still meets minimum contrast requirements against its background
ReviewMixed Review

These questions draw on earlier chapters as well as Chapter 25.

  1. (Chapter 3) Your card grid uses images stored in a folder named images/ inside the project root. You are writing HTML in a file at lessons/css.html. Write the correct relative path for an image named css-diagram.png.
  2. (Chapter 6) A card title is currently written as <div class="card-title">Flexbox Layout</div>. What semantic HTML element should replace this <div>, and why does the semantic element matter?
  3. (Chapter 12) A card has both the class card and card-featured. Both classes set background-color. Which one wins, and why?
  4. (Chapter 14) A .card has padding: var(--space-md) applied to .card-body and box-sizing: border-box applied globally. If the card's total width is 300px, does the padding add to or subtract from the content area?
  5. (Chapter 15) A .hero-actions container uses display: flex; justify-content: center; flex-wrap: wrap. When the viewport is too narrow to show both buttons side by side, what happens?
  6. (Chapter 17) A .card-grid uses grid-template-columns: repeat(3, 1fr). At what viewport width does it make sense to add a media query to switch to two columns? What factors would influence this decision?
  7. (Chapter 18) You want to change the primary button color across an entire site from blue to green. With CSS custom properties, how many places in the stylesheet do you need to edit?
  8. (Chapter 22) You want to write JavaScript that adds the class card-active to whichever card a user clicks. Write the JavaScript addEventListener call that would accomplish this when a user clicks any element with the class card.
Chapter 25 Checklist
Use this to confirm your understanding before moving to Chapter 26
Concepts
  • I can explain the three-layer section pattern: section wrapper, container, content.
  • I can build a container that limits width and centers content using max-width and margin-inline: auto.
  • I can explain why background color belongs on the section, not the container.
  • I can explain why flex: 1 on a card description keeps cards in a row at equal height.
  • I can explain the difference between a reusable class and a modifier class.
  • I can explain what a spacing scale is and why it produces vertical rhythm.
Applications
  • I can build a hero section with a headline, description, and call-to-action buttons.
  • I can build a responsive card grid that collapses columns at defined breakpoints.
  • I can build accessible callout boxes using aria-hidden on decorative icons.
  • I can build a button system with primary, secondary, and ghost variants, including focus-visible styles.
  • I can build a feature list using semantic <ul> markup with role="list".
  • I can assemble a complete homepage from hero, content, card, and callout sections.
Preview — Chapter 26
Navigation, Headers, Footers, and Multi-Page Sites

Chapter 25 taught you how to build well-structured, consistent, reusable sections on a single page. The next step is applying those same patterns across multiple linked pages — the home page, the about page, the lessons pages, the resources page, and the contact page — while keeping navigation, headers, footers, and design consistent everywhere.

Chapter 26 covers shared site headers, shared footers, navigation menus, active navigation states, relative paths across nested folders, breadcrumbs, and the discipline of maintaining a multi-page site without a framework. You will build a five-page version of the Student Learning Site that will serve as the foundation for the rest of the course.

MGU Library Connection
  • Web Development: HTML, CSS, and JavaScript — Appendix E: CSS Layout Reference
  • Web Development: HTML, CSS, and JavaScript — Appendix F: CSS Variables and Theme Reference
  • Web Development: HTML, CSS, and JavaScript — Appendix K: Website Quality Checklist
  • Companion resource: Flexbox Guide
  • Companion resource: Grid Guide
  • Companion resource: Accessibility Checklist
  • Next chapter: Chapter 26 — Navigation, Headers, Footers, and Multi-Page Sites