Things That Have Changed -- Formatting Text For Appearance

Part II -- HTML Level 4 -- Pre-Defined Styles & Style Sheets

Cascading Style Sheets are one of the most difficult aspects of HTML to learn, especially if you have no previous experience with things like page layout, desktop publishing, typesetting and other related activities. If you have desktop publishing or typesetting experience, learning CSS is just a matter of learning a new way to format your styles, but if you don't have such experience, it's a good idea to have at least a solid understanding of the basics of HTML before attempting to learn or use CSS.

There are three basic ways of including CSS information in your HTML document. You can include the CSS information in the document itself, in a separate section of the document, or you can include the style information "inline", meaning actually within the individual tags, or the style sheet can be a separate document which is linked to other documents by way of a <LINK> reference. The way style information is included in this web site, for the most part, is by using this third method. A style sheet which is a separate document from all the other pages in the site is referenced in the Head section of the document. The element which references the style sheet for this web site looks like this:

<LINK REL="stylesheet" HREF="style.css" TYPE="text/css">

The style sheet to which this tag refers looks can be seen here.

Here's how it works. You can define styles in a style sheet by defining styles (style declarations) for elements (selectors), by defining styles (declarations) for classes of tags or by defining declarations for element IDs. Here are some simple examples of these three different methods (these examples are formulated based on the assumption that the style sheet is referenced as a separate document with a <LINK> tag, as shown above, or is included in the <HEAD> element of the document. Examples of inline styles will come later):

BODY     {background: #FFFFFF;
         color: #000000}

This CSS declares a style which is applied to the <BODY> selector, which means that all content which appears inside of <BODY>. . .</BODY> has those style attributes applied to it. This web page, the one you're looking at right now, and all the other pages in this site are examples of what this style looks like in practical use. The style defines a background color (white) and a text color (black). This style may or may not display correctly depending on which browser you're using to view these pages. The <BODY> style is only overridden by styles applied to elements which supercede the body element, such as paragraph, sample, span, division or preformatted elements.

The following CSS information defines several classes of style for the paragraph element, which is another commonly used style in this web site:

P.main     {text-align: center;
           font-size: 18pt;
           font-weight: bold;
           font-family: Arial, Helvetica}
 
P.sub      {text-align: center;
           font-size: 14pt;
           font-weight: bold;
           font-family: Arial, Helvetica}
 
P.body     {text-indent: 0.25in;
           font-size: 10pt;
           font-family: Arial, Helvetica}
 
P.cont     {font-size: 10pt;
           font-family: Arial, Helvetica}

These can be used with the <P> element, depending on what kind of format is desired. The main class style is centered, 18 point, bold Arial or Helvetica; a "main headline" style, the sub class style is a sub-head, the body class is a body text style with the first line indented, and the cont class is a body text style with no first line indent. Here are examples of how these classes can be used:

Sample Text

Sample Text

Sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text.

Sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text.

 <P CLASS="main">Sample Text</P>
 
 
<P CLASS="sub">Sample Text</P>
 
<P CLASS="body">Sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text.</P>
 
 
<P CLASS="cont">Sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text.</P>

Styles can also be defined independently. Such styles can be used in conjunction with <SPAN> or <DIV> tags to create small sections of style, or they can be used as classes of tags, as shown above. The <SPAN> tag is used to create sections of a different style that are in line with other sections, the <SPAN> tag does not create a line break when it is closed. The <DIV> tag works the same way, except that when it is closed a line break also occurs. The following examples will illustrate the use of independently defined styles:

The following examples use this independently defined style

                    .bean     {color: #008000;
                              font-size: 9pt;
                              font-weight: bold;
                              font-family: Arial, Helvetica}

Use of the <SPAN> element does not add a line break to the text.

This is text styled using the "body" style which was defined in the previous example. This is text styled using an independently defined style called "bean". This, once again, is text styled using the "body" style defined in the previous example.

 <P CLASS="body">This is text styled using the &quot;body&quot; style which was defined in the previous example. <SPAN CLASS="bean">This is text styled using an independently defined style called &quot;bean&quot;.</SPAN> This, once again, is text styled using the &quot;body&quot; style defined in the previous example.</P>

Use of the <DIV> element adds a line break to the text, and ends any application of style until the next style is applied.

This is text styled using the "body" style which was defined in the previous example.

This is text styled using an independently defined style called "bean".
This text follows a line break created by the end of the previous style and therefore is not styled. Usually style information would follow the end DIV tag.

 <P CLASS="body">This is text styled using the &quot;body&quot; style which was defined in the previous example. <DIV CLASS="bean">This is text styled using an independently defined style called &quot;bean&quot;.</DIV> This text follows a line break created by the end of the previous style and therefore is not styled. Usually style information would follow the end DIV tag.</P>

Independently defined styles can also be used as classes for tags which don't already have those classes defined.

This is text defined using the "bean" style as a class of the paragraph element.

  1. This is an ordered list which uses the "bean" style as a class.
  2. This is a list item.
  3. This is another list item.
 <P CLASS="bean">This is text defined using the &quot;bean&quot; style as a class of the paragraph element.</P>
 
<OL CLASS="bean"><LI>This is an ordered list which uses the &quot;bean&quot; style as a class.</LI>
<LI>This is a list item.</LI>
<LI>This is another list item.</LI>

 

[ Return to the Table O' Contents | Return to CSS Part IV | Procede to Chapter 4 Part III ]