Lesson 4 - Cascading Style Sheets


DW Cover


In previous lessons you learned to use HTML tags and HTML styles to apply formatting to the content in your document. You might have used several attributes of the font tag to make your font a size from 1 - 7 or a heading from H1 - H6, or a color, or bold, italic, etc. In the current standards for HTML, the font tag is deprecated. That means, it's going out of style and eventually won't be supported by browsers. The html tags that you used to define font and positioning attributes also have a problem because they are not always interpreted the same among the various flavors of browsers. While you think you have a great looking site in your document window, your users may be seeing something different in their browsers.

Along comes CSS to the rescue. Well, sort of. CSS still has browser incompatibilities so we'll design for version 4 and greater on IE and Netscape. So just what is CSS?

Cascading Style Sheets define the display of the elements in an HTML document. CSS is a powerful technology used to separate content from presentation. A style is a collection of one or several formatting options. Cascading indicates the order in which the styles are applied, or the precedence of the styles. Since HTML is a mark up language which tells the browser how to display text, a style essentially tells the browser how to display elements on the page. CSS provides ways for HTML authors to have more control over the layout and positioning of elements on their sites. For example you can set page margins, format paragraphs, define the spacing between words and/or lines of text. Although you can do some of these in a word processing program, these details were not supported by regular HTML tags. Many designers used tables to control position of elements on the page, but CSS gives you more precision than tables for positioning, and more efficiency for changing attributes of a style. Styles can be used to format font attributes and format the display of text blocks, paragraphs, tables, lists, forms, etc. Styles can also be used for positioning of HTML elements such as paragraphs, layers, and lists.

CSS Insertion

There are three ways that CSS can be inserted:

  1. External style sheet
  2. Internal style sheet
  3. Inline style

External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:

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

An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is shown below:

hr {color:sienna}
p {margin-left:20px}
body {background-image:url("images/back40.gif")}


Internal Style Sheet

An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the <style> tag, like this:

<head>
    <style type="text/css">
    <!--
        hr {color:red}
        p {margin-left:20px}
        body {background-image:url("images/back40.gif")}
    -->
    </style>
</head> 


Inline Styles

An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly!

To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:

  <p style="color:sienna;margin-left:20px">This is a paragraph.</p>
  


These multiple styles will cascade into one and that is why they are called Cascading Style Sheets. This means that there is an order of precedence applied. Styles in an external style sheet are applied first, then styles defined as internal style are applied, and finally inline styles are applied. For example, let's say that we defined the font color for a paragraph in each of the three styles. So, if the color in the external file is red, and the color in the internal style is green, and the color in the inline style is blue, the paragraph will be blue since the inline style is the last one to be applied.

The order that the style sheet is applied starts at the external style and ends with the inline style:

External Style > Internal Style > Inline Style


CSS Syntax

CSS defines display properties of most HTML tags by creating a rule for the display of the tag. The rule is composed of a selector (the tag) and a declaration. The declaration contains the descriptive properties and values. The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces:

selector { property:value; }

For example, to make the font of a paragraph red you would use the following syntax.

p {color: #ff0000;}

The selector of p is typed followed by a space and then the declaration in curly braces. The red value of the color property is written in hexidecimal format as #ff0000. The first 2 digits correspond to Red, the next 2 to Green, and the last 2 to Blue. Since the 2 digits corresponding to Red, Green, and Blue are the same it may also be written in a shortcut way where F corresponds to Red, 0 to Green, and 0 to Blue:

p {color: #f00;}

Multiple declarations or multiple attributes of one tag are separated by semicolons. In the example all paragraphs are red, arial, 10 points:

p {
      color: #f00; 
      font-family: arial; 
      font-size: 10pt;
  }

You can use one declaration for multiple selectors. In the example all paragraphs, heading 1, and list items are red, arial, 10 points":

    p, h1, li {
                  color: #f00; 
                  font-family: arial; 
                  font-size: 10pt;
              }

 

Besides an HTML tag selector there is a class selector and an id selector.

Class Selector

The class selector is a custom style that can be applied to any number of tags. Rather than using an HTML tag as the selector a dot is inserted in front of a name that you create. In the following example a class named bluePara is being used by the p tag and ul tag.

In CSS:

      .bluePara {color: #00f;}

In HTML:

      <p class="bluePara">This is my blue paragraph</p>
      <ul class="bluePara">
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
    


ID Selector

A tag ID is applied to only that tag and only once within that page since each ID must be unique. In CSS the style is preceded with a pound sign, #, and in HTML the id attribute is set to the CSS style.

In CSS:

      #bluePara {color: #00f}

In HTML:

      <p id="bluePara">This is my blue paragraph</p>
    


The Reference Panel

If you're new to HTML you can use Dreamweaver's Reference Panel by going to the Window Menu - Window>Results>Reference to learn tags and CSS information. The Reference Panel can be accessed directly from the Results panel -- open this panel (below the PI) and click the Reference tab. The Reference Panel contains several O'Reilly Reference Books including a few which will come in handy for this Introduction course - HTML, CSS, and JavaScript. The HTML Reference Book provides an explanation or description for a specific HTML tag and which browsers support that tag. The CSS Reference Book provides an explanation or description of a specific CSS Style and which browsers support that style. The Style Syntax is displayed at the bottom of the panel.

CSS Reference

The options button in the upper right corner of the panel displays a menu from which you can select the size of the text in the Reference Panel.

Reference Font Size Selection

Below is the CSS Reference Book default page without any Styles selected.

Reference CSS No Style

Below is the CSS Reference Book with the font Style selected. The description of the style is followed by the CSS Syntax for the font style.

Reference CSS font

* click the link below to continue with this lesson *
CSS Styles

Up Arrow Top