Treat an element as a box

01 / 05

Every element holds a rectangle

So far you have been changing how text looks. But every HTML element actually holds a rectangle of its own.

That area is called a box. Once you can change the colour and the size of a box, what you can build opens right up.

02 / 05

background-color sets the colour behind the box.

Put a colour on and you can see with your eyes where the element starts and stops. Use it first, to check the shape of the box.

p {  background-color: #ffe9b0;}

03 / 05

width is how wide the box is, in px.

The box of a paragraph or a heading spreads the whole way across unless you say otherwise. Write a width and it stops there instead.

p {  background-color: #e8f4ff;  width: 200px;}

04 / 05

height is how tall the box is. Even with only one line of text inside, the box takes the height you asked for.

Set it alongside a background colour and the coloured rectangle stands out clearly.

p {  background-color: #e8f4ff;  width: 200px;  height: 100px;}

05 / 05

With background-color, width and height you can make a coloured rectangle of any size you want.

That is where building the parts of a page starts. Let us line some boxes up.

h1 {  background-color: #2e7d32;  color: white;  width: 300px;  height: 60px;}