• Choose a category
• All
• Classic-Fiction

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

My Favorite Peppers

• Green
• Habenero
• Arrivivi Gusano

The list-style-image attribute allows you to attach an image to a list item. To create custom bullets:

1. Begin with a custom image.

Bullet images should be small, so you may have to make something little. I took a little pepper image and resized it to be 25 x 25 pixels. The image will be trimmed to an appropriate width, but it will have all the height of the original image, so make it small.

2. Specify the list-style-image with a url attribute.

You can set the image as the list-style-image, and all the bullets will be replaced with that image.

3. Test the list in your browser.

Be sure everything is working correctly. Check to see that the browser can find the image, that the size is right, and that everything looks like you expect.

Chapter 5: Levels of CSS

In This Chapter

Building element-level styles

Creating external style sheets

Creating a multipage style

Managing cascading styles

Using conditional comments

CSS is a great tool for setting up the visual display of your pages. When you first write CSS code, you’re encouraged to place all your CSS rules in a style element at the top of the page. CSS also allows you to define style rules inside the body of the HTML and in a separate document. In this chapter, you read about these alternative methods of applying style rules, when to use them, and how various style rules interact with each other.

Managing Levels of Style

Styles can be applied to your pages at three levels:

♦ Local styles: Defined by specifying a style within an XHTML element’s attributes.

♦ Page-level styles: Defined in the page’s header area. This is the type of style used in Chapters 1 through 4 of this minibook.

♦ External styles: Defined on a separate document and linked to the page.

Using local styles

A style can be defined directly in the HTML body. Figure 5-1 is an example of this type of code. A local style is also sometimes called an element-level style, because it modifies a particular instance of an element on the page.

Figure 5-1: This page has styles, but they’re defined in a new way.

You can’t see the difference from Figure 5-1, but if you look over the code, you’ll see it’s not like the style code you see in the other chapters in this minibook:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Local Styles

This paragraph has a locally-defined border

font-size: 1.2em;

font-style: italic”>

This paragraph has a series of font and text rules applied.

While you look over this code, a couple things should become evident:

♦ No