CSS tricks for custom bullets

Cascading Style Sheets (CSS) give Web developers precise control over a page’s typography and layout. One secret weapon of CSS-based designs is the

background

property, which adds images and color to the background of any element on a Web page.

It opens up a creative toolbox for styling links, bulleted lists, and more. Unlike HTML, which automatically tiles background images horizontally and vertically—sometimes resulting in a frightening pattern—CSS gives designers precise control over the placement and tiling of background images. For example, you can choose to have a graphic appear only once, tile vertically, or stay put on screen even when the viewer scrolls through the page.

Some background on background

The

background

property is really four different properties. Here’s the long way to express them:

	body {	background-image: url(images/watermark .gif);	background-repeat: no-repeat;	background-position: center top;	background-color: #FFCC00;	}	

URL The

background-image

property tells the browser to look for a file (in this case, watermark.gif) on the Internet, with the file path (

images/

) to that graphic. This is the only property required in order to place an image in the background.

Note that, unlike HTML, the CSS code doesn’t use quotation marks in its path to the image. Although they’re permissible, Internet Explorer 5 on the Mac can’t find the image if it’s enclosed within quotation marks.

Tiling The

background-repeat

property controls how or whether a graphic tiles. If you want the graphic to appear only once, you use

background-repeat: no-repeat

. To tile a graphic vertically—a great way to add an interesting, graphical sidebar to a page—replace

no-repeat

with

repeat-y

. To tile a graphic horizontally, use

repeat-x

. If you exclude this property, the image will tile vertically and horizontally.

A Bullet to Call Your Own With CSS, you can use images as custom bullets.

Position The

background-position

property lets you define where the graphic appears on the page. This property contains two values separated by a space. The first value controls the horizontal position: left, center, or right. The second value controls the vertical position: top, center, or bottom. CSS also lets you use pixel values to define position. For instance, if you want to place a graphic exactly 20 pixels from the left edge and 100 pixels from the top of the page, you type

background-position: 20px 100px

.

Color The

background-color

property lets you add a color to your page or to another page element such as a paragraph, a sidebar, or a banner.

Taking a Shortcut You’ll frequently use all of these properties together—which could mean a lot of typing. Thankfully, there’s a shortcut that collapses the four properties into a single property. For example, you can rewrite the previous example as:

body {background: #FFCC00 url(images/ watermark.gif) center top no-repeat}

When you use this shortcut, the order of the properties is important. They should always be listed in this order: color, path to graphic, horizontal placement, vertical placement, and tiling options.

Personalize bullets

One interesting way to use the

background

property is to alter the appearance of traditional HTML. Tired of the black circles and squares that set off lists on your Web pages? Why not remove those boring bullets and provide your own graphics (see “A Bullet to Call Your Own”)?

Start by redefining the

ul

, or unordered list, tag, which controls lists. In your CSS document, type:

	ul {	list-style-type: none;	padding-left: 0;	margin-left: 0;	}	

Been There Show your readers where they’ve been by marking visited links with a check mark.

This gives you a clean slate and eliminates any indentations a browser might apply to the list.

Now you’re ready to add your bullets. (If you don’t have any handy, click here for free bullet images.) For this example, I’ll assume that I have an image called mybullet.gif in the same directory as the CSS file.

In HTML, each item in a list is represented by the

li

tag. To change its appearance, add this to the style sheet :

li { background: url(mybullet.gif) left center no-repeat }

Now, whenever an

li

tag pops up, the browser will place the image at the left edge of the list item. To more accurately position the bullet, you can replace

left center

with pixel values.

At this point, the text for each list item will appear directly over the bullet. To insert a little breathing room, simply add padding to the left side of the

li

item. For example, if the graphic is 10 pixels wide, 15 pixels of padding should suffice. If the list items are stacked too close together, increase the top or bottom margins. Your final rule would look like this:

	li {	background: url(mybullet.gif) left center no-repeat;	padding-left: 15px;	margin-bottom: 10px;	}	

Check off list items

HTML lets you change the color of links on a page once the link has been clicked on. CSS, however, lets you do much more. For example, say your Web site has a series of pages covering a particular task—things to do before migrating to Tiger, for example. You want to provide an obvious way to indicate which pages have already been read. Sure, you could change the color of visited links, but to provide an unambiguous visual cue, why not use check marks? With the CSS

background

property, you can (see “Been There”).

This trick relies on using what, in CSS-speak, is called a pseudo-class. There are four pseudo-classes related to links. They are

a:link

,

a:visited

,

a:hover

, and

a:active

. Each indicates a different state of a link. In this example, we’re interested in

a:visited

, since it applies to visited links. Start by beautifying all the links a little—type:

	a {	text-decoration: none;	color: #333;	padding-right: 13px;	}	

This optional step removes the underline from each link (those underlines can clutter a design). defines the color of links, and adds a little padding on the right edge of the link (to accommodate the check-mark graphic).

Next, create a new rule for visited links:

a:visited { background: url(checkmark .gif) right center no-repeat }

In this case, the check marks will be on the right of the links, but you could just as easily add space to the left of links instead, by changing

right

to

left

in this rule.

Get creative

Since you can add background images to any HTML element—a paragraph, a headline, or an item controlled by a

div

tag—it’s easy to create complex pages that have multiple images placed throughout them.

Create file markers

Once you’ve created your own list bullets, you can take the process further by creating different bullets for different list items. For example, if you’re presenting a list of files to download, you might find it useful to create icons that express what type of file each item is—PDF, Word, Excel, and so on.

To set this up, follow the steps for creating personalized bullets. Define the

ul

tag to remove the padding, margin, and bullets. Then add a generic CSS rule for all

li

tags:

	li {	background: url(bullet.gif) left center no-repeat;	padding-left: 20px;	margin-bottom: 10px;	}	

Next, create additional rules that replace the generic bullet graphic with images that are appropriate for each type of list item. For example, to create the PDF bullet, you’d type:

	li.pdf {	background-image: url(pdf.gif);	}	

Repeat this for each type of bullet you want to create.

Now, when you create a new list, reference the appropriate bullet type for each list item. For example, the HTML for a list item that links to a PDF might look like this:

Bullet, Know Thyself These bullets give readers a clue about what type of documents the list items are.

	<ul>	<li class="pdf"><a href="brochure.pdf">Our Brochure</a></li>	</ul>	

Up-to-speed with CSS

If you haven’t yet dipped your feet in the CSS pool, here’s a quick way to get started. Open a Web page in your favorite text editor. Place you cursor before the

</head>

closing tag and type this:

<style type="text/css"></style>

Then add any CSS styles between the opening (

<style>

) and closing (

</style>

) tags.

[ David Sawyer McFarland is the author of Dreamweaver 8: The Missing Manual (O’Reilly, 2005). ]