CSSCSS · Lesson 1 of 9

Linking CSS & Setup

CSS is written separately from HTML (usually) and linked in. This is the separation of concerns principle: HTML handles structure, CSS handles appearance.

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.

HTML

<!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>

CSS

/* 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;
}

◆ Note
Browser DevTools are your best friend for CSS. In Chrome or Firefox: right-click any element → Inspect. You can live-edit CSS properties in the Styles panel to see changes instantly, then copy them to your file.