Writing CSS

All CSS follows the same basic structure, which consists of three parts - the selector, the property and the value:

selector {property: value}

The selector describes which HTML element we want to add styling to. For example, if we wanted to adjust the styling of our <h1> header tag, we would use h1 as our selector.

The property is the part of the selector we want to add styling to. For example, if we wanted to change our <h1> text to blue, we would use color as our property.

The value is the part which assigns a particular value to the property that we are changing. Taking the example above, after specifying the h1 selector and the color property, we would assign the value blue. This would style all of our <h1> headings in blue.

Putting all this together, for the above example we would get the following style declaration:

h1 {color: blue}

That's really all there is to it, I told you it was simple!

We can also modify more than one property by putting a semi-colon in between them. It is perfectly acceptable to list the properties on one line but it is more common to give them a line each, because this makes it easier to read:

h1 	{
	color: blue;
	font-weight: bold;
	}

All CSS properties are specified in this way, and it is simply a case of gradually building up your list of properties until you get everything appearing exactly as you want.

We can apply CSS styling to any of the standard HTML tags, such as <body>, <p>, <em>, <strong> etc.

But CSS is even more powerful than that - we can also assign multiple styles to each of these tags, or we can even style our own <div> and <span> tags. The key to doing this is the id and class selectors, which we will discuss in the next section.