The W3C-approved method for presenting and positioning objects in a Web page is using cascading style sheets. Dreamweaver makes it easy to define styles, even styles for your entire site in a single location, that add fonts, colors, and other effects to text and other objects on Web pages.

This chapter is from the book

Cascading Style Sheets (CSS) enable you to apply a property or group of properties
to an object by applying a style to that object. You define and apply
styles in Dreamweaver's CSS Styles panel. When thinking about styles, you
usually think of creating and applying styles to text, which certainly is possible.
However, styles can be used for positioning objects, creating borders, and lots
more.

One of the benefits of using styles is the ability to simultaneously update
every object with a certain style. If you create a default style, such as a
style defined as Arial 12-point text, you can later change the font to Times
Roman and all the objects with that style will instantly appear in the new font.

Cascading Style Sheets are part of dynamic HTML (DHTML). Your viewers will
need to have a 4.0 or later browser version to view styles. Dreamweaver displays
most styles in the Document window. The styles that Dreamweaver can't display
are noted with an asterisk when you are defining the style.

There are three different style types, and during this hour, you will learn
how to create a style with all three. You will create a custom style, redefine
an existing HTML tag, and use a CSS Selector style to create a hyperlink rollover
effect.

In this hour, you will learn

How to create each of the three style types: a custom style, a redefined
HTML tag, and a CSS Selector style

How to apply styles to objects

How to create an external style sheet for your entire Web site

How to convert a Web page containing styles so that older browsers can
display the text formatting

How to create an HTML style

Creating and Applying a Custom Style

The CSS Styles panel lists custom styles that have been defined and are ready
to apply to objects on your Web page. You define custom styles by creating a new
style and defining it in Dreamweaver. The Dreamweaver Style Definition dialog
box has panels listing numerous style settings. First, create a custom style to
apply to text. You'll define the font, font size, and font color. To create
a custom style

Select the New CSS Style button from the CSS Styles panel, shown in Figure
15.1. You can also select the New CSS Style command from the menu in
the upper right corner of the CSS Styles panel or from the CSS Styles submenu
of Dreamweaver's Text menu.

The New Style dialog box appears as shown in Figure
15.2. Select the radio button beside Make Custom Style (class).

Enter a name for the style in the Name box at the top of the New Style
dialog box. Custom style names always begin with a period. Dreamweaver will
enter the period for you if you forget to enter it.

Figure 15.2 You select which of the
three types of styles you are defining in the New Style dialog box.

TIP

It's usually a good idea not to use spaces or punctuation in style
names.

Select the radio button beside This Document Only in the Define In
section. This places the style definition at the top of the current Web page. If
you forget this step, Dreamweaver will prompt you to save the style as an
external style sheet. We'll discuss external style sheets later this
hour.

The Style definition dialog box appears as shown in Figure
15.3. The box opens with the Type category selected. In the Type category,
select a font and font size from the appropriate drop-down menus. Also,
select a font color with the color picker.

Figure 15.3 The Style definition
dialog box is where you set up the attributes of the style.

Select OK to save the style. The CSS Styles panel lists the new custom
style.

Apply the custom style to objects by first selecting the object and then
clicking on the style in the CSS Styles panel. You select a block of text by
dragging the cursor across it. You can also select a layer, table cell, or any
other object in the Web page and apply the style. All the text in the layer,
table cell, or other object will then appear as defined by the style.

Apply the custom style that you just created to some text in the Dreamweaver
Document window. Select the text, and then click on the style name in the CSS
Styles panel to apply the style.

CAUTION

Some style attributes will work only when applied to certain tags. For
instance, a style called bigcell with the cell padding values set in
the Box category of the CSS Styles definition will not have any effect on text
because padding is not an attribute of text. Applying this style to an
appropriate object, like a table cell, will have an effect.

TIP

If you accidentally apply a style to an object, you can remove it by
selecting (none) in the CSS Styles panel.