Learning Adobe DreamWeaver CS4

By Greg Bowden

Chapter 12

Cascading Style
Sheets

Guided Computer Tutorials

www.gct.com.au
PUBLISHED BY

GUIDED COMPUTER TUTORIALS

PO Box 311
Belmont, Victoria, 3216, Australia

www.gct.com.au

© Greg Bowden

This product is available in Single or Multi User versions.

Single-user versions are for single student or teacher use at any

particular time, just as a single text book would be used. If you intend
to use the notes with multiple students the single user version should
be upgraded to the multi-user version.

Multi-user versions allow the school or institution to print as many

copies as required, or to place the PDF files on the school network,
intranet and staff laptops. A certificate of authentication is provided
with multi-user versions. Bookmarks provide links to all headings and
sub-headings, and individual chapters are provided.

First published 2009

ISBN: 1 921217 74 X Module 1

1 921217 75 8 Module 2
PDF document on CD-ROM

Every effort has been made to ensure that images used in this
publication are free of copyright, but there may be instances where
this has not been possible. Guided Computer Tutorials would
welcome any information that would redress this situation.
 Chapter

12
Cascading Style Sheets
Style sheets allow you to ensure that text is consistently formatted in all pages
throughout a site. In DreamWeaver styles are called CASCADING STYLE SHEETS (CSS
Styles for short). Cascading means to flow, so a CSS style created in DreamWeaver can
flow from one set of text to another in any page. CSS Styles are a more recent web tool
so they only work on later browser versions. They are very similar to styles that you may
have used in other programs such as Microsoft Word and Adobe InDesign.
A major advantage of styles in DreamWeaver is that you can ensure that text looks the
same on all browsers, platforms and pages. You may have noticed that on some web
pages the same text looks different in Internet Explorer than it does in Firefox. Styles can
be used to overcome this problem.

Cascading Style Sheets

There are two main types of CSS styles:
Internal Custom Styles: which apply only to the page that they were created on.
External Custom Styles: which can apply to all linked pages in a site.

The difference between these two types of styles will be demonstrated in this chapter.

Internal Custom Styles

These are styles that you create from scratch and are only used in the page that they were
created in. If you completed Module 1, you have created Internal Custom Styles.

A Starting a Blank Page

1 Load DreamWeaver or close the current files and start a create a new HTML page.
2 Set the FILES panel to your TRAVELWISE site and the screen to DESIGNER view.

NOTE: If you didn’t do Module 1, you can open a different site or

create a new one. The activities will work with any site,
although it will be an advantage if the site includes a template.

© Guided Computer Tutorials 2009 12-1

Learning Adobe DreamWeaver CS4

3 Enter the following text:

CASCADING STYLE SHEETS <enter>
We will apply styles to the text in this
page only.

B Creating the Main Heading Style

The first style will format the main heading.

1 Highlight the first line of text.

2 In the PROPERTIES INSPECTOR, turn

on the CSS button and set the FONT
to TREBUCHET, ARIAL, HELVETICA,
SANS SERIF.

3 In the NEW CSS RULE dialogue box,

set the SELECTOR TYPE box to CLASS,
in the SELECTOR NAME box enter:
Main_Heading
and select OK.

NOTE: Style names must be one word. When you wish to use more
than one word the _ character can be used to combine the
words.

12-2 © Guided Computer Tutorials 2009
 Cascading Style Sheets 12

4 In the SIZE box of the PROPERTIES

INSPECTOR enter:
150
and set the box next to it to %.

NOTE: By setting the FONT SIZE to a percentage the text will be resized
to one and a half times whatever the default font size is.

5 Set the text to BOLD and DARK RED.

NOTE: These changes have been stored in the MAIN_HEADING style.

© Guided Computer Tutorials 2009 12-3

Learning Adobe DreamWeaver CS4

C Creating the Body Text Style

The paragraph text on the page can be given a different style.

1 Highlight the second line of text.

2 In the PROPERTIES INSPECTOR set

the FONT to ARIAL, HELVETICA, SANS
SERIF.

3 In the NEW CSS RULE dialogue box,

set the SELECTOR TYPE box to CLASS,
in the SELECTOR NAME box enter:
Body_Text
and select OK.

4 Set the FONT SIZE to 14 pixels.

12-4 © Guided Computer Tutorials 2009
 Cascading Style Sheets 12
D Looking at the Code
To understand some of the differences between internal and external styles it is
advantageous to look at the way the HTML code is being created.

1 Click on the SPLIT button in the

DOCUMENT TOOLBAR to display both
CODE and DESIGN views.

2 Scroll through the code and notice

that each format step has been
created.

3 Styles can be altered in CODE view.

4 In the BODY_TEXT style (line 16)

highlight 14 px.

5 Enter 105% then click in the DESIGN

pane and the text should be a little
larger.

© Guided Computer Tutorials 2009 12-5

Learning Adobe DreamWeaver CS4

NOTE: The text has been set to be slightly larger (5%) than the default font
size (100%).

6 Click on the DESIGN button in the DOCUMENT TOOLBAR to close the CODE view
pane.

E The CSS STYLES Panel

The CSS STYLES panel displays the styles that you create and allows you to edit them.

1 Click on the second line of text and

double click on the CSS STYLES
panel label in the PANEL GROUP to
expand it.

2 Click on the ALL button, expand

the <style> rule and the two styles
should be displayed.

3 Click on the MAIN HEADING text

then click on the CURRENT button at
the top of the CSS STYLES panel and
its formats should be displayed.

12-6 © Guided Computer Tutorials 2009
 Cascading Style Sheets 12
F Editing Styles
1 Collapse the INSERT panel in the PANEL GROUP by double clicking on its label. This
will provide more room for the CSS STYLES panel.

2 The properties for the MAIN_

HEADING style should be displayed
in blue.

3 Click on the COLOUR box in the

properties, change it to DARK GREEN
and the text should be adjusted.

4 Save the page as: Sample or Sample.html

© Guided Computer Tutorials 2009 12-7

Learning Adobe DreamWeaver CS4

Looking at the Styles

You can look at all the styles that the page has.

1 Click on the ALL tab in the CSS

STY:ES panel and, if necessary,
expand the <style> rule to see the
two styles.

2 In the FILES panel open the TIPS.HTML page (or another page in your site if you are
not using the TravelWise site).

3 The styles you just created are not

present in this or any of the other
pages of the site.

External CSS Styles

It is much more efficient to store all the style details in a single file rather than ‘clogging’
the code on each page with style information. This can be achieved by creating an
EXTERNAL STYLE SHEET that can be applied over many pages. To illustrate this we will
apply the styles to a page that has been prepared for you.

A Loading the Sample Page

1 Close the files that ate open then display the FILE menu and select OPEN.
2 Access the DWcs4 SUPPORT FILES, open the CHAPTER 12 folder and open the
TRAVELTIPS.HTM page.

12-8 © Guided Computer Tutorials 2009