5: Cascading Style Sheets in Java

Creator QR Code JIS X 0510 in Java 5: Cascading Style Sheets

1 Choose Text CSS Styles New The New CSS Rule dialog box appears 2 Choose a selector from the Selector Type drop-down list The four options Class, ID, Tag, and Compound are described in detail in the Understanding style selectors section, earlier in this chapter 3 Type a name into the Selector Name field or select an option from the Selector Name drop-down list 4 Choose New Style Sheet File from the Rule Definition drop-down list This is the crucial step in creating a new external style sheet as you create the new style 5 Click OK The Save Style Sheet File As dialog box opens 6 Select a location in which to save the style sheet file Note that you should save the style sheet in the root folder of your Web site You can save your CSS files in a subfolder, but remember that you must upload the CSS file to your Web server when you publish the site for the styles to work (For more information on the root folder and how to define a site in Dreamweaver, see 2) 7 Enter a name for the style sheet in the File Name field You can name your style sheets anything you like; just don t use any spaces or special characters (hyphens and underscores are okay) Dreamweaver automatically adds the css; just make sure you don t delete it 8 Click Save The CSS Rule Definition dialog box opens 9 Define the new style rule specifying all formatting options you want applied with the new style You find detailed descriptions of these options in the Comparing CSS Rule Options section earlier in this chapter 10 Click OK to save the new style, close the dialog box, and create the new external style sheet simultaneously Your new style is automatically saved in the new external style sheet and listed in the CSS Styles panel

You must attach this external style sheet to every page where you want to use the styles that are saved in it See the next section for step-by-step instructions

After you create an external style sheet, you ll likely want to attach it to additional Web pages Begin by opening the page to which you want to attach the style sheet and then follow these steps: 1 Choose Window CSS Styles The CSS panel appears 2 Click the Attach Style Sheet icon in the CSS panel (the first button in the lower-right area) The Attach External Style Sheet dialog box appears (as shown in Figure 5-27) 3 Click the Browse button and locate the CSS file in your site folder You can also enter a URL if you want to use a remote CSS file located on another Web site, but it s most common to use a style sheet contained within the Web site you re working on Either way, Dreamweaver automatically sets the link to the style sheet for you, includes the style sheet link code at the top of the HTML file, and lists all the styles in the external style sheet in the CSS panel 4 Select the Link or Import option If you re attaching a style sheet to an HTML file, your best choice is almost always to choose Link, which is the default option Choose Import if you want to create one master external style sheet that contains references to other style sheets, an advanced option that enables one style sheet to refer to another 5 In the Media drop-down list, choose an option With the Media drop-down list, you can specify the intended use for the style sheet For example, if you ve created a style sheet that formats your page for printing, choose the Print option You can leave this option blank if you re attaching a style sheet to control the way the page will appear in a browser