Getting started with CSS

HTML decides what is on a page. CSS decides how it looks. Keeping the two apart means you can restyle a whole website by changing one file.

Anatomy of a rule

A rule has a selector, which picks elements, and declarations, which say what to change. Each declaration is a property and a value.

h1 {
  color: darkgreen;
  font-size: 32px;
}

Where CSS goes

• External file: <link rel="stylesheet" href="site.css"> in the head. Use this for real projects.
• Style block: <style> in the head. Handy for a single page.
• Inline: style="color: red" on one element. Avoid it, because it is hard to maintain and hard to override.

Try it

Change a colour or a size below and watch the preview update.