LESSON 5: USING CASCADING STYLE SHEETS - …€¦ ·  · 1999-01-27LESSON 5: USING CASCADING STYLE SHEETS ... • how to apply the new style within your document • how to control

LESSON 5: USING CASCADING STYLE SHEETS

OBJECTIVES

In this lesson we will learn:

• how styles work• why styles are more powerful and versatile than other HTML formatting elements• how to set up a new style by using the Styles palette• how to apply the new style within your document• how to control text layout and properties• how to set up and modify an External Style Sheet

CONTEXT

Cascading Style Sheets (CSS) are a time-saving addition to HTML and a great way to ensure you are

maintaining a consistent look and feel across a Web site. Web style sheets are similar to their

equivalents in Quark XPress and PageMaker and many word processors. Style sheets enable you to

define a set of formatting options—such as font size, face, and alignment—and then apply that collection

of options as a group. For example, you might want to define a style for headlines that is bold, centered,

and Helvetica.

You can define a style for a section of a document, an entire document, or even an entire Web site. You

can also alter a style and globally change all of the elements defined by that style. Thus, if halfway

through developing your Web site, you decide you want the font for your headlines to be Times instead

of Helvetica, simply change the style definition you created for headlines—every headline formatted with

that style will change automatically.

The only bad news about style sheets is that since they are relatively new to the Web, they are only

supported by the latest browsers: Netscape 4.0, Internet Explorer 4.0, and newer. (Style sheet support

was built into Explorer 3.0, but don’t expect full support for all of the techniques you’ll encounter in

this lesson.)

Dreamweaver was created with browser differences in mind and includes features to help you

accommodate these differences. For example, you can create a site with style sheets and then use

Dreamweaver’s Convert to 3.0 Browsers option to create alternative pages that will work in older

browsers. You’ll find instructions for this conversion feature at the end of this lesson.

Text formatting that is manually applied to ranges of text will take precedence over styles.

Styles in HTML documents can control most of the traditional text-formatting attributes such as font,

size, and alignment. They can also specify unique HTML attributes such as positioning, special effects,

and mouse rollovers. However, Dreamweaver cannot display all of the available style options in the

Document window. An attribute that is not displayed appears in the Style definition dialog box with an

asterisk (*) next to its name. To see the effect you have to preview the page in a browser that supports

Cascading Style Sheets.

2 9DREAMWEAVER CURRICULUM

DREAMWEAVER CURRICULUM

Defining a New Style

The following exercises walk you through the process ofdefining a new style and then applying it to a selection of text ina document. 1 . Open the file coftable.htm in the “bookstore” folder.

2 . Click the S t y l e s button on the Launcher or chooseWindow > Styles to open the Styles palette (Figure 5-1).

3 . Click the Style Sheet button at the bottom of the palette to openthe Edit Style Sheet dialog box.

4 . Click the New button to open the New Styledialog box seen in Figure 5-2.

5 . Select the Make Custom Style radio button andtype “.bodytext” in the Name field.

Note: The period at the beginning of the name isrequired for the style to work.

6 . Click OK.

A Style definition dialog box appears with thename .bodytext at the top of the window as seenin Figure 5-3.

7 . With the Type categoryselected on the left, chooseArial, Helvetica, Sans Serif fromthe Font pull-down menu.

8 . Set the Size to 12 points.

9 . Set the Style to normal.

1 0 . Click on the small box next toColor and select a darkpurple (#6600CC) from theColor palette.

You can choose from manyother style options under theType category.

1 1 . Click OK when you finishdefining the style.

1 2 . Click Done in the Edit StyleSheet dialog box.

We have now defined a new style, or “ c l a s s ” and named it .bodytext, the name that appears in theStyles palette list.

3 0

Figure 5-1The Styles palette

Figure 5-2The New Style dialog box

Figure 5-3The Style definition dialog box

Applying a Style

After you define a style you can apply it to any selection of text on a page. The following steps will walkyou through the process of applying a style to selected text.

1 . With coftable.htm still open, click and drag with your mouse to select the first paragraph of textunder the headline “On the coffeetable.”

2 . Choose Window > Styles, or click the Styles button on the Launcher, to open the Styles palette.3 . Double-click to select the bodytext style.

The style is automatically applied to the highlighted text.4 . Use F10 to open the HTML inspector to see what has happened behind the scenes. You will find the

new style identified as a “class” named .bodytext. The style identified with this name has beenapplied to all the text that appears between the tags <p class=bodytext> and </p>.

REDEFINING AN EXISTING HTML TAG

In addition to creating new styles, Cascading Style Sheets make it possible to associate additional

formatting options with existing HTML tags. For example, if you have already formatted a number of

headlines with the H3 tag and now want to center them, you can add center alignment to the style

definition of the H3 tag and automatically apply that change to all of the text you have formatted H3.

You can also change other attributes like the font face and color.

To Redefine an Existing HTML Tag

With coftable.htm open:1 . If the Styles palette is not still open, click the Styles button on the Launcher or choose

Window > Styles.2 . Click the Style Sheet button to open the Edit Style Sheet dialog box.3 . Click New to open a New Style Sheet dialog box.4 . Select the Redefine HTML Tag radio button and choose H3 from the pull-down list at the bottom of

the dialog box seen in Figure 5-4.5 . Click OK.

Figure 5-4You can redefine any existing HTML formatting tag.

3 1DREAMWEAVER CURRICULUM

6 . In the Style definition for H3 dialog box, choose T y p e from the list on the left, and select Arial,Helvetica, Sans Serif from the font list. Click in the color box and assign the text a new color.

7 . Now choose the B l o c k category on the left, and select center from the Text Align pull-down menu(Figure 5-5).

Figure 5-5The Block category in the Style definition dialog box includes alignment options.

8 . Choose OK to close the Style definition dialog box.9 . Choose Done to close the Edit Style Sheet dialog box.

All of the H3 headlines in coftable.htm should now be centered, and rendered in an Arial or Helveticafont face in the color you selected.

You can follow these same steps to redesign any other HTML tag.

CHANGING A STYLE

If you want to go back and change some of the settings you’ve made on a style, click on the style in the

Edit Style Sheet dialog box and then click the Edit button to return to the Style definition dialog box.

From here you can change or add formatting options to alter the style. Any elements formatted with that

style will automatically be changed to reflect the new definition of the HTML tag or style.

USING EXTERNAL STYLE SHEETS

One of the most valuable and time-saving qualities of style sheets is that you can apply them across

multiple pages—and even over an entire Web site—to control the formatting of elements on any or all

of your pages. The styles you defined in the first part of this lesson were made specific to the HTML

page you were working on. If you open another HTML page or create a new document, your styles will

not be available.

To make a style available to more than one page, you need to create an External Style Sheet—a text file

containing only style specifications. When you create a style sheet, it is automatically added to the head

of the document you are currently working on, but you can also create a style in an external style sheet

DREAMWEAVER CURRICULUM3 2

that works on any other file in your site. Any changes you make to the definition of a style in an external

style sheet are applied to all of the documents linked to that style.

Creating External Style Sheets

The easiest way to create an External Style Sheet is to create a style sheet for a particular page likethose we have already done, and then save it as a . c s s (Cascading Style Sheet) file.1 . Open coftable.htm.2 . If the Styles palette is not open, click the Styles button on the Launcher or choose

Window > Styles.3 . Click the Style Sheet button to open the Edit Style Sheet dialog box, and highlight H3.4 . With the H3 style highlighted, press the C o n t r o l key (PC) or O p t i o n (Mac) and click Done. 5 . In the Save As dialog box that opens, navigate to find the folder where you want to save it

(let’s use the “bookstore” folder at the root level), and give it a name ending with the .cssextension. Call it headline.css.

To Link to an External Style Sheet

1 . Open the page you want to link to a Style sheet. Let’s use catalog.htm in the “catalog” folder.If it’s not already open, click the Styles button on the Launcher or choose Window > Styles.

2 . Click the Style Sheet button in the Styles palette.3 . In the Edit Styles dialog box, click Link.4 . Enter the path to the external style sheet (.css file) we just created, or use the Browse button to

locate the file and let Dreamweaver insert the path for you.An external style sheet name must end with a .css extension and be in the same relative location itwill be in when the files and folders are transferred to your server.

5 . Click Open, then OK.The external style sheet appears, with “(link)” after the name, on the list of styles in the Edit Stylesdialog box. Any new styles included in this external style sheet now appear in the list of stylesavailable in the Styles palette. If you redefined HTML tags in the external style sheet, the newdefinitions are automatically applied to any elements on the page that are formatted with these tags.After you link the external style sheet, you can apply any of its styles to elements on your page byfollowing the steps in the Applying a Style section earlier in this lesson.

6 . Click Done to close the Edit Style Sheet Box.7 . Save your work and use the F12 key to preview it in a browser.

OTHER STYLE SHEET DEFINITION OPTIONS

3 3DREAMWEAVER CURRICULUM

In addition to Type formatting options, the Style definition dialog box seen in Figure 5-3 includesthe following formatting options:

• The Background panel to define background settings for a style• The Block panel to define spacing and alignment settings for styles• The Box panel to define settings for styles controlling the placement of elements on the page• The Border panel to define settings for styles controlling borders around elements• The List panel to define list settings for styles• The Positioning panel that changes the tag or block of selected text into a new layer, using the

default tag for defining layers (you’ll find more about layers in the DHTML instructions inLesson 6)

• The Extensions panel that controls features not supported by most current browsers (see theDreamweaver Developers Center at www.dreamweaver.com for the latest information on these options)

DREAMWEAVER CURRICULUM

THE CONVERT TO 3.0 BROWSER COMPATIBLE FEATURE

If you want to use style sheets and other advanced features, but still want to ensure that your Web site

looks good to a wide audience—use Dreamweaver’s Convert to 3.0 Browser Compatible feature. This

unique feature creates a copy of any page so you can include it on your server and make it accessible to

viewers using older browsers (such as Netscape 3.0). In this new page, Dreamweaver replaces CSS

markup with HTML character styles wherever possible and removes any CSS markup that cannot be

converted to HTML. The Convert to 3.0 Browser Compatible feature also converts layers to an HTML

table. (You will learn about layers in Lesson 6.)

You can make this page available to your visitors by including a link on the more advanced page, or you

can make it appear automatically for most viewers by applying the Check Browser behavior (available

from the Behaviors palette).

To Convert a File to 3.0 Browser Compatible

1 . Choose File > Convert > 3.0 Browser Compatible.2 . In the Convert to 3.0 Browser Compatible dialog box, select the radio button for Convert Layers to

T a b l e s or for CSS Styles to HTML Markup (Character Styles), or both.By default, both are selected. If you are not using layers, choose just the CSS Styles option.

3 . Click Continue.Dreamweaver opens the converted file in a new, untitled window.

4 . Choose File > Save to save the new file and name it. It’s a good idea to give your converted file a name that is easy to remember and associated with theoriginal file. For example, if you convert index.htm, you might call the converted file index2.htm.

Note: If you change the original file, you must perform the Convert to 3.0 Browser Compatibleprocedure again to update the 3.0-compatible file. For this reason, you’ll want to wait until after you arecompletely satisfied with your original file before you do this procedure.

MORE EXERCISES TO SHARPEN YOUR SKILLS

• Experiment with creating other styles and applying them to text blocks and headings ondifferent pages.

• Edit the definition of a style and notice how all of the elements it is applied to also change.• Create a new external style sheet and apply it to all of the files in the “catalog” folder.• When you have linked the last file to the external style sheet, go into the Styles palette

and modify the styles, then observe how your modifications carry through to the otherlinked documents.

3 4