Put a page together

The page you are reading now, and every site you open during the day, is made of text underneath. A way of writing called HTML gives it meaning — this is a heading, this is a paragraph — and a way of writing called CSS decides how it looks — headings are big, and blue. In this chapter you stand at the door of both.

The first thing to take on board is how HTML and CSS divide the work. HTML writes down what a thing is. CSS writes down how that thing should be shown. You do not use a heading tag because you want bigger text; you use a heading tag because it is a heading, and then you decide the size in CSS. Get that division into your body early and you save yourself a lot of hesitating later.

The way you write HTML is simple. Open with <p> and close with </p>. That wrapping is called a tag, and whatever is wrapped takes on the meaning of that tag. A paragraph is <p>, a heading is <h1> through to <h6>, a link is <a>. It looks like a lot to remember, but the ones you actually use come to about twenty.

Tags can be nested. A link inside a paragraph, items lined up inside a list. If the nesting stops matching up, the page falls apart with it, so build the habit here: if you open it, you close it.

CSS is written as a set of three — which one, what, how. In h1 { color: red; } that is "take h1, take the colour, make it red". The "which one" part is called a selector. Naming a tag is the simplest way to point at something, but on its own it cannot do "change the colour of just this one button". That is where class comes in. You give an element a name of your own and then aim at that name.

One more important one is div. It is a tag with no meaning of its own, used to gather a few elements into a single box. Once they are gathered you can move the whole box, or put space around all of it at once. When you get to layout, this habit of thinking in boxes really starts to pay.

The second half of the chapter moves on to the frame of the whole page (the html, head and body structure) and to space and borders. Space is unglamorous, but it does more to the impression a page makes than anything else. The space inside an element and the space outside it are specified separately. Leave that distinction fuzzy and you will spend a very long time failing to get a gap where you wanted one.

There is one more thing worth knowing about CSS: when several rules land on the same element, which one wins. A rule aimed by class beats one aimed by tag name, and a rule written later beats one written earlier. When "the CSS I definitely wrote is not working", the cause is usually just that something else is beating it. Before you go looking for a typo, suspect that you have been overridden.

In the section on space, keep the inside space and the outside space clearly apart. The inside is the gap within the border, and the background colour spreads to fill it. The outside is the distance to the neighbouring element, and it carries no background colour. Both "leave a gap", but which you use changes what you see.

As you work through it, check the preview often. CSS shows you the result of what you wrote straight away, so writing a little and looking is the fastest way through. In this course the preview sits alongside, so you can watch things change as you type.

By the end of this chapter you will be able to build a simple page of text and pictures, all the way through, with your own hands. It will not be dressed up yet, but this is the ground every web page stands on. From the next chapter you start stacking the look on top of it.