Book III 1 in Java

Generation QR Code ISO/IEC18004 in Java Book III 1

Looking Good with Cascading Style Sheets (CSS)

To add an inline style to your page, follow these steps:

For example, you may want to style the words On Sale Now!

Rule section of the Targeted Rule menu Essentially, you ll be formatting the style tag attribute in a similar way to how the old <font> tag used to be coded

3 Apply the desired font, size, and color attributes to the selected text,

as well as bold, italics, and alignment settings, if desired When the inline style is applied to an entire paragraph, the style markup is added to the opening <p> tag, like this:

<p style= font-family: Georgia, Times New Roman , Times, serif; font-weight: bold; color: #F63; font-size: 16px; >On Sale Now!</p>

When the inline style is applied to a single word or selection of words inside a paragraph, the style markup surrounds the selected text using the <span> tag, like this:

<p>We have thousands of products <span style= font-family: Georgia, Times New Roman , Times, serif; font-size: 16px; font-weight: bold; color: #F63; >On Sale Now!</span></p>

Use the CSS Styles panel to create and manage your internal and external style sheets If the panel is not visible, open it by choosing Window CSS Styles Though applying styles is typically done through the Properties inspector, we strongly recommend using the CSS Styles panel instead of the Properties inspector for creating and editing all your CSS The Dreamweaver CS4 CSS Styles panel has many enhancements from versions prior to CS3, including multiple panes Resize panes by clicking and dragging the divider line between the panes up or down until they are the size you want Two buttons appear at the top of the panel: All and Current, as shown in Figure 1-3, each of 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 panes: 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

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 About/Rules: 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 information about a selected property (such as Color is defined in an inline style attribute in indexhtml), whereas the right Rules button shows the style name and the tag in the code the selected style is applied to (such as <onsale> <span> or <inline style> <p>) 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-4) displays buttons that are shared by both All and Current views and allow you to select from different viewing and editing options

Looking Good with Cascading Style Sheets (CSS)

The panel s bottom right edge displays four buttons: Attach Style Sheet launches the Attach External Style Sheet dialog box to select an external style sheet to link to or import to the current file, as well as to specify the desired media type(s) the attached CSS should be associated with New CSS Rule opens the New CSS Rule dialog box for naming, choosing a selector type, and specifying the location for the new style rule Edit Rule opens the CSS Rule definition dialog box when a style is selected in the CSS Styles panel