What CSS is and how it works

The other half of a web page

In the HTML course you described what each part of a page is: a heading, a list, a link. CSS (Cascading Style Sheets) describes how those parts should look: colours, fonts, spacing, size and layout.

Keeping the two separate is a big advantage. The same HTML can look completely different with another stylesheet, and one stylesheet can give a hundred pages the same look. Change a colour in one place and the whole site follows.

Your first rule

h1 {
  color: darkslateblue;
  font-size: 40px;
}

This rule has two parts:

• The selector, h1, chooses which elements to style: here, every h1 on the page.
• The declaration block, between curly braces, lists what to change. Each declaration is a property (color), a colon, a value (darkslateblue) and a semicolon.

Press Try it below and change the values. Try color: tomato; or font-size: 24px;.

<style>
  h1 {
    color: darkslateblue;
    font-size: 40px;
  }
  p {
    color: #444444;
    line-height: 1.6;
  }
</style>

<h1>Fresh bread every morning</h1>
<p>Our bakery opens at 7 a.m. and the first loaves come out of the oven at 7:15.</p>
<p>Every loaf is made with flour from a mill twelve kilometres away.</p>

Notice that the p rule styled both paragraphs. You wrote it once, and the browser applied it to every match. That is the core idea of CSS.

How the browser applies CSS

When the browser builds a page, it reads the HTML into a tree of elements (the DOM) and the CSS into a list of rules. For every element, it collects all the rules whose selectors match, works out which value wins for each property, and then draws the element using the final values.

Three things decide which value wins when several rules disagree:

1. Importance of the source (your styles beat the browser's defaults).
2. Specificity: how precisely a selector targets the element.
3. Order: if everything else is equal, the rule written later wins.

This decision process is the cascade in Cascading Style Sheets. It has its own lesson later; for now, remember that later rules override earlier ones when they target the same thing in the same way.

Browsers ignore what they do not understand

If you write colr: red; or a value that does not exist, the browser silently skips that one declaration and carries on with the rest. This is deliberate: it lets new CSS features be added without breaking older browsers. The downside is that typos fail quietly. When a style does not apply, right-click the element, choose Inspect, and look at the styles panel: misspelt or invalid declarations are usually shown crossed out with a warning icon.

Values you will meet first

• Colours can be names (tomato), hex codes (#ff6347) or functions such as rgb(255 99 71). The Image Color Picker gives you exact hex codes from any image, handy for matching a brand colour.
• Sizes are usually written with a unit, such as 16px or 1.5rem. The units lesson explains which to choose.
• Keywords such as bold, center or none are specific to each property.

Common mistakes

• Missing semicolons. The declaration after the missing semicolon is swallowed. Ending every declaration with one, including the last, prevents this.
• Missing closing brace. Everything after it may stop working. Editors that highlight matching braces help.
• Styling with HTML. Picking h3 because it looks the right size, or adding <br> for spacing, mixes the jobs of HTML and CSS. Use the right element, then style it.

Exercise

Write a short page with an h1, two paragraphs and a list of three items. Then add a style block that makes the heading a colour of your choice, makes the paragraphs grey with a line height of 1.6, and makes list items bold with font-weight: bold;.

<style>
  h1 { color: teal; }
  p { color: #555555; line-height: 1.6; }
  li { font-weight: bold; }
</style>

<h1>Weekend plans</h1>
<p>A quiet weekend with a little bit of everything.</p>
<p>Weather permitting, most of it outdoors.</p>
<ul>
  <li>Morning walk</li>
  <li>Visit the library</li>
  <li>Cook dinner for friends</li>
</ul>