SfC Home > Web Design > CSS >
Cascading Style Sheet (CSS) Rule Structure
by Ron Kurtus (updated 21 December 2022)
A Cascading Style Sheet (CSS) rule is a statement that defines the style of one or more elements in your web page. These rules follow a specific structure.
The format or syntax for CSS rules consists of a selector and a declaration. A declaration block consists of several declarations for s given selector. Multiple selectors can be combined in a rule.
Questions you may have include:
- What is the rule syntax?
- What is a declaration block?
- How are multiple selectors used?
This lesson will answer those questions.
Rule format or syntax
A rule consists of a selector and a declaration that is surrounded by curly parentheses:
selector {declaration}
Selector
A CSS rule defines styles to elements of all web pages using the style-sheet, including the <body> of your pages and HTML tags such as <h1>, <p>, and <ul>. When stated in a CSS rule, these elements are called selectors.
h1 {declaration}
Declaration
The declaration contains the property of the selector and the value of the property. The property always is followed by a colon ( : ) and each value ends in a semicolon ( ; ).
selector {property: value;}
For example:
h1 {font-weight: bold;}
where
- h1 is the selector
- font-weight is the property of the selector for this rule
- bold is the value of the property
- {font-weight: bold;} is the declaration
Declaration block
More than one declaration can be stated for a given selector, resulting in a declaration block:
h1 {font-weight: bold; color: green;}
For easier reading and editing, rules are often written in the form:
h1 {
font-weight: bold;
color: green;
}
Using multiple selectors
You can include multiple selectors in a rule, if the properties are all the same:
h1, h2, h3 {font-weight: bold; color: green;}
or
h1, h2, h3 {
font-weight: bold;
color: green;
}
Since the size is not mentioned in this example, the default web browser size displays.
Summary
The syntax of a Cascading Style Sheet (CSS) rule consists of a selector and a declaration. A declaration block consists of several declarations for s given selector. Multiple selectors can be combined in a rule.
Be proud of your accomplishments
Resources and references
Websites
Books
(Notice: The School for Champions may earn commissions from book purchases)
CSS3: The Missing Manual
CSS and Documents
Top-rated books on Cascading Style Sheets
Students and researchers
The Web address of this page is:
www.school-for-champions.com/web/
css_rule_structure.htm
Please include it as a link on your website or as a reference in your report, document, or thesis.
Where are you now?
Cascading Style Sheet (CSS) Rule Structure