CSS tricks for custom bullets

Today's Best Tech Deals

Picked by Macworld's Editors

Top Deals On Great Products

Picked by Techconnect's Editors

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

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


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;


property tells the browser to look for a file (in this case, watermark.gif) on the Internet, with the file path (
) 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

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
. To tile a graphic horizontally, use
. 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

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

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

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

, 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

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

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

Now, whenever an

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

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

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

, and
. Each indicates a different state of a link. In this example, we’re interested in
, 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

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

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

1 2 3 4 Page 1
Page 1 of 4
Shop Tech Products at Amazon