LESSON 2

How CSS Works

Learning objective: Learn the three ways to add CSS and which to prefer.

Understand

CSS can be attached to HTML in three ways.

You can write CSS inline (a style attribute), internal (a <style> block in the head), or external (a .css file linked with <link>). External stylesheets are best because one file can style your whole site.

Analogy: An external stylesheet is like one wardrobe that dresses every page consistently.

See It in Action

Linking an external stylesheet:

<link rel="stylesheet" href="style.css">
How it works: The <link> tag in the head loads style.css, applying all its rules to the page.

Try It Yourself

  1. Create a style.css file.
  2. Link it from your HTML with <link>.
  3. Move a rule from a <style> block into the file.

Quick Quiz

Which method is best for styling a whole site?

Challenge

Move all of a page's styles into one external stylesheet.

Success condition: Your page looks the same but all styling lives in an external file.