The power of CSS comes from the ability to define rules for elements on the page. For example if you have a paragraph element like this:

<p>Paragraph Element</p>

You will construct a rule that tells it what to look like on the page. A rule is made up of two main parts. The selector and the declaration. The selector determines which elements are effected, and the declaration says what is going to happen.

For the above example lets imagine we wanted to make the paragraph blue. To do so, we could construct a rule like this:

P { color: blue;}

In this case the selector is “P”. The declaration is held inside the curly brackets and consists of the property/value pair “color:blue”. It is important to note that the property/value pair ends in a semicolon. This allows you to place multiple property/value pairs inside a declaration. So for example, you could also give the paragraph a border:

P { color: blue;
border: 1px;
}

And if you wanted to get really fancy you could also give it a background color. How about red:

P { color: blue;
border: 1px;
background: red;
}

Looking at this in a browser we get something really ugly

When creatign style rules you need to always remember the semicolon between the property/value pairs, however just like with HTML you can be very relaxed when it comes to how you write the rules. For example this code:

p {color: blue;}

Works the same as this code:

p {
color: blue;
}

You can add spacing and returns to format your code and make it readable.

And that is it for tutorial 1. You now know how to construct a style rule.

- Cole