CSS Syntax

Cascading Style Sheet syntax differs a bit from HTML; it is worth the effort to learn. Here is a brief primer.

Style Definitions

Style definitions follow the same basic format shown below. A group of style definitions form the Cascading Style Sheet.

Style Definition Anatomy

Style definitions start with a "selector" which is often an HTML tag. This is followed by an opening "curly bracket" ({ - also called a brace) which starts the list of definitions for the selector. A definition is comprised of a property and its value separated by a colon. Each definition is separated from the next by a semi-colon. It is usual to have several property definitions in one style definition. The style definition is ended by the closing "curly bracket" (}).

The table below contains the elements of a style.
Selector Opening brace Property Colon Value Semicolon Closing brace
h3 { font-family : "Comic Sans MS", Tekton, sans-serif ; }
    The definition.    

You may define more than one selector at once by separating them with commas thusly: h3, p, td. This would give the same property definitions to level three headings, paragraphs, and table data cell. A list of selectors not separated by commas like: "td p strong" means that the property definitions only applies to elements enclosed by strong tags which are inside of paragraph tags which are inside of a table data cell (<td><p><strong>element</strong></p></td>).

A list of these style definition form the Cascading Style Sheet which can be placed in the head of your HTML document or in an external text file. The individual property definitions are used for local styles. Find out about these three locations next.

Where Styles Live

Styles can live in three different areas.

  1. Local
    Local styles are in close proximity to what they effect. Such as <strong style="color:red"> to make something bold and red.
  2. Internal
    Internal styles live within the head section of an html document along with other elements not usually seen by the user. It might look something like this:

    <style type="text/css">
    <!--
    body, p, td { font-size: 12px;
    font-family: Arial, Helvetica, sans-serif; }
    -->
    </style>

    The style sheet is usually the last item before the closing </head> tag. Notice the use of commenting tags to hide the style from browsers that don't understand them.
  3. External
    An external style sheet is a text file that just contains the styles without any other HTML code. The suffix for the external style sheet is .css. The page refers to this text file in similar manner as an image tag refers to an image file. The code to link to a style sheet to a page looks like this:

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

    and it lives in the head section. Note that the link tag has no closing half, so it closes itself.

These styles are ranked in order of precedence: local styles trump internal styles, internal styles trump external styles. In general, the "closer" the style is to the item it effects, the more precedence it has.

Important Concepts

The external style sheet exploits the true strength of CSS: by changing your external style sheet, you effect every page that links to it. Don't like the font face of your web site? Change one line of code and your whole site is changed.

Crafting the selectors in your CSS definitions is an important skill: selectors written with a high degree of specificity allow you to pinpoint your styles and avoid conflicts with other style definitions of similar HTML elements.

Click here to view some of the properties you may work with.

bottom graphic for DM 60A pages