SfC Home > Web Design >

 

Key words: Web design, Cascading Style Sheet, CSS, rule, selector, declaration, property, value, Ron Kurtus, School for Champions. Copyright © Restrictions

Cascading Style Sheet (CSS) Rules

by Ron Kurtus (26 March 2014)

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 rules

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

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

Ron Kurtus' Credentials

Websites

Web Design Resources

Books

Top-rated books on Website Design


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_rules.htm

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


Where are you now?

School for Champions

Web Design topics

Cascading Style Sheet (CSS) Rules



Web Design topics

Goals

Purpose

Preliminaries

Content with HTML

Format with CSS

Navigation

Usability

Responsive websites

Visibility

Also see





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.