|
This article will show you how you can change the style of individual lists, all lists on your page, and all lists on your entire web site by changing just a few things on your style sheet.
By changing one word in your global style sheet, for example, you can change all your web site's ordered lists style type from lower-case roman numeral to upper-case alphabet.
If you're unfamiliar with CSS, please read the "Cascading Style Sheets (CSS); Getting Started" and "...Learning More" articles, both linked from the archives index page at
http://www.willmaster.com/library/.
Some CSS styles render differently according to the browser. When you use CSS, test your pages with the major browsers to become familiar with what most of your users will see.
To work with this article, use a web page like this:
<html>
<head>
<style type="text/css">
<!--
OL {
list-style-type: decimal;
list-style-position: outside;
}
-->
</style>
</head>
<body>
<ol>
<li>One,<br>two,<br>or three.</li>
<li>Four,<br>five,<br>or six.</li>
<li>Seven,<br>eight,<br>or nine.</li>
</ol>
</body>
</html>
The breaks within the list item lines demonstrate how line wraps will appear, without having to use long lines to see the effect.
Notice the two style properties for the ordered list tag OL. Later, we'll introduce a third, one to use an image as item bullets.
The example could also be a UL tag; both OL and UL can be styled the same ways.
list-style-type: square;
The first property is "list-style-type". The example specifies "decimal," but other values are available. Here is a list:
~~ decimal
Causes the list to be numbered with decimal numbers; 1., 2., 3., etc. This is most browser's default for ordered lists.
~~ lower-roman
Causes the list to be numbered with lower-case roman numerals; i., ii., iii., etc.
~~ upper-roman
Causes the list to be numbered with upper-case roman numerals; I., II., III., etc.
~~ lower-alpha
Causes the list to be labeled with lower-case alphabet characters; a., b., c., etc.
~~ upper-alpha
Causes the list to be labeled with upper-case alphabet characters; A., B., C., etc.
~~ disc (not "disk")
Causes the list to be bulleted with a disc character, a filled circle. This is most browser's default for unordered lists in the first level.
~~ circle
Causes the list to be bulleted with a circle character, an outlined circle.
~~ square
Causes the list to be bulleted with a square character, whether outlined or filled depends on the browser. This is most browser's default for unordered lists in second and subsequent levels.
~~ none
Causes the list to have no label or bullet. The effect is like a left paragraph indent.
Some of the above can be specified without the use of CSS, as an attribute in the UL or OL tag. The UL tag can have a style="disc" attribute, for example, and the OL tag can have a style="i" attribute for lower-case roman numerals. The advantage of using CSS is that all lists on a page or on an entire web site can be changed by changing only one style sheet. And, with CSS, an ordered list can be made to use bullets and an unordered list can be made to sport labels.
list-style-position: outside;
The second property in the example, "list-style-position", has an "outside" value. "outside" is the default. One other value is available, "inside".
"outside" causes the hanging indent you see with most lists on web pages. The label or bullet extends left of the content block and, if the lines wrap, second and subsequent lines hang to the right and below the label or bullet.
A value of "inside" causes the label or bullet to shift toward the right and to be the first character of the first line of the content block. The content block is still indented left, like it would be with "outside".
list-style-image: url(image.jpg);
The "list-style-image" property is not in the example above, because it replaces the "list-style-type" property. To try it, replace:
list-style-type: decimal;
with:
list-style-image: url(image.jpg);
Replace the image URL between the parenthesis with your own. The URL can be a relative URL or an absolute http://... URL. If you have reason to believe the location of the image file will change relative to your page, or if your page is used as a template by a CGI script, an absolute http://... URL is preferred. With relative URLs, if the relativity changes, then the URL link is broken.
The "list-style-image" property lets you use your own image as the bullet of a list.
Of the browsers I've tested (Windows platform only), all align the bottom of the image where the bottom of the bullet character would have been. The image extends upward from there.
One browser I tested (IE 5), displayed the entire image when the image was wider than the space the bullet character would have used. The beginning of the text on the first line is shifted toward the right to accommodate the image.
Opera 6 and Netscape 6.2 and 7.0, displayed only the left portion of the image when the image was wider than the space the bullet character would have used.
Opera 5 and Netscape 4.7 don't recognize the "list-style-image" property, instead reverting to the list's default label or bullet.
Because the differences in handling of images as bullets, I recommend that the images be no wider than the space the bullet character would have used.
Those are some of the things you can do with list labels and bullets. For methods of implementing color and images as backgrounds for your lists, see the two "Cascading Style Sheets (CSS); Backgrounds..." articles linked from
http://www.willmaster.com/library/.
About the Author:
Will Bontrager produces the "WillMaster
Possibilities" ezine.
More Interesting Articles
|