What is a rule or "rule set"?
Introduction
A rule or "rule set" is a statement that tells browsers how to render particular elements on an HTML page. A rule set consists of a selector followed by a declaration block.
Rule structure
Selector
The selector "selects" the elements on an HTML page that are affected by the rule set. The selector consists of everything up to (but not including) the first left curly bracket. For example:
h1 { color: blue; margin-top: 1em; }
p { padding: 5px; }
td { background-color: #ddd; }
Declaration block
The declaration block is a container that consists of anything between (and including) the curly brackets. Whitespace inside a declaration block is ignored - so it can be used to lay out rules in any way you want. For example:
h1 { color: blue; }
p { padding: 5px; }
td { background-color: #ddd; }
Or, with whitespace added to aid readability:
h1
{
color: blue;
}
Declaration
The declaration tells a browser how to draw any element on a page that is selected. A declaration consists of a property and a value, separated by a colon ":". Although it is not essential to add a semicolon after a single declaration, it is recommended that you finish the last declaration in a block with a semicolon. For example:
h1 { color: blue; }
Property
The property is the aspect of that element that you are choosing to style. There can only be one property within each declaration. For example:
p { padding: 5px; }
Value
The value is the exact style you wish to set for the property. For example:
p { padding:5px; }
Further information
Other Max Design articles and presentationsAssociated with webstandardsgroup.org