The Anatomy of a CSS Rule

So, in the previous chapter, we used the classic "Hello, world!" example to get a glimpse of just how easy it is to style an HTML element with CSS. But why did it look the way it did? In this chapter, we'll focus on the anatomy and syntax of CSS, to get a deeper understanding of how it works. Let's have a look at the previously mentioned example again, where we had a CSS rule which targeted H1 elements:

h1 {
	color: DeepSkyBlue;
}

What we have here is a selector with one property and one value - these are the core concepts of CSS and you should try to remember their names as you progress through this tutorial. In this example, h1 is the selector name, color is the property and DeepSkyBlue is the value.

In between these three concepts, you see a variety of special characters: There's the curly braces around the property and value, there's the colon separating the property from the value and there's the semicolon after the value. Each of them makes it easy for the browser to parse and understand your CSS code: The curly braces allow you to group several properties into the same rule (selector), the colon tells the parser where the property ends and the value starts, and the semicolon tells the parser where the value ends.

This might seem a bit too complex for a simple selector like the one we have above, but as soon as we use more complex selector names with more properties and more complex values, it makes perfect sense. Let me illustrate it with a more complex example:

h1, h2, h3 {
	color: DeepSkyBlue;
	background-color: #000;
	margin: 10px 5px;
}

h2 {
	color: GreenYellow;
}

Now we have several selectors, with the first one targeting several elements, as well as several properties and several values - now you can probably see why we need the CSS syntax rules to allow for proper parsing of your instructions.

Formatting and Whitespace in CSS

You may we wondering why I'm formatting the selector the way I do: The initial curly brace is on the same line as the selector name, but the ending one is on a line of its own, properties have been indented and there's a space after the colon separating property and value but not before it. Why? Because that's how I like it but the truth is that the CSS parser doesn't care about whitespace.

Some people prefer to have the initial curly brace on its own line and to have a space before the colon as well:

h1
{
	color : DeepSkyBlue;
}

And that works just as well. In fact, a lot of software has been written to compact/minify CSS to take up the least possible amount of space, like this:

h1{color : DeepSkyBlue;}

That will work just fine too, but for more complex rules, it will make it harder to read and edit. However, the parser will understand it just as well as our first example, thanks to the special characters used as separators, as already discussed.

Summary

In this chapter, we've learned that the basic ingredients of CSS is the selectors, properties and values. A CSS document can contain multiple selectors and a selector can have multiple properties which in turn can have a value consisting of one or several elements. We also learned that curly braces, colons and semicolons separate each of the three ingredients from each other, and that whitespace and formatting is really up to you - the parser generally doesn't care.

We have looked at some basic selectors with some basic properties by now, but selectors is a much deeper subject and there are plenty more properties to work with. We will of course be discussing both in much more detail later in this tutorial.