Lesson 14A - Cascading Style Sheets/Classes

Suppose your default font color is black and your default background color is white. This is what you want for most of your web page. But there are several places you want to use a font color of white and background color of navy. You could retype "style='color:white; background-color:navy'" as many times as needed and your page would display properly. But there is an easier way.

Style allows you to group a series of declarations to be used several times. This group is called a "class". Open sample2.htm and type the following:

. . .
<style type="text/css">
<!--
body { color:navy; background-color:#d0d0ff; word-spacing:0.25em; line-height:125%;
   background-image: url(../../materials/HTML_CSS/graytexture.gif);
}
.wn  { color:white; background-color:navy }
-->
</style>
. . .

Name the class and place a period ( . ) in front of the name. The period tells Style this is a class. Now, any time you want the background color navy and font color white, you just add the class="wn" attribute to your HTML tag of choice. Try it on a couple of the paragraphs you already made on this page.

. . .
<style type="text/css">
<!--
body  { color:black; font-family:helvetica; font-size:12pt;
        background-color:white; }
p     { text-indent:2em }
.wn   { color:white; background-color:navy }
-->
</style>
</head>
<body>
<p class="wn">. . .
(try it).

Reopen the file and do the following:

  1. define a class with font color of green, font family of Courier and font weight of bold.
  2. define a class with font size of x-large, text centered, letter spacing of 0.5em and line height of 150%.
  3. define a class with font family of "Monotype Corsiva, cursive" and font size of "larger".

Use each class somewhere on the page. Copy paragraphs over several times so you can add different classes to each. Use the second class (the one with x-large, centered text) to create a header at the top of your page. Use the third class (the one with Monotype Corsiva) to replace anywhere you had an entire paragraph in italics.

If you want to add two or more classes to one HTML tag, separate them by a space with no punctuation (no commas, no semicolons, etc.). For instance, if you had two classes, 'wn' and 'xcl', to get characteristics of each, you could type:

<p class="wn xcl"> . . . </p>

If there were some style declarations in the wn class shown above that also existed in the xcl class, the latter (xcl) declarations would override the former. That is the "cascading" nature of these Style Sheets - Whatever the browser sees last governs. Since the xcl class is seen in the Head section after the wn class, it controls. To test this, you already have color:white in class wn; add color:tan to class xcl. Now call both classes in one tag:   <p class="wn xcl"> blah blah blah </p>   and see that the font color is tan in the paragraph. Now place class xcl above wn. The paragraph font color changes to white.


In this lesson, we learned about Style classes
By now, your sample2.htm file should look like this.

Lesson 13 CSS/Box   < <  PREVIOUS   Table of Contents NEXT  > >   Lesson 14B Master Style Sheets

Developed with HTML-Kit
Sandersongs Web Tutorials
Contact the Webmasterwith comments.
©2017, by Bill Sanders, all rights reserved.
This domain had 3,981 different visits in the last 30 days.
435,456 hits on this domain since 24 Nov 2006.
http://sandersongs.com/HTMLcourse/Lesson14A.php
This page was last modified on our server on 6 Oct 2013
and last refreshed on our server at 12:30 pm, MST
This file took 0.01143 seconds to process.