Book IV 6 in Java

Painting Data Matrix ECC200 in Java Book IV 6

The CSS Styles panel can also toggle to All mode, to work with rules in the whole document As shown in Figure 6-2, the panel is divided into an All Rules pane and a Properties pane

The All Rules pane displays in a tree-like structure all CSS rules associated with the document Rules are organized by their containers either a style element inside the document or an external style sheet attached to the HTML file The Properties pane acts the same way as it does in Current mode (See the section Working with styles of the selected element, earlier in this chapter) The pane provides a way to edit the properties of the CSS rule selected in the All Rules pane You can also view the Properties pane in Category and List views

Rather than your having to go to the document source and create a new CSS rule, Dreamweaver provides a visual way to do that, from within the CSS Styles panel Follow these instructions to add a CSS rule to your document or style sheet:

The New CSS Rule dialog box is displayed, as shown in Figure 6-4

Your options are described in this list: Class: Use Class when you want to apply the style rule by using the class attribute of the elements Tag: Use Tag when you want to add to or redefine an existing HTML tag s properties Advanced: Use Advanced when you need to apply the rule to a particular id value or to a pseudo-class (such as a:active, a:link, and a:visited links)

from Step 2 If you choose Class, enter a period followed by the class name in the box Remember that a valid class selector begins with a period If you choose Tag, select an HTML tag from the drop-down list If you choose Advanced, enter the selector value This value is an id for id-specific rules or the name of a pseudo-class (from the dropdown list)

Here are your options: Existing style sheet: If you choose this option, select a style sheet file that you already created New style sheet: Select the (New Style Sheet file) item from the Define In drop-down list Current document: Select the This Document Only option if you want to embed the style rule inside a style element of the current document

The CSS Rule Definition dialog box is displayed, as shown in Figure 6-5

One of the greatest benefits to using Dreamweaver for creating style rules is that this dialog box gives you full access to all possible properties at your disposal Therefore, feel free to go to town Leave no stone unturned Leave no CSS property overlooked See Book V for more details on the these specific properties

You can edit both style properties and complete rules in the CSS Styles panel To edit a property of the selected rule, simply use the Property pane in the CSS Styles panel To edit a rule: If you re in Current mode: Double-click a property in the Summary for Section pane to display the rule in which the property is defined Or, click the Edit Style icon on the bottom of the panel If you re in All mode: Double-click a rule in the All Rules pane (or select the rule and click the Edit Style icon) The CSS Rule Definition dialog box is displayed (refer to Figure 6-5) Make the changes you want and click OK

Because a CSS style sheet is a code-oriented document, you work with a style sheet in the Document window only in Code view These types of documents have no Design view If you re comfortable with CSS code, you will feel at home writing style rules by hand However, if you prefer not to stare at a source code file with strange-looking CSS syntax, you can use the CSS Styles panel as a visual interface to the style sheet definition