Adding style to a page
What CSS is, how a rule is written, and the three ways to add CSS to a page.
What is CSS?
CSS (Cascading Style Sheets) describes how HTML elements look: colours, fonts, spacing, layout and even animation. HTML says *what* something is; CSS says *how it looks*.
A CSS rule
h1 {
color: #000080;
font-size: 2rem;
}| Part | Example | Meaning |
|---|---|---|
| Selector | h1 | Which elements to style |
| Property | color | What to change |
| Value | #000080 | What to change it to |
| Declaration | color: #000080; | One property and its value, ending with ; |
Three ways to add CSS
<!-- 1. External file (best): one file styles every page -->
<link rel="stylesheet" href="style.css">
<!-- 2. Internal: a <style> block in the <head> -->
<style>
p { line-height: 1.6; }
</style>
<!-- 3. Inline: on one element only (avoid) -->
<p style="color: red;">Warning</p>CodeLab challenge
Style a welcome card
Give the card a background colour, rounded corners and some padding. Try changing the values and press Run.
Check your understanding
Quick check
In "p { color: red; }", what is p?
Why: The selector chooses which elements the rule applies to.
Quick check
What is the best way to add CSS to a whole website?
Why: One external file is easiest to maintain.
Quick check
What ends each declaration?
Why: Declarations end with ;