The basics of CSS

01 / 05

CSS is the language of how it looks

If HTML is the frame, CSS is the clothes and the make-up. It is the language that decides how things look — colour, size, where they sit.

Write CSS inside a <style> tag and it applies to the HTML on the same page.

<style>  h1 { color: red; }</style><h1>A red heading</h1>

02 / 05

The shape of CSS — who, what, how

h1 … the selector (who)
color … the property (what)
red … the value (how)

You can read it as "take h1, take its colour, make it red". The separators are the colon and the semicolon in property: value;.

h1 { color: red; }

03 / 05

color changes the colour

color is the property for the colour of text. As well as colour names (red, blue, green) you can write a colour code.

#ff6600 is orange. It is a very common way to write colours on the web, so get used to the look of it.

p { color: blue; }p { color: #ff6600; }

04 / 05

font-size changes the size

font-size is the size of text. The unit people reach for most is px (pixels).

One selector can carry several styles. Separate each line with a ;.

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

05 / 05

Background colour and centring

background-color … the colour behind
text-align: center; … put the text in the middle

Plenty more properties are coming, but the shape "selector { property: value; }" is always the same. Once you know the shape, none of it is frightening.

h1 {  background-color: yellow;  text-align: center;}