CLASS: ELIMINATING DUPLICATE CSS CODE

So, you have the CSS code down pretty good and you start to use it on a page. You have several places where you would like the text to be similar but then you would have to copy and paste the style in either a <font> or <div> or <span>.

To eliminate duplicate code in many HTML tags within a page, CSS allows the use of many styles which are placed in the page's <HEAD>. This CSS feature is called a class. It allows you to specify a particular style once and then refer it by name. Suppose we wish to use the follow CSS code for text in several places.

that will make text look like this!

This is done by defining a style class in the <HEAD> of the web page, which is called an internal style definitions. Here is what the format looks like:

<HTML>
<HEAD>
<style type="text/css">
.lotsofstuff {
font-weight:bold;
font-style:italic;
font-size:16px;
letter-spacing:5;
color:blue;
}
</style>
</head>

The start of CSS Style code.
We have to tell the browser that a style is coming
The class name is lotsofstuff and the { is the start
|
|These 5 properties define the style
|
|
|
the } is the end of this style
</style> means there are no more styles

A style class is defined by using a period followed by the class name of this style. The curly brackets, { and }, are used to define which properties are included in this style. Note that each property is ended with a semi-colon. The definition of a class in this format will allow any html tag to use the class.

IMPORTANT NOTE - DEFINING A SPECIFIC HTML TAG TO HAVE SPECIFIC PROPERTIES!
When defining a class in the <HEAD> you can use the following format:

html-tag.class-name {property1:value1;property2:value2;....
Example: P.red {color:red;text-indent:20}

and then this class will only apply to the html tag noted, i.e. in the above the use of <P class="red"> would cause the paragraph to have red text and be indented 20. However, the use of a <span class="red"> would not!

Define all classes in the <HEAD>, then you can use those classes in any html tag.

Ok, so we have a style defined in the <HEAD>. How do we use it? That's the easy part. Once we have a class defined in the <HEAD> we can use it any place on this page by placing the name in the html tag,

<htmltag class="classname">

So, to use the above lotsofstuff class we can use:

<span class="lotsofstuff">Like this line of text!</span>

You can use this method anyplace on the page for any class you have defined.