J. M. Pressley
Music |  Writing |  Travelogues |  Shakespeare Resource Center |  Contact

Introduction | CSS Principles | Basic Concepts | Gettysburg Revisited | Other Resources

Basic Concepts

Like HTML, there is a specific syntax that must be followed in order for styles to be recognized in a document, no matter where the instructions reside. Cascading Style Sheets are rule-based, meaning that you are creating a set of instructions for specific elements of the document that tell the browser how to display the elements.

Rule A declaration that describes how a page element should be displayed. A style sheet is a collection of rules.
Syntax

A selector (what is affected) is changed by the declaration (the effect you want). The syntax necessary to make text within <p> tags the color red would be:

P { color: red; }

The following things are very important:

  • Curly braces {}
  • Colon :
  • Semicolon ;

The curly braces have to surround the rule. A colon is required between a property and its value (see below), and a semicolon is required between declarations. Failure to remember any of these things will result in highly unanticipated results when viewing a page.
Properties and Values

A rule declaration is broken into two parts: the property of the text (font-face, color, etc) and the value you apply to the property. This is displayed as:

<TAG> { property1: value; property2: value; }
Class

Rather than have to declare specific tags (<P>, <H1>, etc.) with properties, classes allow styles to be applied to a specific class (which can be either tag-based or generic). An example of class would be:

.italic { font-style: italic; }

The key to making the text of a particular paragraph, for instance, become italicized would be to add an attribute to the <P> tag in the HTML like so:

<p class="italic">This is some italicized text</p>
Inheritance

The ability of one property to inherit the properties of an enclosing tag. For instance, if the <BODY> color to is set to red, lists defined with the <LI> tag will also be red unless another rule is made that sets <LI> to a different color. Inheritance allows the author to make rules as broad or as specific as the page requires.

Cascade Levels

  1. Inline Style: Inline styles are embedded throughout the body of the document directly in the elements they modify (similar to placing <FONT> tags in text, for instance). The code for an inline style applied to a paragraph tag would look something like this:

    <p style="color: red; font-weight: bold">This is a paragraph of red, bold text.</p>

    This is a paragraph of red, bold text.

    Inline styles override both embedded and external stylesheets. However, using inline styles detracts considerably from the efficiency of creating CSS rules; it makes changes more cumbersome. Inline styles, as a result, should be used sparingly at best.

  1. Embedded Stylesheets: Embedded stylesheets are written in the <HEAD> section of an HTML document using <STYLE> tag. The rules follow the same procedures and syntax as an external stylesheet, the only difference being that the code is embedded in the page instead of called from an outside source. A very brief section of such a stylesheet might look like this:

    <html>
    <head>
      <title>A Styled Page</title>
      <style>
      <!--
      body { font-family: Verdana, sans-serif; font-size: 1em; }
      p { color: red; font-weight: bold; }
      -->
      </style>
    </head>
    <body>
    </body>
    </html>

    Embedded stylesheets are overridden by inline styles and override external stylesheet specifications. While it is still more acceptable to use external rules for most functions, there are instances of one-page styles that the designer may feel more comfortable leaving embedded in the affected page rather than including with the master stylesheet.

  1. External Stylesheets: These are linked to the HTML document by using commands in the <HEAD> section of the page. Instead of containing all the rules for a page within the <HEAD> section, however, the link method means that multiple pages can share multiple stylesheets as needed. There are two methods of linking to external stylesheets:

    <link rel="stylesheet" type="text/css" href="style.css">

    <style>
    <!--
    @import "style.css";
    -->
    </style>

    External stylesheets are overridden by inline styles and embedded stylesheets if there are conflicting rules. However, external stylesheets are the most effective way of implementing sitewide consistency. The <link> method is the most common method of linking stylesheets at this point.

Previous lesson | Next lesson

Top | Home