Cascading Style Sheets: A Short Introduction

What are they?

CSS are a means of managing the appearance of Web pages. They were developed in early 1996 and are the preferred method for modifying the fonts used in your Web pages. They can be used to control almost all aspects of a page's appearance. There are three types of CSS:

  1. Inline Styles
    Used as an attribute within an HTML tag, such as:

             <h1 style="color: blue; font-style: italic">This is the page heading</h1>

  2. Document-Level Styles
    This is a style sheet defined within the <head> of a document. It can be a good place to define a style or styles that will only be used in one document. Here's an example:

             <head>
             <title>Sample Web page</title>
             <style type="text/css">
             <!--
             .bodytext {
             font-family: Arial, Helvetica, sans-serif;
             font-size: 1.0em;
             }
             -->
             </style>
             </head>
             <body>

  3. External Style Sheets
    This is an external file, which you attach to your Web pages. It can be used with multiple pages and is generally the easiest way to employ style sheets.

Attaching an External Style Sheet in Dreamweaver (MX 2004)

  1. In the Properties box, click the Style drop-down and choose Manage Styles...
  2. The Edit Style Sheet window should appear. Click the Attach... button.
  3. Click the Browse button and find the external style sheet. Click the OK button to select it.
  4. Click the Done button to close the Edit Style Sheet window.
Note: Style sheets can also be attached to the Web page by clicking the Attach Style Sheet icon ( ) in the CSS Styles panel. This works in earlier Dreamweaver versions.

Modifying Existing Style Sheets

  1. Click the delta to expand the Design panel.
  2. Choose the CSS Styles tab.
  3. Select a style to modify.
  4. Click the Edit Style... ( ) icon.

Adding a New Style

  1. Click the delta to expand the Design panel.
  2. Choose the CSS Styles tab
  3. Click the New CSS Style icon ( ) in the CSS Styles panel

CSS Trick: Instant Text Boxes

  1. Click the Code View button ( ).
  2. Type the following in the <head> of your document

             <style type="text/css">
             <!--
             blockquote {
             color: #000000;
             background-color: #EEEEEE;
             border: 1px solid #191970;
             padding: 10px;
             font-size: .9em;
             }
             -->
             </style>

  3. Select the text to be placed in the box, and select Text > Indent from the menu at the top of the screen, or use the Text Indent button ( ), in the Properties.
This is what the text box looks like. You can modify the text color, background color, border, padding, and font size to change the appearance of the text box.