CSS from zero
What CSS is, how a rule is built, how to choose what you are styling, what happens when two rules disagree, and how to keep your colours in one place.
By the end you can
- Write a rule and know the name of every part of it
- Choose exactly the elements you mean
- Work out which rule wins when two of them disagree
- Keep your colours and sizes in one place and reuse them
Easier if you did first
step 1 of 5
What CSS is, and where it goes
In the HTML labs you built the walls and the rooms. CSS is the paint, the furniture and the lighting. The same house, decorated.
CSS is a list of rules. Each rule says: find these things, and make them look like this.
A rule has two halves. The selector picks what to style. The block, inside curly brackets, holds the changes.
Inside the block you write declarations, one per line. A declaration is a property, a colon, a value, and a semicolon: color: red;
Every declaration needs that semicolon. Miss one and the browser throws away that line and often the next one too, which is a confusing way to lose twenty minutes.
CSS can live in three places. In a separate file linked from the head, which is where it belongs for a real site. Inside a <style> tag in the page, which is fine for something tiny. Or in a style attribute on one element, which is a last resort, because it applies to that one element and nothing else can override it.
These labs give you a CSS panel beside your HTML, which behaves like a separate file.
Make the heading on the right a colour of your choosing, and give the page a readable font.
one rule, taken apart
h1 { color: tomato; }
h1 the selector: what to style
{ } the block: the changes
color the property: what to change
tomato the value: what to change it to
; ends the declarationWhat these words mean
- CSS
- Cascading Style Sheets: the language that decides how a page looks.
- rule
- A selector plus a block of declarations.
- selector
- The part that picks which elements to style.
- declaration
- One change: property, colon, value, semicolon.
- property
- What you are changing: color, font-size, padding.
- value
- What you are changing it to: red, 16px, bold.
- stylesheet
- A file full of rules, linked from the page's head.
Easy to get wrong
h1 { color: tomato }
h1 { color: tomato; }
It works here, because it is the last declaration. Add a second line underneath and both are lost. Always end with the semicolon and you never think about it again.
style="color: red" on fifty elements
One rule in your stylesheet
Changing the colour later means editing fifty places. Worse, an inline style beats almost every rule in your stylesheet, so your proper CSS stops working and you cannot see why.
What we check
- The heading has a colour of its own
- The page has a font set
- The styling is in CSS, not in a style attribute