Style sheet syntax

Style sheet syntax

As we mentioned earlier, for a long time there was no such thing as a "web standard". As a result browsers have been very forgiving of HTML that is not written according to the syntax of any one grammar. CSS on the other hand has always been a very specific standard. This means that if you don't get the grammar right browsers will not be lenient on you. Either your style sheet will not work at all, or it will work in unexpected ways. Above you've seen what the parts of a style sheet are, and an example of how they are put together. Referring to the example above, here are some simple rules to follow to get your style sheet right every time.

1. Every statement must have a selector and a declaration. The declaration comes immediately after the selector and is contained by a pair of curly braces.

2. The declaration is one or more properties separated by semicolons.

3. Each property has a property name followed by a colon and then the value for that property. There are many different types of value, but any given property can only take certain values as set down in the specification. This guide tells you the possible values for each property.

4. Sometimes a property can take a number of values, as in the font-family example above. The values in the list should be separated by a comma and a space. Again, detailed information about how this works for any particular property can be found in this guide.

5. Sometimes a value will have a unit as well as the actual value, as in the font-size example above. You must not put a space between the value and its unit.

6. As with HTML, white space can be used to make your style sheet easier to read and write. You should use spaces as in the example above.