What is a rule or "rule set"?


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



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:

color: blue;


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; }


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; }


The value is the exact style you wish to set for the property. For example:

p { padding:5px; }

Further information

Grouping declarations »

Other Max Design articles and presentations
Associated with webstandardsgroup.org