17 June 2008

Using CSS Selectors in List Formatting

Posted by: abbot in Uncategorized

Authors could find CSS Selectors very helpful in formatting their Lists. With the use of selectors, they could apply properties to the markers shown before the listed items to better organize the information.

Furthermore, web developers cold create their own marker item using animage aside from the regular list styles available. A number of other proposed CSS values could customize the application and indentation of list markers with regards to the line items.
These are the definitions of some of the possible values:
disc: A disc (exact presentation is UA-dependent)
circle: A circle (exact presentation is UA-dependent)
square: A square (exact presentation is UA-dependent)
decimal: Decimal numbers, beginning with 0.
lower-roman: Lower case Roman numerals (i, ii, iii, iv, v, and so on)
upper-roman: Upper case Roman numerals (I, II, III, IV, V, and so on)
lower-alpha: Lower case ascii letters (a, b, c, … z)
upper-alpha: Upper case ascii letters (A, B, C, … Z)
none: No marker
<STYLE>
OL { list-style-type: lower-roman }
</STYLE>
<BODY>
<OL>
<LI> This is the first item.
<LI> This is the second item.
<LI> This is the third item.
</OL>

</BODY>

Using An Image To Bullet Lists
To use an image as a bullet in your items list, take the URL value of the image to define a list-style type if the loading of images was disabled by the end-user. This option only works with IE4.
The following example places the marker before each list item as the image “icon.jpg”.
<style>
UL { list-style-image: url(http://www.server.com/icon.jpg) }
</style>

List-Style Position
CSS2 also features a selector declaration that allows the positioning of the List marker away from the Line Item. The mentioned selector could also have the value compact that would position the Marker as the first character in the Line Item. This is not applicable to IE4 and NS4.
Possible values: inside, outside
<style>
UL { list-style-position:inside }
</style>
Having said all these, we can really say that there is more to CSS than just beautifying your web pages. And frankly, in CSS creativity is simply the limit.

Tags: Using CSS Selectors in List Formatting

Uncategorized,

Subscribe,

(No Ratings Yet)

409 views

This entry was posted on 17 June 2008 at 11:28 AM and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.