Formatting Your Dreamweaver MX Web Page with CSS and HTML Styles
- Creating and Applying a Custom Style
- Exploring Style Settings
- Redefining the Heading 3 <h3> Tag
- Positioning a Layer with a Style
- Creating a Hyperlink Rollover
- Creating an External Style Sheet
- Transforming the Property Inspector
- Converting Styles to HTML Markup (<font> Tags)
- Saving HTML Markup as an HTML Style
- Summary
- Q&A
- Workshop
See all Sams Teach Yourself on InformIT Design & Creative Media Tutorials.
This chapter is from the book
This chapter is from the book
This chapter is from the book
Hour 15: Formatting Your Web Pages with Cascading Style Sheets and HTML Styles
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.
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.
Select OK to save the style. The CSS Styles panel lists the new custom style.
){kind=link}
){kind=link}
Figure 15.1 Create a new style with the New Style button.
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.
){kind=link}
Figure 15.3 The Style definition dialog box is where you set up the attributes of the 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.