List of Topics

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:

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


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.


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

Ron Kurtus' Credentials


Web Design Resources


(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:

Please include it as a link on your website or as a reference in your report, document, or thesis.

Copyright © Restrictions

Where are you now?

School for Champions

Web Design topics

Types of Cascading Style Sheet (CSS) Rules

Web Design topics




Content with HTML

Format with CSS



Responsive websites


Also see

Let's make the world a better place

Be the best that you can be.

Use your knowledge and skills to help others succeed.

Don't be wasteful; protect our environment.

You CAN influence the world.

Live Your Life as a Champion:

Take care of your health

Seek knowledge and gain skills

Do excellent work

Be valuable to others

Have utmost character

Be a Champion!

The School for Champions helps you become the type of person who can be called a Champion.