Why CSS Is Needed

You could, in theory, describe every color and size directly inside your HTML. People did exactly that in the early days of the web. It went badly, and CSS was invented to fix it.

The problem CSS solves

Imagine a site with 200 pages, and every page has headings that should be dark orange. Without CSS you would have to mark each heading by hand, 200 times over. When the brand color changes next year, you do it all again.

With CSS you write one rule:

1
2
3

h1 {
  color: #d94a00;
}

Every h1 on every page that uses this stylesheet now follows that rule. Change the value once and the whole site changes.

Three things CSS gives you

1. One place to change things. A stylesheet is shared by many pages.
2. Cleaner HTML. Your HTML stays focused on content, so it is easier to read and easier for search engines and screen readers to understand.
3. Different looks for different screens. The same HTML can show a single column on a phone and three columns on a laptop.

See it work

1
2
3
4
5
6

<style>
  h2 { color: #d94a00; border-bottom: 2px solid #d94a00; padding-bottom: 4px; }
</style>
<h2>Fiction</h2>
<h2>Poetry</h2>
<h2>Travel</h2>

Three headings, one rule. Add a fourth h2 to the code and press Run. It picks up the same style without any extra work.