Syntax

Each block of code is called a rule, and defines some style for an element. Each rule consists of a selector, choosing what element(s) to style, a property and a value. A rule looks like this:

p {
    color: #0060A3;
}

The selector, the name before the opening curly bracket ( { ), points to the element you want to style. The property is, well, the property of the elements you want to affect, and the value is the value of that property.

In this case we change the font color of p from the browser default to the blue color #0060A3. It is perhaps not intuitive that the color property affects the font color, but it does. You will learn more about how to use colors and how to style text later on in this chapter.

Each property-value pair is called a declaration. All declaration that makes up a rule, i.e. all declarations between the opening and closing curly bracket, is called a declaration block.

In order for the browser to understand that you are done defining a declaration, you need to end the line with a semicolon.