Connect a stylesheet and select meaningful content

After this lesson you will be able to link a stylesheet to a page, write rules with element, class and ID selectors, and use developer tools to find out why a style is missing.

Start with one idea

CSS, or Cascading Style Sheets, controls a page’s appearance. HTML says “this is a heading”; CSS says “show it in this size and color.” A stylesheet is a file of CSS rules. A selector chooses the page parts a rule changes, much like pointing to the items you want to paint.

Style should support the page's task

This course needs the HTML from Build Your First Website: pages with headings, regions and navigation. The project is a community resource website with navigation, learning cards and a clear contact section. HTML identifies what each part means. CSS changes how those parts look. First decide what a visitor needs to find. Then use space and readable text to make it easy to find. Typography means choices about letters: their font, size, and spacing.

Use the same editor and browser as the HTML course. Create a community-resources folder with index.html and styles.css. If you only have a tablet, a free online editor such as CodePen (codepen.io) gives you separate HTML and CSS panels with a live preview. The exercises need no framework, paid account or JavaScript. Keep your finished HTML course files as a reference and work in a copy.

Save this as index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Community resource practice</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header><h1>Community resource practice</h1></header>
  <main id="content">
    <p class="intro">Find an approachable place to begin learning.</p>
    <section class="resource"><h2>Writing clear messages</h2>
      <p>An introductory workshop for everyday communication.</p>
    </section>
  </main>
  <footer><p>Original practice content using invented details.</p></footer>
</body>
</html>

Save this as styles.css:

body { font-family: system-ui, sans-serif; color: #20352a; background: #f5faf6; }
h1 { font-size: 2rem; }
.intro { font-weight: 600; }
.resource { padding: 1rem; border: 1px solid #526c5b; background: white; }
#content { max-width: 45rem; margin-inline: auto; }

Open the HTML file. Expect a green-tinted page, a bold introductory paragraph and a bordered white section. Read one rule in parts. In .intro { font-weight: 600; }, .intro is the selector: it chooses elements with the intro class. font-weight: 600 is a declaration: font-weight names what to change, and 600 gives the value.

• h1 selects all h1 elements.
• .intro selects elements with the intro class. A class can be shared by several elements.
• #content selects the element with id="content". An ID must be unique on the page.

In the example, rem is a size unit based on the root element’s text size. With a 16-pixel root size, 2rem is 32 pixels. padding adds space inside a box, border draws its edge, and margin adds space outside. The next lesson looks at those spaces in detail.

Practice deliberate changes

Add a second resource section using the same class. Both should receive identical card styling. Change the border color and predict which elements respond. Add a class named note to the footer paragraph and style only that note. Keep heading levels meaningful; do not choose h3 merely because its default text looks smaller.

Open developer tools

Press F12, or Ctrl+Shift+I on Windows and Linux, or Cmd+Option+I on a Mac. (In Safari, first turn on Settings, then Advanced, then Show features for web developers.) Two panels matter in this course:

• Elements (Firefox calls it Inspector): click a line of HTML and the Styles pane beside it lists every CSS rule that applies to that element.
• Network: lists every file the page loaded. Reload the page with the panel open to fill the list.

Debug a disconnected stylesheet

Rename styles.css to style.css without changing the link. The browser still displays your HTML, but every style disappears. Open the Network panel and reload: styles.css appears in red with status 404, which means "not found". Restore the correct name and reload; the row turns normal and the styles return. Also try a missing closing brace in a copy and observe which rules remain active. Fix one error at a time.

Check yourself

1. Why use classes for cards?
2. Why keep the viewport declaration?
3. Does CSS replace HTML semantics?

Answers

1. Several sections can share one visual role.
2. It makes mobile browsers lay the page out at the device's real width instead of a zoomed-out desktop width.
3. No; appearance and meaning have different responsibilities.

Save your progress

Keep two working files, two resource sections and a short README describing the page's purpose and how to open it.

Reference: MDN CSS basics.