Your First Stylesheet

Create index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My First Stylesheet</title>
    <link rel="stylesheet" href="css/styles.css">
  </head>
  <body>
    <h1>Hello, CSS!</h1>
    <p>This paragraph will be styled.</p>
    <p class="note">This one is a note.</p>
  </body>
</html>

And css/styles.css:

body {
  font-family: system-ui, sans-serif;
  margin: 2rem;
  background: #fdfaf5;
  color: #222;
}

h1 {
  color: #b5451b;
}

.note {
  background: #fff3c4;
  padding: 0.75rem;
  border-left: 4px solid #e0a800;
}

Open index.html in your browser. The page now has a warm off-white background, a clean system font, a rust-colored heading, and the second paragraph sits in a yellow box with a darker stripe on the left.

• <link rel="stylesheet" href="css/styles.css"> in the head loads the stylesheet. The path is relative to the HTML file.
• body { ... } styles the body element — and many properties, like font-family and color, are inherited by everything inside it.
• .note selects elements with class="note".

Check what the browser computed

A short script can read the computed style — the final value after all the rules are applied. Here the CSS is in a style element so the example is self-contained:

<style>
  body { font-family: system-ui, sans-serif; color: #222; }
  h1 { color: #b5451b; }
  .note { background: #fff3c4; padding: 0.75rem; }
</style>
<h1>Hello, CSS!</h1>
<p class="note">This one is a note.</p>
<script>
  const h1 = getComputedStyle(document.querySelector("h1"));
  const note = getComputedStyle(document.querySelector(".note"));
  console.log("h1 color:", h1.color);
  console.log("h1 font-family:", h1.fontFamily);
  console.log("note background:", note.backgroundColor);
  console.log("note padding:", note.padding);
</script>

h1 color: rgb(181, 69, 27)
h1 font-family: system-ui, sans-serif
note background: rgb(255, 243, 196)
note padding: 12px

Colors come back as rgb(), and 0.75rem became 12px (the default root font size is 16 pixels). The h1 inherited its font from body.

Common mistakes

• The wrong path in href — the page shows unstyled. Check the Network panel in DevTools for a red 404.
• A missing ; between declarations — the next declaration becomes invalid and is skipped.
• Forgetting the . before a class name in the selector.

Practice

Add a rule that makes all paragraphs 18 pixels, and makes the heading centered (text-align: center).

p {
  font-size: 18px;
}

h1 {
  color: #b5451b;
  text-align: center;
}