GCUDV Project: Wilmette Historic Preservation Commission

Home | Introduction to Writing HTML | Using Dreamweaver | FTP | Style Sheets | Advanced

Style Sheets

Why Style Sheets?
What are Cascading Style Sheets?
The code—What CSS looks like
Applying CSS to a page through Dreamweaver
Linking the CSS to Multiple Pages

 

Why Style Sheets?

Anytime you create multiple copies of something, it is smart to have a template as a blueprint. A style sheet is the template for web pages. You define the common characteristics of the pages and link each page to the master style sheet. If you want to make changes to the common characteristics, you only have to make the change once in the master file.

What is Cascading Style Sheets?


Cascading Style Sheets (CSS) is a language for specifying various aspects of the style of HTML elements. Font, color, background, and links can be defined using CSS either as inline, embedded, or linked.
· Inline: Applies the style to the object at the beginning of the object, used to define something that is not reoccurring
· Embedded: Applies the style to the page in the <head> tag, used only if the page is one of a kind
· Linked: Applies a link to an external style sheet in the <head> tag, enabling the style to be applied to all pages within the site. This method is the best.

To control this document's font, font color, heading, and links I have linked the same style sheet to this page and all the pages in this seminar. The style for this box looks like this:

#special {
background:#FFFFCC;
border:1px solid #000;
MARGIN-left: 250px;
MARGIN-right: 100px;
padding:10px;
}

The Code--What CSS looks like


When you create a CSS to be linked, you create a blank page without any HTML. You place only the CSS code in the page and save it with a name in all lower case letters without any spaces with a .css extension.


Below is an example of what the contents of a linked style sheet might look like:


TD { FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: verdana,arial,helvetica,sans serif }
.special:TD { FONT-SIZE: 11px; COLOR: #ffffff; FONT_STYLE:oblique; FONT-FAMILY: verdana,arial,helvetica,sans-serif}
A:link { FONT-WEIGHT: normal; FONT-SIZE: 11px; COLOR: #4A5B94; FONT-FAMILY: verdana,arial,helvetica,sans-serif; TEXT-DECORATION: underline}

You can specify multiple scenarios of an attribute by putting a dot then the name, colon attribute. Like this--> .thename:TD, where TD is the conventional attribute abbreviation for a table cell.

Lucky for you, Macromedia® Dreamweaver® takes care of all the details!

Applying CSS to a page through Dreamweaver

This image was taken from another tutorial, ITEC 745

I will demonstrate the creation of a CSS by applying styles to a page design.


1. Download this page called, Sample1.htm by clicking on the link and choosing File/Save As from the browser menu. You will want to create a folder to house this file and several others.

2. Open the page in Dreamweaver. Go to Window / CSS Styles to open the CSS Styles interface.


Styles on one page can be applied to just this page or all subsequent pages.


3. Press the plus sign inside the CSS Interface. A helper box displays, New CSS.

 

 

 

 

 

 

 

 


4. A pop up box appears like the one below. You will be using the Redefine HTML Tag most of the time and applying it to the most common tags. Let's define the links in this document by selecting Tag: a

a is for Link
Body is for the entire document
Font is the font
H1 - H6 is for Headings such as the headings that appear in orange in this document
Link - Use A for hyperlinks. The link you see in the style sheet is for something else.
Paragraph controls each paragraph or text between the <p>tags</p>
 

 

Since this is all links we want to define, we will choose Redefine HTML Tag. The Tag selector provides us with all the tags we can redefine.

Define In provides us with two options. We can either apply these styles to just this document, or since we intend on linking to other documents from this document, we can apply the styles to all the documents we are going to create.

5. Choose Define In New Style Sheet File. You will be prompted to Save Style Sheet As. You want to name the style sheet something like style and save it in the same location that you saved the file sample1.htm


6. After you save the CSS file, another pop up window appears asking for the definitions for our <a> tag. You will see that you have a variety of options for your text appearance. Select your preferences. Click Apply, OK.

7. Dreamweaver applies the styles to the page when you click Apply. This changes all my links to the defined style. But, I don’t want all my links to be the same. I want to establish a hierarchy within my navigation bar. I will need to create a separate definition for the links I want to be larger and bolder. I will need to create what a Class.

a. Click the New CSS Style Button again (the plus sign).
b. Select the radio button, Make Custom Style
c. Title this class something intuitive for special links, all lower case with no spacing
d. Define the style as bold, or larger than our original <a> link. I changed the font size and weight. Click OK.


e. Apply this Class to the selected links by highlighting the desired link, pressing the Apply Styles radio button in the CSS Interface, Select the name of the Class you just defined.
f. You will see your changes take effect immediately. If the results are not what you want, go back to Edit Styles by selecting the Edit Styles radio button and clicking on the class. You will then be able to change your font settings.

 

6. Do the same for text within the TD tag, create a class for special TD text.
7. Locate and Open the CSS page in Dreamweaver and look at the code. When you get familiar with the syntax, you will be able to easily edit and add to your cascading style sheet without having to use the Dreamweaver interface every time.
8. If you want to add rollovers to your links, you’re standard link looks like the following:
a {
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-style: normal; font-weight: normal
}


Linking the CSS to Multiple Pages

Through Dreamweaver

1. Start a new HTML document. File/New

2. Save the document in the site root folder

3. In the Design panel, under CSS Styles, select the button Attach Style Sheet next to New CSS Style

4. Choose Link to the Style Sheet and Browse to the style sheet.

5. Click OK.

View the Linked code below to see what Dreamweaver adds to the new document linked to the style sheet.

 

 

 

 

 

 

 

 

By Hand

Inline: <tag style= “CSS code”>text or object</tag>

Embedded:
<head>
<style type="text/css">
<!--
... style sheet code goes here ...
-->
</style>
</head>


Linked:
<head>
<LINK href="style.css" type=text/css rel=stylesheet>
</head>