• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Hour 15. Formatting Your Web Pages with ... > Creating and Applying a Custom 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

1.
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.

Figure 15.1. Create a new style with the New Style button.


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

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


3.
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.

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


4.
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.

5.
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.


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


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint