tag. Choose Format>CSS Styles>New to create a new CSS rule. Under Selector Type, choose Tag and then select li from the drop-down list to the right of the Selector Name field (or type li into the field). Press OK to continue to the CSS Rule Definition dialog.
3 [CHANGE THE BULLET STYLE]
In the CSS Rule Definition dialog, choose the List Category on the left. Here you can change the style of the bullet by selecting any of the options in the List-Style-Type drop-down menu. If you prefer, you can replace the bullet with your own image by clicking on the Browse button next to the List-Style-Image field and selecting the image you want to use in place of the bullets. You can also remove the bullet completely by choosing None (as we did in this example). Click OK.
4 [STYLE LINKS IN AN UNORDERED LIST]
You can alter the way links display in an unordered list in much the same way you’d alter any other links on the page, and you can use compound styles (by choosing Compound for the Selector Type in the New CSS Rule dialog) to create link styles that only affect links within an unordered list. For instance, you can create a style named ul a, which will only affect the link tag when it appears within the unordered list tag. So you could remove the underline from all links that appear within unordered lists by choosing the Type category in the CSS Rule Definition dialog, and under Text-Decoration, click on the None checkbox.
5 [ADD SPACE BETWEEN BULLETED ITEMS]
The default HTML style for unordered lists places list items too close together for most designers, but it’s easy to add a little breathing room. Just create a new style for the li tag (as you did in Step 2), or edit your existing li style by double-clicking on the style name in the CSS Styles panel. In the CSS Rule Definition dialog, choose the Box Category and use the Margin and Padding settings to increase the space around the list items. In our example, we added 10 pixels of space to the Bottom of each list item.
6 [USE COLOR AND PADDING FOR BUTTONS]
You can create colored boxes around your links by defining a CSS rule for the active link, or a:link tag, that combines a Background-Color (such as the light blue shown here) with a Width (ours is set to 100 px) and Padding (5 pixels Top and Bottom and 10 pixels on the Left) in the Box Category. And here’s the trick that makes it work: In the Block Category, you need to set the Display option to Block. In this case, we used a compound style ul a:link so that links will only display this way if they’re contained within an unordered list.
7 [DEFINE DIFFERENT LINK STYLES]
A great way to create a rollover effect is to create a second link style for the hover link state, a:hover. And here’s another trick: Duplicate the a:link style you created in Step 6 by Right-clicking (PC: Option-clicking) on the style name, then choose Duplicate, and name the new style ul a:hover. You want all of the elements of the style to be the same (same Padding, Width, etc.) except, in this case, for the background color (see next step). Starting with a copy of the a:link style means all you need to change are the formatting options you want for the hover style.
8 [DEFINE THE A:HOVER STYLE]
This time, we changed the Background-Color in the a:hover style to yellow so that when a visitor to the site rolls their cursor over a link, the only effect will be that the background color changes from light blue to yellow. For more complex rollover effects, use different background images in the Active link and Hover link styles. You can also change the font color, font face, and other formatting options to alter the text style.
9 [PREVIEW TO TEST ROLLOVER EFFECTS]
In order to test any styles you create that are triggered by a rollover, you’ll need to preview the page in a Web browser (File>Preview in Browser). As you can see here, when a cursor rolls over the light blue links, they turn yellow, because that’s the background color we defined in the a:hover style.
10 [REMOVE INDENTING BY STYLING UL TAG]
You can increase, decrease, or remove the amount of indenting by defining a style rule for the ul tag. Remember, the HTML for an unordered list includes the
tag, which surrounds the entire list, and the