The syntax used to create a style sheet is actually very simple. There are three parts to any style rule: the selector, property, and value. Let’s look at a line of css code and identify these three parts:
h1 {font-color: red}
The first element, the h1, is the selector. This selects what is being changed by the rule you define. Here we are identifying the Heading 1 command.
Once we have identified what we are making the rule for, we can go on to the rule itself. Rules for style sheets are enclosed in brackets appearing like this: { }. The font-color in this rule is the property. This selects what about the selector we are going to change. We already know that we want to change h1 headings. Now we know that we are going to change the color of them.
Next comes the final part of the style rule, the value. That is the red here. It is the new value that we are putting in for the property of the selector. Now that we have finished our style rule, we know that every time there is an h1 heading the font color will be red.
It’s important to remember that you can put multiple properties into a single rule. For example, say we also wanted our h1 headings to be in a very large font, say size 48. We could take the same rule that we have already created and add the new value to it. It would then look like this:
h1 {font-color: red; font-size: 48pt}
When you insert multiple properties into a rule, you must use a semi-colon ; to separate the two different properties. When the computer reads the style rule created above, it will make all h1 headings in the document red in color in 48pt size.
Now that we understand a little bit about how these style sheets are written, let’s look at exactly how we write them to make them work for our web pages.