Working with the CSS Styles Panel in Java

Creation Denso QR Bar Code in Java Working with the CSS Styles Panel

Use the CSS Styles panel to create internal and external styles If it s not visible, open the panel by choosing Window CSS We recommend using the CSS Styles panel instead of the Properties inspector for creating and editing all your CSS

The Dreamweaver 8 CSS Styles panel has many enhancements from previous versions, including multiple panes Resize panes by clicking and dragging a pane up or down until it s the size you want Two buttons appear at the top of the panel: All and Current, as shown in Figure 1-2, which display different views of the CSS Styles panel The following sections discuss these views in detail

Click the All button and the CSS Styles panel splits into two parts: All Rules: The top pane displays a list of all the styles attached to, or contained inside of, the currently selected open document Properties: Select a style in the top pane, and the bottom pane displays its specific attributes You can quickly make a change to an existing property or add more properties by clicking the Add Property link

Looking Good with Cascading Style Sheets (CSS)

Click the Current button and the CSS Styles panel divides into three panes: Summary for Selection: The top pane shows an attributes summary of the currently selected style Properties display in order of specificity Class styles have higher specificity than tag selectors Rules: The second pane displays the style name and the tag in the code the selected style is applied to, such as the <p> tag You can toggle this area to display data in two views by clicking the buttons on the top-right edge of the section s title bar The left About button displays location

and name information about a selected property while the right Rules button shows cascading style rules for the selected tag Properties: The bottom pane displays the attributes of the selected style in an editable format Make a change to a property or add more properties by clicking the Add Property link

The bottom edge of the CSS Styles panel (as shown in Figure 1-3) displays buttons that are shared by both All and Current views and allow you to select from different viewing and editing options

Attach Style Sheet Figure 1-3: These Show List View Edit Style Sheet buttons display viewing and editing Delete CSS Rule Show options Category New CSS Rule View Show Only Set Properties

The panel s bottom right edge displays four buttons: Attach Style Sheet launches the Link External Style Sheet dialog box to select an external style sheet to link to or import to the current file New CSS Rule opens the New CSS Rule dialog box for naming, choosing a selector type, and specifying the location for the new style Edit Style Sheet opens the CSS Rule definition dialog box when a style is selected in the CSS Styles panel Delete CSS Rule permanently removes a selected rule from the CSS Styles panel, as well as any formatting from elements to which it was applied It doesn t, however, delete references to that style The panel s bottom left edge displays three buttons that change the listing view for the properties: Show Category View splits CSS properties into nine categories: Font, Background, Block, Border, Box, List, Positioning, Extensions, and Tables, Content, Quotes Each category s properties are displayed in expandable list format You can expand and collapse the list by clicking the plus (+) or minus ( ) button next to the category name Properties in

each category are listed alphabetically with set properties sorted on top in blue text Show List View shows CSS properties in descending alphabetical order with set properties in blue text at the top of the list Show Only Set Properties shows only set properties This is the default view In all the CSS Styles panel views, any set properties display in blue text while irrelevant properties display with a red strikethrough line In addition, irrelevant rules contain explanatory pop-up messages that you can see when you hover your mouse over the rule