6: Creating CSS Layouts in Java

Printing QR Code JIS X 0510 in Java 6: Creating CSS Layouts

f Click OK to save the style and close the dialog box The spacing around the list of links formatted as an Unordered List disappears 13 Create a new compound style to redefine the list item tag by following these steps: a Choose Format CSS Styles New b Under Selector Type, choose Compound c In the Selector Name field, enter #navbar ul li (make sure to include spaces between each name) and then click OK d In the CSS Rule Definition dialog box, select the Block category and set Display to Inline This changes the style of the <li> tag from vertical to horizontal e Select the List category and set Type to None to remove the bullet f Select the Box category and set margins left and right to 40 pixels This separates the list items from one another in the horizontal list You can change the setting to any measurement to create the amount of space between links that best fits your design g Click OK to save these settings and close the dialog box 14 Create a new style to redefine the link tag by following these steps: a Choose Format CSS Styles New b Under Selector Type, choose Compound

c In the Tag field, enter #navbar a:link and then click OK d In the CSS Rule Definition dialog box, select the Type category and set Decoration to None by clicking the check box This removes the underline from linked text e Still in the Type category, change the text color to the color you want your links to appear when they re first loaded on a page I set the text color to a dark blue f Click OK to save these settings and close the dialog box 15 Create a new style to redefine the hover link tag so that the link color will change when a user rolls a cursor over the link: a Choose Format CSS Styles New b Under Selector Type, choose Compound c In the Tag field, enter #navbar a:hover and then click OK d In the CSS Rule Definition dialog box, select the Type category and set Decoration to None by clicking the check box This removes the underline from linked text If you prefer to have the underline appear when a user rolls a cursor over a link, check Underline e Still in the Type category, change the text color to the color you want your links to appear when users roll their cursors over the link I set the text color to a bright red color The more dramatic the color difference between the a:link and a:hover colors, the more dramatic the rollover effect f Click OK to save these settings and close the dialog box 16 Create a new style to redefine the visited link tag so that the link color will change after a user clicks a link: a Choose Format CSS Styles New b Under Selector Type, choose Compound c In the Tag field, enter #navbar a:visited and then click OK d In the CSS Rule Definition dialog box, choose the Type category and set Decoration to None by clicking the check box e Still in the Type category, change the text color to the color you want your links to appear after the link has been visited I set the text color to a light gray color If you want the color to remain the same, set the a:visited link to the same color as the a:link f Click OK to save these settings and close the dialog box

When you redefine tags, such as the unordered list and link tags, the new style applies to all uses of that tag within a page unless you define the tags as compound styles by including the name of their container as part of the style name For example, in the exercise in the Styling an Unordered List for Links section, instead of creating a new tag style with just the name of the <ul> tag, I created a new tag style called #navbar ul to redefine the <ul> tag only when it s contained within a <div> tag with an ID of navbar When you create advanced styles like this, use the name of the container followed by the tag name separated by a single space In this example, I also created styles for the <li> and <link> tags in the same way, creating styles with names like #navbar a:link, #navbar a:hover, and #navbar ul li You can create compound styles with multiple tags or styles to create more specific CSS rules, but you must include a space between each tag or style name

17 Click the Live View button at the top of the workspace or click the Preview button to view the page in a browser to see the effect of the link styles