Style Sheets with Dreamweaver

Home >> Software Help >> Dreamweaver >> Style Sheets

What is a Style Sheet?
A style is a group of formatting attributes that controls the appearance of a range of text in a single document. A CSS style sheet can be used to control several documents at once and includes all of the styles for a document. The advantage of using a CSS style sheet over an HTML style is that in addition to being linked to multiple documents, when a CSS style is updated or changed, the formatting of all the documents that use that style sheet are automatically updated as well. An HTML style is simply a short cut and allows you to click one button instead of going through the whole process of highliting your text, changing your font, picking your font size, selecting your color, etc.

HTML Styles: An HTML style is a collection of character and paragraph attributes saved as HTML font tags. Using HTML styles is a quick and convenient method of formatting text consistently throughout a document or site.

Clicking on this HTML Styles button opens the HTML Styles window

Here I can define the HTML style for my Headlines. In this example, I want all of my headlines to be Arial, Helevetica, sans-serif with a font size of +2 and a dark red.

Once I have defined my style, I can just leave this HTML Styles window open, highlite my text that will be a headline and click the style I defined to apply the attributes, which is named Headlines. This is basically a shortcut that saves me from changing font, size and color everytime I want a headline.

The Headline of my page

This creates normal HTML code and looks like this:

The
Headline of my page

A Cascading Style Sheet, on the other hand, is either linked to a master style or embedded in each page. My CSS heading for this site looks like this:

My CSS Heading

and the code looks like this:

My CSS Heading

The class="head" part is defined in another file, called master.css which is linked to in the head of this HTML page:

The file called master.css is not an HTML file. Like a library item, it is a scrap of code that gets plugged into my page. If we opened master.css in Notepad, the code looks like this:

a:active { color: #000000}
a:hover { color: #999933}
a:link { color: #000066}
a:visited { color: #999933}
.text { font-family: Arial, Helvetica, sans-serif; font-size: 12pt}
.head { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; font-weight: bold}
.smalltext { font-family: Arial, Helvetica, sans-serif; font-size: 10pt}

So when I have class="head" in my page, it looks at the file master.css and finds that a class called .head has been defined. This is very convenient because there are over 100 pages in this site. If I suddenly decided to make the headings dark blue instead of black, or wanted to change the font, I could simply change the file master.css and all of the pages in my site that link to the file master.css will be changed.

To add a linked cascading style sheet to your document:

1. Your file must be saved and your site must be defined before adding a style sheet. Do not add a style sheet to an unsaved file or before you have defined your local root folder. Click the CSS button on the objects palette or go to Window-->CSS styles

2. Click the icon to add a new style

3. Click Link

4. Click browse (even though the file does not yet exist)

5. Watch out!

This is the way it should look:

6. Click OK

7. Now that your style sheet has been created and linked to, you must edit it to add your styles.

8. You can add all of your styles (headings, text, link colors, viewed link colors, etc.) in this one file, master.css but you first must click NEW to start.

9. Now you can make a new custom class (headings, for example), redefine an HTML tag (risky) or use a CSS selector (which defines text, links, viewed links and rollover text-- note that rollover text only works in Explorer)

Start with headings and click OK

10. Now you're ready to define the attributes for your heading. Click Apply and then OK when done.

11. Now you can add more styles

12. When you're done, click Save

For more on HTML styles see: formatting text using HTML Styles

For more on cascading style sheets see: Site Management, cascasing style sheets