Collected by
Elizabeth Janson

Home Page

Style sheet syntax

 

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.

CSS is made up of rules and style sheets. A rule is the statement about the style of the document, a style sheet is one or more rules.
The first part of the rule is called the Selector. This may be an HTML element, or we can make our own Selectors.
The part of the rule enclosed within the curly brackets is called the Declaration, and has two parts. The part before the colon is the Property and the part after the colon is the Value(s) of that Property.

A Rule
Selector{
Declarations
property: value; property: value; ...
}
H1{color: green}

(Declarations are separated by semicolons; the last declaration doesn't need one but it's good practice to put one anyway.)

In the above example:
H1 is the Selector, color: green is the Declaration.

Within the Declaration: { Property: Value } color is the Property, green is the Value.

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.

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.

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.

Errors in the style sheet

Someone was discussing the fact that the Browser ignores items it does not recognise and using this fact to leave notes in the code to tell yourself why or what is happening. Another said 'Dangerous'.
When the browser finds something it does not understand, it ignores the sequence containing the item it regards as an error.



This subject (not leaving yourself notes) is continued on my Errors page.

Email
CSS begins here
Back to Boxes, or on to Units

This page is part of Elizabeth Janson's web site

http://www.oocities.org/elizatk/index.html

My other sites are the Anglican Parish of Northern Mallee,
Tetbury residents in the Eighteenth Century
my Australian Family History and Barrie, our Family Poet.