Part II: Appreciating Web Design Options in Java

Creator QR in Java Part II: Appreciating Web Design Options

Figure 5-21: To apply a class style, select the text or other element in the main workspace, and then choose the style from the Class drop-down list in the Property inspector

To remove a class style from a selected text block or other element, make sure the Property inspector is in HTML mode, select the element where the style is applied in the Web page, and choose None from the Class drop-down list in the Property inspector (you can see this option in Figure 5-21) You can also remove a style by right-clicking the tag the style is applied to in the tag selector at the very bottom of the workspace The tag selector is a great feature for quick edits and for identifying elements on the page As you see in Figure 5-22, when you right-click a tag name, a pop-up menu appears If you don t see the tag that you want to edit in the tag selector, click to select the element in the Web page and the corresponding tag should appear in the tag selector To remove or change a style using the tag selector, right-click the tag and then choose Class Set Class None to remove it, or select another class style from the menu to change the applied style

In addition to creating new class styles, you can create styles that redefine existing HTML tags When you create a style in the New CSS Rule dialog box using the tag selector option, you can alter the appearance, position, and other features of any an existing HTML tag

Figure 5-22: You can use the tag selector at the bottom left of the Dreamweaver workspace to remove a style or tag

Because HTML tags already include formatting options, (for example, the Heading tags include formatting to style text in large and bold), when you create a style with a Tag selector, you have to consider the formatting options already associated with that tag Any options you specify in the CSS Rule Definition dialog box will either be added to the existing formatting created by the tag, or the new rules will override the existing style For example, in the exercise that follows, I redefine the <h1> tag by changing the headline font to Georgia, which will take the place of the default font Times, but I don t need to make bold part of the style definition because it s already included in the style for an <h1> tag When you redefine an existing HTML tag, you don t need to apply the style for the formatting to change Wherever you ve applied the HTML tag, the style definition settings are applied automatically You may ask Why would I redefine the <h1> tag instead of just creating a new headline style as a class style or What s the best scenario for using each of these options In Creating styles with the class selector earlier in this chapter, you find out how to create a new style class that you can selectively apply to any block of text on your page But at times, using an existing HTML tag is better Heading styles are especially important because they re well recognized on the Web as indicators of the most important text on a page To redefine an HTML tag, such as the <h1> tag, with the tag selector, create a new file or open an existing one and then follow these steps: 1 Choose Format CSS Styles New Alternatively, you can right-click (Option-click on a Mac) anywhere in the CSS panel and choose New, or you can click the New CSS Rule icon at the bottom right of the CSS panel The icon looks like a small plus (+) sign The New CSS Rule dialog box opens, as shown in Figure 5-23