CSS — Introduction

What is CSS?

CSS stands for Cascading Style Sheets. It's the language that controls how HTML looks: colors, fonts, spacing, layout, animations — everything visual.

The separation of jobs:

• HTML = structure ("this is a heading")
• CSS = appearance ("headings are dark green and 32px")

Change the stylesheet, keep the same HTML, and the entire look of a site transforms. That's the power of CSS.

A first taste

h1 {
  color: teal;
  font-size: 40px;
}
p {
  line-height: 1.6;
}

This makes every <h1> teal and large, and every paragraph comfortably readable.

Anatomy of a rule

selector {
  property: value;
}

• Selector — which elements to style (h1, .card, #header…)
• Property — what you're changing (color, margin…)
• Value — what to change it to
• Each declaration ends with a semicolon

Three ways to add CSS

<!-- 1. External file (best — used by real sites) -->
<link rel="stylesheet" href="styles.css">

<!-- 2. Internal, inside <style> in the head (fine for demos) -->
<style> p { color: red; } </style>

<!-- 3. Inline (avoid except for quick tests) -->
<p style="color: red;">Red text</p>

External stylesheets let many pages share one design — fix it once, fixed everywhere.

Good to know: "Cascade" refers to how CSS resolves conflicts when multiple rules hit the same element. We'll cover that soon.