Lesson 1 of 9

Linking CSS & Setup

You'll learn the ways to add to a page and why a separate linked stylesheet is usually best. Keeping structure () and appearance (CSS) apart makes both easier to change.

There are three ways to add CSS to HTML. The external stylesheet (in a separate .css file, linked with <link>) is the best practice. The others exist but have specific, limited use cases.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Demo</title>

  <!-- Method 1: External stylesheet (BEST — use this) -->
  <link rel="stylesheet" href="styles.css">

  <!-- Method 2: Internal stylesheet (use only for single-page demos) -->
  <style>
    body { font-family: sans-serif; }
  </style>
</head>
<body>
  <!-- Method 3: Inline styles (avoid — mixes concerns, can't be reused) -->
  <p style="color: red; font-size: 18px;">Don't do this except in emergencies.</p>

  <h1>Hello, CSS!</h1>
  <p class="intro">This paragraph is styled via an external stylesheet.</p>
  <p id="special">This paragraph has a unique ID.</p>
</body>
</html>
Sandboxed page
/* styles.css */

/* This is a CSS comment */

/* Selector { property: value; } */
body {
  font-family: Georgia, serif;
  background-color: #f5f5f5;
  color: #333333;
  margin: 0;
  padding: 20px;
}

h1 {
  color: #1a1a1a;
  font-size: 2.5rem;    /* rem = relative to root font size */
}

.intro {
  font-size: 1.1rem;
  color: #555;
  line-height: 1.6;     /* 1.6x the font size */
}

#special {
  background-color: #fff3cd;
  padding: 12px;
  border-left: 4px solid #ffc107;
}
CSS on a sample page
Finished reading?Mark it done to track your progress.

Tip: use the ← and → keys to move between lessons.