ONLINEPROOFINGSERVICE.COM

eproof - www.onlineproofingservice.com

Menu


Show List View Show Only Set Properties Figure 8-3: The new CSS panel, showing the style of an item selected in the open document. 204


Part III: Advancing Your Site When you click the New CSS Rule icon, the New CSS Rule dialog box opens, as shown in Figure 8-4, and displays the following options: _ Name: Although the first field in this box is Name, when you first bring it up, its title changes, depending on which CSS type you select by using the three radio buttons in the Selector Type area. Read the description for each of the CSS types in the following bullets to see how to fill out the Name field. _ Selector Type: These three radio button options allow you to define the type of style you want to create: Class enables you to define a new style that you can apply to any section on a page by using the Class attribute. When you select this option, you must also fill in the name of the class in the Name field above it. All custom style names must begin with a period (.), which Dreamweaver automatically inserts as you name the style. Tag enables you to create a style that adds to or changes the formatting associated with an existing HTML tag. When you select this option, the Name field asks for a tag name. Clicking the Tag dropdown list allows you to select from a huge list of HTML tags (the default one is the <BODY> tag). For more information on this option, see the section, "Redefining HTML tags," later in this chapter. Advanced enables you to define other types of styles, which usually consist of a kind of hybrid that combines a custom style with a specific HTML tag. The most common of these are the a: styles, which apply only to the <A> tag and enable you to do tasks such as change the color of a link when the mouse hovers over it. When you select this option, the Selector field asks for the selector name. Choices in the pop-up list are a:active, a:hover, a:link, and a:visited. _ Define In: This option lets you choose whether your style sheet exists within the current document or in a separate file. When you select a new style sheet file, youre creating an external style sheet. If you select This Document Only, youre creating an internal style sheet, in which defined styles are available only for the page youre working on. Figure 8-4: The New CSS Rule dialog box. Chapter 8: Cascading Style Sheets 205 After you click OK in the New CSS Rule dialog box, another dialog box appears in which you define the different rules for the style. I explain the CSS Rule Definition dialog box in the "Defining CSS Rules" section, later in this chapter. Creating Style Sheets in Dreamweaver When you start creating and using Cascading Style Sheets, you use one of the most complex and advanced Dreamweaver features. Consequently, creating style sheets takes a little more time to grasp than does applying basic HTML tags and modifying their attributes. Still, Dreamweaver makes defining style sheets much easier than writing them by hand - a task much closer to writing