SfC Home > Web Design > CSS >
Types of Cascading Style Sheet (CSS) Rules
by Ron Kurtus (updated 21 December 2022)
There are three specific types of Cascading Style Sheet (CSS) rules.
A Cascading Style Sheet (CSS) rule is a statement that defines the style of one or more elements in your web page.
A CSS rule consists of a selector and declaration and holds for all instances of an element. You can create a CSS class that provides an exception to a stated rule. You can also create a CSS ID, which is an exception that applies to only one element, one time in a page.
Questions you may have include:
- What are element rules?
- What are CSS classes?
- What is a CSS ID?
This lesson will answer those questions.
Element rule
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>. These elements are called selectors.
Rule format or syntax
A rule consists of a selector and a declaration that is surrounded by curly parenthese:
selector {declaration}
The declaration contains the property of the selectorand 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;
}
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;
}
Since the size is not mentioned in this example, the default web browser size displays.
Class rule
A CSS class rule is a style that can be used as an exception or addition to a stated rule. It can be used many times within a web page. The definition of a class is the same as a standard rule except that the selector is preceded by a period ( . ). For example in your CSS file, you can define:
.newcolor {color: red;}
To apply the class to an element that has a rule defined for it, you include a class statement in your HTML code. Although you may have defined the color of <h1> and <p> in your CSS rules, you can assign the CSS class to them in various places in your HTML document:
<h2 class = "newcolor">Special case</h2>
<p class = "newcolor">Another case</p>
Note that the application of CSS class follows the configuration as standard HTML definitions. The advantage of using a CSS class is that you can change the parameters in the CSS file for it to apply to all HTML files.
CSS ID rule
A CSS ID rule is a style exception similar to the class rule, except that it can be used only once in a web page. It is preceded by a hash tag (#). An example of an ID rule is:
#right_col {width: 300px;}
Also, an HTML tag can be include with the ID rule:
#right_col p{font-size: 87%;}
In this case, the text within the right column would be 87% of the default or previously stated font size.
Then, in your HTML code, the right_col ID is included in a <div>:
<div id="right_col"> ... </div>
Within the right column, the size of all <p> would be 87% default size.
Another example is:
#author {font-style: italic; text-align: center;}
Then, in your HTML code, you include a class statement for the specific case:
<p id = "author">Ron Kurtus</p>
Note: To some degree I wonder if it is worth the trouble for a simple style as this. It might be easier to center the <p> tag and add <i> to italicize. However, I guess there are situations where it would the route to take.
Summary
A Cascading Style Sheet (CSS) rule is a statement that defines the style of web page elements. It consists of a selector and declaration block and holds for all instances of an element. Exceptions to the rule include the CSS class and CSS ID.
You have the skills to be great
Resources and references
Websites
Books
(Notice: The School for Champions may earn commissions from book purchases)
Top-rated books on Website Design
Students and researchers
The Web address of this page is:
www.school-for-champions.com/web/
css_rule_types.htm
Please include it as a link on your website or as a reference in your report, document, or thesis.
Where are you now?
Types of Cascading Style Sheet (CSS) Rules