List of Topics

SfC Home > Web Design > CSS >

 

Cascading Style Sheet (CSS) Rule Structure

by Ron Kurtus (26 June 2014)

A Cascading Style Sheet (CSS) rule is a statement that defines the style of one or more elements in your web page.

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. Muliple selectors can be combined in a rule.

Questions you may have include:

This lesson will answer those questions.



Rule format or syntax

A rule consists of a selector and a declaration that is surrounded by curly parenthese:

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

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. Muliple selectors can be combined in a rule.


Be proud of your accomplishments


Resources and references

Ron Kurtus' Credentials

Websites

Web Design Resources

Books

CSS3: The Missing Manual (2013) $23.48

CSS and Documents (2012) Kindle version $0.00

Top-rated books on Cascading Style Sheets


Questions and comments

Do you have any questions, comments, or opinions on this subject? If so, send an email with your feedback. I will try to get back to you as soon as possible.


Share

Click on a button to bookmark or share this page through Twitter, Facebook, email, or other services:

 

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.

Copyright © Restrictions


Where are you now?

School for Champions

Web Design topics

Cascading Style Sheet (CSS) Rule Structure




Web Design topics

Goals

Purpose

Preliminaries

Content with HTML

Format with CSS

Navigation

Usability

Responsive websites

Visibility

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.