Introduction to CSS

CSS (Cascading Style Sheets) controls how HTML looks: colors, spacing, fonts, layout. HTML says what something is; CSS says how it should appear. Keeping those two jobs separate is what lets you completely redesign a page's look without touching its structure at all.

Example 1: the anatomy of a rule

h1 {
  color: #2f7dff;
  font-size: 32px;
}

A CSS rule has a selector (h1 — what to style) and a block of declarations in curly braces, each a property: value; pair. This one rule applies to every <h1> on the page at once.

Example 2: three ways to attach CSS, and why one wins

<!-- 1. Inline — on one element, avoid this -->
<p style="color: red;">Text</p>

<!-- 2. Internal — in the page's head -->
<style> p { color: red; } </style>

<!-- 3. External — a separate .css file, the usual real-project choice -->
<link rel="stylesheet" href="styles.css">

An external file is almost always the right choice for a real project: one file can style every page on a whole site, the browser caches it so repeat visits load faster, and it keeps styling completely out of your HTML markup, exactly matching the "what vs. how it looks" split this lesson opened with.