Someone wanted to learn this too, so Grasp built them a personal learning path.

Styling Web Pages with CSS

Hello again. Your Small Business Starter page now has a meaningful HTML structure: visitors, browsers, and assistive technologies can identify its header, navigation, main content, supporting tip, and footer. It looks plain because the browser is currently supplying its own default styles.

In this lesson, you will add a stylesheet and use CSS to make deliberate decisions about typography, spacing, color, and layout. The aim is not visual decoration for its own sake: a clear interface helps a busy beginner or small-business owner understand what matters and where to go next.

CSS: presentation built on structure

HTML describes what content is; CSS describes how that content is presented. Keeping those responsibilities separate makes a site easier to revise. You can redesign the page without rewriting its meaningful landmarks, headings, and links.

A CSS rule has three essential parts:

selector {
  property: value;
}

For example:

h1 {
  color: #ffffff;
  font-size: 2.25rem;
}

h1 is the selector: it chooses every level-one heading.
color and font-size are properties: aspects of the selected element you want to control.
#ffffff and 2.25rem are values: the particular choices for those properties.
The braces contain a declaration block. Each declaration ends with a semicolon.

The browser reads the HTML into a structured page model, finds the CSS rules that match each element, and uses both to render the visible result. Your semantic <main> stays a main-content landmark after CSS makes it a white panel; CSS changes appearance, not meaning.

What is CSS? - Learn web development | MDN

Read MDN’s concise introduction to see the separation between HTML structure and CSS presentation, then connect its rule syntax to the code you will write.

In the “What is CSS for?” and “CSS syntax basics” sections, read from the paragraph beginning CSS purpose through the explanation and examples of selectors, declaration blocks, properties, and values. Then read “How is CSS applied to HTML?”, focusing on browser styling.

Two selector forms will be especially useful today:

p {
  line-height: 1.5;
}

.resource-grid {
  display: flex;
}

nav a {
  color: #ffffff;
}

The first selects all paragraph elements. The second starts with a period because it selects elements whose HTML class includes resource-grid. The third is a descendant selector: it selects links inside a navigation element, without changing every link that might be added elsewhere on the page.

Attach a stylesheet and establish readable typography

Open index.html in VS Code. Inside the <head>, place this line below the viewport <meta> element and above <title>:

<link rel="stylesheet" href="styles/main.css">

This tells the browser to load a CSS file named main.css from the styles folder. Be precise about the path: since index.html is in the project’s top-level folder and main.css is inside styles, the path is styles/main.css.

Now open—or create—styles/main.css. Add this first block and save both files.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #24323d;
  background-color: #f4f7f5;
}

h1,
h2,
h3 {
  font-weight: 700;
  line-height: 1.15;
}

h1 {
  margin: 0;
  font-size: 2.25rem;
}

h2 {
  margin: 0 0 0.75rem;
  font-size: 1.5rem;
}

h3 {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
}

p {
  margin: 0 0 1rem;
}

Save the CSS file and refresh the browser page. It will not yet look finished, but its text should already have a more consistent character.

Why these typography decisions work

The font-family value is a font stack. The browser tries the choices from left to right:

system-ui requests the operating system’s standard interface typeface.
"Segoe UI" is a familiar Windows fallback.
sans-serif is a generic final fallback available in every browser.

This approach avoids downloading a custom font for a small starter project, keeping the page lighter and more dependable while still providing an intentional appearance.

The unit rem means root em. It is relative to the browser’s root text size, which is commonly equivalent to 16 pixels but may differ if a user has changed browser preferences. Therefore:

1rem is normal body-text size.
2.25rem is $2.25$ times the root text size.
1.125rem is slightly larger than body text.

For general page text and spacing, rem values give you a coherent scale. A 1px value remains useful for fine visual details such as a thin border.

line-height: 1.5 is intentionally unitless. It acts as a multiplier of each element’s own font size and is inherited by paragraphs. This gives ordinary text enough vertical breathing room to remain readable, especially when a paragraph wraps over several lines.

CSS Typography - Change Font, Size, Spacing & more

Watch “CSS Typography - Change Font, Size, Spacing & more” from LearnWebCode for a quick visual tour of the properties you are applying.

Watch font choices for font-family, font size, and units. Then skip to line height to see how line spacing and text alignment affect reading.

Avoid using typography to compensate for unclear HTML. For instance, an <h3> should be used because the content is a third-level heading in the page outline—not because it happens to have a convenient default size. CSS gives any valid heading the visual size you choose.

Spacing and the box model

When a page feels cramped or disorganized, the problem is often not the words or colors. It is usually spacing. CSS treats every element as a rectangular box made of four layers:

The CSS box model: content sits at the center; padding adds internal space around it; a border surrounds that padding; margin creates space outside the element, separating it from neighboring boxes.

Think of an article card containing a heading and paragraph:

The content is the heading and paragraph.
Padding keeps the text away from the card’s edge.
A border outlines the card.
Margin creates space between the card and other page elements.

The difference between margin and padding is one of the most important practical distinctions in CSS:

article {
  padding: 1.25rem;
  margin: 1rem;
}

The padding is inside the article’s boundary, while the margin is outside it. If an element has a background color, you will see that background behind its padding. You will not see it in its margin.

The first rule in your stylesheet also matters:

* {
  box-sizing: border-box;
}

The asterisk, *, is the universal selector: it selects all elements. With border-box, an element’s declared width includes its padding and border. This is usually easier to reason about when building layouts because a box does not quietly become wider after you add padding.

Before adding the next CSS block, update the resources section in index.html. Keep its <h2> and two <article> elements, but wrap the two articles in a generic <div>. A <div> is appropriate here because the wrapper is only needed for layout; it does not introduce a new content meaning.

<section id="resources">
  <h2>Starter resources</h2>

  <div class="resource-grid">
    <article>
      <h3>Define one audience</h3>
      <p>
        Describe a specific person you want to help. Avoid trying to serve every
        possible customer at once.
      </p>
    </article>

    <article>
      <h3>Test the smallest useful version</h3>
      <p>
        Make one workflow work from beginning to end before adding dashboards,
        accounts, notifications, or advanced customization.
      </p>
    </article>
  </div>
</section>

Now append this spacing and layout foundation to styles/main.css:

header,
main,
footer {
  max-width: 70rem;
  margin-left: auto;
  margin-right: auto;
  padding: 1.5rem;
}

main {
  margin-top: 1.5rem;
  background-color: #ffffff;
  border-radius: 0.75rem;
}

section + section {
  margin-top: 2rem;
}

.resource-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.resource-grid article {
  flex: 1 1 16rem;
  padding: 1.25rem;
  border: 1px solid #cad8d2;
  border-radius: 0.5rem;
}

Here, max-width: 70rem prevents the primary page regions from becoming uncomfortably wide on a large display. margin-left: auto and margin-right: auto distribute unused horizontal space evenly, centering those regions.

The .resource-grid rule introduces Flexbox, a layout system for arranging direct child elements. Its three declarations have distinct jobs:

Declaration	Effect
`display: flex`	Places the two article cards in a flexible row when space permits.
`flex-wrap: wrap`	Allows cards to move to another line instead of being squeezed indefinitely.
`gap: 1rem`	Creates consistent space between cards without manually adding margins to each card.

The flex: 1 1 16rem declaration on each article says that a card can grow, can shrink, and begins with a preferred width of 16rem. You do not need to memorize the three numbers yet. Notice the outcome: two balanced cards at a typical desktop width, with room for the layout to adapt as space narrows. A later lesson will develop responsive design systematically.

CSS values and units - Learn web development | MDN

Read the selected MDN material to make your choices of rem, px, percentage-based sizing, and hex colors deliberate rather than arbitrary.

In “Numbers, lengths, and percentages,” read the explanation of absolute and relative lengths, concentrating on relative sizing and the subsections “ems and rems” and “Percentages.” Then, in “Color,” read from color values through “RGB values.” Focus on hex codes and RGB as ways to make color choices precise.

Use color to create hierarchy, not noise

Color should help a visitor recognize page regions and priorities:

A darker header establishes the site identity and makes navigation distinct.
A white main panel gives the central content a calm reading surface.
A soft green card background groups the starter resources.
A warm accent makes the supporting tip noticeable without competing with the main content.

Append the following rules to the stylesheet:

header {
  background-color: #174a45;
  color: #ffffff;
  border-radius: 0 0 0.75rem 0.75rem;
}

header p {
  margin-top: 0.75rem;
}

nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

nav a {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  color: #ffffff;
  border-radius: 0.25rem;
}

nav a:hover,
nav a:focus-visible {
  background-color: #2a6d64;
  outline: 3px solid #f4c95d;
  outline-offset: 2px;
}

.resource-grid article {
  background-color: #eef5f1;
}

aside {
  margin-top: 2rem;
  padding: 1.25rem;
  background-color: #fff7df;
  border-left: 0.35rem solid #d48a00;
  border-radius: 0.5rem;
}

aside p {
  margin-bottom: 0;
}

footer {
  margin-top: 1.5rem;
  color: #53616a;
  font-size: 0.9rem;
}

Hexadecimal colors begin with # and use six characters. Each pair controls one of the red, green, and blue color channels. You do not need to calculate color values by hand; what matters now is recognizing that #174a45 precisely identifies one dark green, wherever it appears in the stylesheet.

Notice that the header’s text is explicitly set to white:

header {
  background-color: #174a45;
  color: #ffffff;
}

A dark background does not automatically make its text light. The color property controls foreground text color; background-color controls the background. When choosing a pair, ensure that foreground and background have clear contrast. Low contrast can make text difficult to read in bright light, on low-quality screens, or for people with some visual impairments.

The navigation interaction rule includes both :hover and :focus-visible. A mouse user can see a hover state; someone navigating with a keyboard can see the focus outline. Never remove a focus indicator without providing another clearly visible one.

Inspect your finished page as a system of decisions

Save index.html and styles/main.css, then refresh the browser. Test the page at both your usual browser width and a narrower width by dragging the side of the browser window.

Use this implementation checklist:

The browser tab still says Small Business Starter.
The page has a dark header, readable white text, and visibly styled navigation links.
The main content appears on a centered white panel.
The two resource articles appear as coordinated cards when sufficient horizontal space is available.
The cards wrap rather than overflowing when the browser becomes narrow.
The “Keep the first version small” aside is visually distinct but remains less dominant than the main sections.
The navigation links still scroll to their matching page sections.
You can use the Tab key to move through the navigation links and see a focus indicator.

If none of the styles appear, work through these checks in order:

Confirm the stylesheet link is inside <head>:

<link rel="stylesheet" href="styles/main.css">

Confirm the file and folder names are exactly styles/main.css.
Save both files with Ctrl+S.
Refresh the browser with Ctrl+R.
Look for a missing {, }, :, or ; near the point where styles stop applying.

CSS is sensitive to small syntax mistakes, but browsers often continue applying rules they can still understand. When something looks wrong, narrow the search: check the selector, then the property spelling, then punctuation and braces.

Wrap-up

You have transformed semantic HTML into a purposeful interface without changing the page’s underlying structure.

The key ideas are:

CSS rules combine a selector with property–value declarations.
An external stylesheet keeps presentation separate from HTML content and meaning.
A font stack, rem sizing, and a readable line-height create a practical typography foundation.
The box model distinguishes content, padding, border, and margin.
max-width, automatic side margins, Flexbox, wrapping, and gap provide a simple layout system.
Hex colors give you repeatable visual decisions; foreground and background colors must retain clear contrast.
CSS should reinforce hierarchy and usability, not merely add decoration.

Next, you will initialize a Git repository for this project, make your first commit, and learn how version control gives you a safe record of each meaningful change.

Previous lesson

Building a Web Page with Semantic HTML

Next lesson

Initializing and Inspecting Git Commits

Can't find a good explanation? Sign up and we'll make it for you