Lesson 39 +10 XP

HTML CSS - Three Ways

HTML CSS: Three Ways

CSS makes HTML beautiful. There are three ways to add CSS to your page. Think of them as: spray paint, a paint bucket, and a shared paint recipe book.

1. Inline CSS: spray paint

Add CSS right on one element with the style attribute.

<p style="color: blue;">Only this paragraph is blue.</p>

Fast and specific.
Only affects that one element.

2. Internal CSS: paint bucket

Put a <style> block inside <head>. It styles everything on this one page.

<!DOCTYPE html>
<html>
<head>
  <style>
    body { background-color: linen; }
    p { color: maroon; }
  </style>
</head>
<body>
  <p>This whole page follows the style rules.</p>
</body>
</html>

Selectors like p pick every paragraph.
Affects the whole page.

3. External CSS: shared recipe book

Put CSS in a separate .css file, and link it with <link>. Many pages can share it.

<link rel="stylesheet" href="styles.css">

In styles.css:

body { background-color: powderblue; }
h1 { color: blue; }
p { color: red; }

Best for big websites.
Change one file, update every page!

The CSS box model (quick peek)

Every element is a box with:

padding (space inside the border)
border (the edge)
margin (space outside the border)

div {
  padding: 20px;
  border: 3px solid black;
  margin: 10px;
}

Common CSS properties

color and background-color
font-family and font-size
text-align and border
padding and margin

TL;DR

Inline = style attribute on one element.
Internal = <style> in the head, styles one page.
External = separate .css file via <link>, shared across pages.
External is best for real websites.
Every element is a box: padding, border, margin.