- 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
This chapter is from the book
This chapter is from the book
This chapter is from the book
Redefining the Heading 3 <h3> Tag
Text formatted with the <h3> tag by default looks like Figure 15.4. You can redefine HTML tags with CSS styles. Redefined HTML tags do not appear in the styles list in the CSS Styles panel. You apply the HTML tags as you normally would. For instance, you apply the <h3> tag by selecting Heading 3 from the format drop-down menu in the Property inspector. After you redefine the <h3> tag, any text with that tag will immediately appear with the new style formatting.
){kind=link}
Figure 15.4 The Heading 3 format's default appearance is bold with size 6 text and is left justified. You can redefine the appearance with CSS styles.
Type some text in the Dreamweaver Document window and apply Heading 3, the <h3> tag, to it. Do this so that you can see what the text looks like before you redefine the <h3> tag. Create a new style by selecting the New button in the CSS Styles panel. The New Style dialog box appears. Select the radio button beside Redefine HTML Tag and then select h3 from the New Style drop-down menu, as shown in Figure 15.5.
){kind=link}
Figure 15.5 The Redefine HTML Tag drop-down menu contains a list of all of the HTML tags that you can change with CSS styles.
By default, the <h3> tag makes objects left justified. To center, align all objects with the <h3> tag applied, redefining it with styles, and then select the Block category. Select Center from the Text Align drop-down menu, as shown in Figure 15.6, and click the OK button. Immediately after you click OK, the h3 text in your Web page should jump to center alignment. You can also apply a font in the Type category if you'd like.
){kind=link}
Figure 15.6 The Block properties apply to blocks of text. You can change the default alignment of the text block in the Text Align drop-down menu.
Styles are defined in the <head> section of the Web page. Dreamweaver automatically records the styles you create in the CSS Styles panel into the <head> of the document. The code for the h3 style looks like this:
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
color: #6600FF;
text-align: center;
}
If you look in the code, you'll see paired style tags surrounding the redefined <h3> tag style definition in the code. Nested within the style tags are paired comment tags (the <!–– and the closing ––>). The comment tags are added so that older browsers simply ignore the styles and don't cause an error. The style definition has the tag name, h3, followed by paired curly brackets containing the property name and the property value. Notice that a colon separates the property name and property value.
The CSS Styles panel has a second view, the Edit Styles view. You select this view by clicking the Edit Styles radio button at the top of the CSS Styles panel, as shown in Figure 15.7. This view shows the styles in the left column and their definitions in the right column. The CSS Styles panel displays only custom styles, but the Edit Styles view displays all the styles you've defined in the document, including redefined HTML tags.
){kind=link}
Figure 15.7 Select the Edit Styles view to see the style definition code in the CSS Styles panel.