What Is CSS?

HTML gives a page its structure. CSS is what makes that structure look good. With CSS you can change colors, spacing, fonts, sizes, layouts and much more.

The name stands for Cascading Style Sheets. A style sheet is just a list of rules about appearance. The word cascading describes what happens when two rules disagree and the browser has to pick one. You will meet that later, so ignore it for now.

A page with no CSS

Here is a small page with no CSS at all. The browser still shows it, using its own default styles.

1
2
3

<h1>Juniper Books</h1>
<p>A small bookshop with a big reading list.</p>
<a href="#">See the new arrivals</a>

Black text, a serif font, a blue underlined link. That is how every page looks before you add anything.

The same page with a few CSS rules

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<style>
  body {
    font-family: Arial, sans-serif;
    background: #fff8f2;
  }
  h1 {
    color: #d94a00;
  }
  a {
    color: #1c1b1f;
  }
</style>
<h1>Juniper Books</h1>
<p>A small bookshop with a big reading list.</p>
<a href="#">See the new arrivals</a>

The HTML did not change. Only the <style> part is new, and the page now has its own font, a background color, an orange heading and a darker link.

What CSS can change

• Colors, fonts and text size
• Space inside and around elements
• Borders, shadows and rounded corners
• Where things sit on the page (rows, columns, grids)
• How a page adapts to a phone or a wide monitor
• Small movements, like a button that changes color when you hover over it