Home | Javascript | CSS | Multimedia | Tools | Revitalize | eduscapes

Redesign with CSS

man planningCSS stands for Cascading Style Sheets and is the easiest way to maintain consistency throughout your pages. For a quick overview, go to Wikipedia CSS. This top section provides a QuickStart to CSS. Use the rest of the page as needed for support material.

  1. Open escrapbooking.com. This site was adapted from the Dreamweaver Design Pages (CSS).
  2. Explore the Landmarks CSS page. Notice the CSS in th head area. Open the Landmarks.css document. Let's apply this css to your document. Put the following statement in your project:
    <link href="landmarks.css" rel="stylesheet" type="text/css" />
  3. Explore the Pets page and the associated external pets.css.
    Notice the style link in the head area of the page.
    Create an external style sheet.
  4. Create a new Dreamweaver document. Save the document in your workshop folder. Choose Text>CSS Style>New. Use the options automate the CSS process.
  5. Open Dreamweaver. Pull down the File menu and select a new document. Select Design Pages (CSS). Choose 2 Columns, Left Nav.

 

Support Materials

Explore the following resources on this page:

Elements are styled with selectors such as p, h2, and li.

Pseudo-classes (:hover, :link) are used to define further behavior. For example, you can indicate that you want the color to change when the cursor hovers over a word.

You can use CSS two ways: internal and external. First, you can enter the style tags at the top of a single document or within a single document. These are called an internal style rules and will help you maintain consistency within a document. Second, you can create a separate document called an external style sheet that can be attached to a single document or a series of pages such as a website.

Return to Top

Internal Cascading Style Sheet

Your style sheet will go between the start head tag <head> and the end head tag </head> at the top of your document. Most people place it under the meta name tags.

Start with the style tag. Between the style start and end tags, you place the rules you want to be followed. For example, you might want to use a black text color and white background color on your body font. If you want to use a color, you use a number sign and a color number. Or, you can use standard color names such as black, red, purple, blue, green.

You can control many other font functions such as style, size, and font family. There are many other things that can be added. For example, you can set the page margins. This will provide a margin on the right and left side of the browser window.

An example of an internal style sheet is provided below.

<style type="text/css">
body {font-family: "Arial", sans-serif; margin-left: 15%; margin-right: 15%; }
p {color: black; font-size: 100%; font-family: "Arial", sans-serif; }
h1 {color: red; font-size: 200%; font-family: "Verdana", sans-serif; }
h2 {color: green; font-size: 150%; font-family: "Verdana", sans-serif; }
h3 {color: blue; font-size: 125%; font-family: "Verdana", sans-serif; }
</style>

Explore the Landmarks CSS page. Notice the CSS in the head area.
Add styles to your own page.

You may wish to specify styles for web links.

p {font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none;}
a:link.p
{font-family: Verdana, Arial, Helvetica, sans-serif; color: #000066; text-decoration: none;}
a:visited.p
{font-family: Verdana, Arial, Helvetica, sans-serif; color: #FF0000; text-decoration: none;}
a:hover.p
{font-family: Verdana, Arial, Helvetica, sans-serif; color: #FF0000; text-decoration: none;}

Also, consider styles for images and other objects.

img {float: right; padding: 5px;}

Create specialized styles for specific activities such as readings.

.activity {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 75%; background-color: #BBE3FF; display: block; padding: 15px;}

Use "class" to indicate a specific style such as <p class="activity">

Return to Top

External Cascading Style Sheet

If you plan to use the same styles across pages in a website, it's a good idea to create an external style sheet that can be shared. This style sheet is a text file that is named with the .css file extension and called in the head of the document.

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

Explore the Pets page and the associated external pets.css.
Notice the style link in the head area of the page.
Create an external style sheet.

Return to Top

CSS Techniques

Explore some of the following ideas:

CSS Ideas

Other Ideas

Return to Top

Web Resources

Learn more about Cascading Style Sheets from Information Architecture for the Web.

Return to Top

Developed by Annette Lamb, 1/06. Updated 3/07.