Your First Stylesheet

Let's build something real. This page walks you through creating an HTML file, linking a stylesheet, and writing CSS rules that actually change how the page looks. Every concept introduced here will be explored in depth later — for now, the goal is to get something working and understand the pattern.

Step 1 — the HTML file

Create a file called index.html with this content:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First Styled Page</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <header>
    <h1>Welcome to My Page</h1>
    <nav>
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Contact</a>
    </nav>
  </header>

  <main>
    <h2>About Me</h2>
    <p>I'm learning CSS and building my first styled page. It's going well!</p>
    <p>CSS lets me control <strong>colours</strong>, fonts, spacing, and layout.</p>
  </main>

  <footer>
    <p>Made with HTML & CSS</p>
  </footer>

</body>
</html>

Open this in a browser and you'll see unstyled text — black on white, the browser's default. Now create styles.css in the same folder.

Step 2 — your first CSS rules

Add the following to styles.css, one block at a time, saving and refreshing to see each change:

CSS

/* 1. Set a base style for the whole page */
body {
  font-family: system-ui, -apple-system, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
  color: #222;
}

/* 2. Style the header */
header {
  background-color: #1a1a2e;
  color: white;
  padding: 20px 40px;
}

h1 {
  margin: 0 0 12px 0;
  font-size: 2rem;
}

/* 3. Style the navigation links */
nav a {
  color: #a8d8ea;
  text-decoration: none;
  margin-right: 20px;
  font-size: 1rem;
}

nav a:hover {
  color: white;
  text-decoration: underline;
}

/* 4. Style the main content area */
main {
  max-width: 720px;
  margin: 40px auto;
  padding: 0 20px;
}

h2 {
  color: #1a1a2e;
  font-size: 1.5rem;
}

p {
  line-height: 1.7;
  margin-bottom: 16px;
}

/* 5. Style the footer */
footer {
  background-color: #1a1a2e;
  color: #aaa;
  text-align: center;
  padding: 16px;
  font-size: 0.875rem;
}

Notice how each rule targets a different element — this is CSS working as a series of instructions: 'find this, make it look like this'

The pattern repeats every time: a **selector** picks the target (`header`, `nav a`, `footer`), then curly braces contain the **declarations** that describe how it should look. Some rules apply to elements directly (`h1`), others use context to be more precise (`nav a` means "anchor tags that are inside a nav element"). You'll learn every selector type in depth in the selectors section.

What each declaration does

Declaration	What it does
`font-family: system-ui, sans-serif`	Use the device's system font (clean, modern), fall back to any sans-serif
`margin: 0; padding: 0`	Remove browser default spacing from the body
`background-color: #f5f5f5`	Light grey page background
`padding: 20px 40px`	20px top/bottom, 40px left/right inner space
`max-width: 720px; margin: auto`	Centre the content and stop it getting too wide
`line-height: 1.7`	Make text easier to read with generous line spacing
`text-decoration: none`	Remove the underline from links
`nav a:hover`	Apply styles only when the mouse hovers over a link

Step 3 — understanding what just happened

Look at what you've achieved with about 50 lines of CSS:

A dark header and footer that stand out from the page
Navigation links that react when you hover over them
Content that is centred and readable, not stretching wall-to-wall on wide screens
Consistent font and colour throughout the page
Proper spacing so things don't feel cramped

None of this required changing a single line of HTML. That's the power of separation of concerns: HTML describes what things are, CSS describes how they look. If you want to change the whole colour scheme, you edit the CSS. If you want to add a new page section, you add HTML and the existing CSS styles it automatically.

Common first mistakes

CSS

/* ❌ Missing semicolon — the rule below will be silently ignored */
h1 {
  color: navy       /* forgot the semicolon */
  font-size: 2rem;  /* this declaration is ignored */
}

/* ❌ Wrong file path — CSS file not linked correctly */
/* In HTML: <link rel="stylesheet" href="css/styles.css"> */
/* But the file is actually in the same folder, not a css/ subfolder */
/* Result: no styles apply at all — page looks unstyled */

/* ✅ Correct */
h1 {
  color: navy;
  font-size: 2rem;
}

/* ❌ Using = instead of : */
h1 {
  color = navy;  /* invalid — CSS uses a colon, not equals */
}

/* ❌ Missing closing brace */
h1 {
  color: navy;
/* forgot the } — everything after this is broken */

If none of your styles are applying at all, the most common cause is a wrong file path in the link tag — check the browser's Network tab in DevTools to confirm the CSS file loaded

Open DevTools → Network tab → reload the page. You'll see every file the browser tried to load. If your `styles.css` shows a 404 status, the path is wrong. Double-check that the `href` in your `<link>` tag exactly matches where the file is on disk, including any subfolder names and the `.css` extension.

Experimenting in DevTools

Right-click on any element on your page and choose "Inspect". In the Styles panel you'll see all the rules you just wrote. Click on any value — say, the background-color of the header — and type a new value. The page updates instantly. This is how professional developers prototype: write a starting point in code, then tweak live in DevTools until it looks right, then copy the final values back to the stylesheet.

Understand the three ways to attach CSS to HTML and when to use each: [Applying CSS](/css/applying-css).