External CSS keeps your styles in a separate file called style.css.
It keeps your HTML clean and lets you style many pages at once!

The Link

Step 1

Connect index.html to style.css.

In your HTML file:
<head>
<!-- The Link Tag -->
  <link rel="stylesheet" href="style.css">
</head>
In style.css:
/* Just code! No tags! */
body {
  background-color: blue;
}

The Syntax

How to write a rule in your CSS file.

selector {
  property: value;
}
  • Selector: The tag to change (e.g., h1).
  • Property: What to change (e.g., color).
  • Value: The setting (e.g., blue).
Important: Do NOT put <style> tags inside your .css file. Just write the code!

Images & Box

Background Color

body {
  background-color: lightblue;
}

Image Styling (Width)

img {
  width: 150px;
  border-radius: 20px;
}
I'm an image!

Text Styles

Color & Size

h1 {
  color: red;
  font-size: 40px;
}

Font & Alignment

p {
  font-family: sans-serif;
  text-align: center;
}

I am centered sans-serif text!

CSS Debugging Checklist

Styles not showing up? 99% of the time, it's one of these issues.

  • Did you Link it?

    You need the <link> tag in your HTML <head>.

  • File Name Match?

    style.css vs styles.css? Check spelling carefully!

  • Same Folder?

    Are both files in the same folder? The link won't work otherwise.

  • No HTML in CSS!

    No <style> or <html> tags in .css files.

  • Curly Braces { }

    CSS uses { }. HTML uses < >. Don't mix them up.

  • The Semi-Colon ;

    Every rule ends with ;. Missing one breaks everything after it.

  • Colon vs. Equals

    color = red ❌
    color: red ✅

  • American Spelling

    It is color, NOT colour.

Palette

Safe Fonts

  • Verdana
    font-family: Verdana;
  • Georgia
    font-family: Georgia;
  • Courier New
    font-family: 'Courier New';

Cool Colours

Tomato
DodgerBlue
MediumSeaGreen
SlateBlue
Gold

Tip: Right-click on any element and hit "Inspect" to see its CSS rules!