Selectutorial: What Is A Rule Or "rule Set"? - CSS Max Design

Home » What Is A Ruleset In Css » Selectutorial: What Is A Rule Or "rule Set"? - CSS Max Design

Maybe your like

Selectutorial - CSS selectors

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

rule.gif

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

  • W3C CSS2 Specification: rule sets

Grouping declarations »

Other Max Design articles and presentations Associated with webstandardsgroup.org

Tag » What Is A Ruleset In Css