Tuesday, March 19, 2024

CSS and Lists

Use these to jump around or read it all…


[List-Style-Image]
[List-Style-Position]

[List-Style-Type]
[List-Style]

     Those of you who are list-happy HTML authors know you have the ability to change the bullets and numbers that create those lovely <OL> and <UL> lists. But with HTML alone, you’re pretty locked in once you make a decision to use numbers or to use a certain bullet. Well, not any more. CSS has really allowed Web page designers to be more free with what they have. Below, I have tried to lay out the opportunities provided by the CSS:


  • “list-style-image”
  • “list-style-position”
  • “list-style-type”
  • and the catch-all: “list-style” commands.

     If you’re a list person, these things will make your day.

     I am putting this CSS command in each <OL>, <UL>, or <LI> straightaway using the format:

STYLE=”list-style-image: something
.

     Of course, you can also use this in a Style block at the beginning of the HTML document:

<STYLE>

   UL {list-style: circle inside lower-alpha}

</STYLE>



List-Style-Image

     This command denotes an external image you’d like to use as your list item identifier. Here’s what it looks like (I’ll explain the two attributes right afterward):

<UL STYLE=”list-style-image: url(green_bullet.gif)”>
   <LI> List Item

   <LI> List Item

   <LI STYLE=”list-style-image: none”> List Item

</UL>


…and this is what you get:



  • List Item
  • List Item
  • List Item

     This CSS command has only two attributes. You can either set up the path to the image you want to use through the url (path/image.gif) format or set the style to “none.” Look at the above example again. I’ve set the entire UL list to use an image titled “green_bullet.gif”. However, I don’t want the last list item to carry the image. That one should have the basic round bullet, so I set its list-style-image to “none.” Get it?

     The command is good for <OL>, <UL>, <LI>, <DD>, and <DT> tags.


List-Style-Position

     This command allows you to denote whether the text will fall inside or outside of the bullet when it wraps. First I’ll allow a normal bullet, then one with the “inside” attribute, and then one with the “outside” attribute. It looks like this:

<UL>
   <LI> This is a long list item text in order to show the text wrapping

   <LI STYLE=”list-style-position: inside”> This is a long list item text in order to show the text wrapping

   <LI STYLE=”list-style-position: outside”> This is a long list item text in order to show the text wrapping

</UL>

…and this is what you get:


  • This is a long list item text in order to show the text wrapping
  • This is a long list item text in order to show the text wrapping
  • This is a long list item text in order to show the text wrapping

     The command is good for <OL>, <UL>, <LI>, <DD>, and <DT> tags.


List-Style-Type

     Now we get into the fun of this command. The list-style-type command allows you to set the entire list, or just one element, to a specific type. You’ve done this before in HTML by adding TYPE=”–” to the main <UL> or <OL> tag. Here, you’re offered a little more freedom. Let’s take a look at the Unordered List styles first:

<UL STYLE=”list-style-type: square”>
   <LI> List Item

   <LI> List Item

   <LI> List Item

</UL>


…and this is what you get:


  • List Item
  • List Item
  • List Item

     There are actually three types to choose from: circle, square, and disc. Here are all three:

<UL>
   <LI STYLE=”list-style-type: circle”> List Item

   <LI STYLE=”list-style-type: square”> List Item

   <LI STYLE=”list-style-type: disc”> List Item

</UL>


…and this is what you get:


  • List Item
  • List Item
  • List Item

     But what about those Ordered Lists? Well, you get a few more choices there: decimal, lower-alpha, upper-alpha, lower-roman, and upper-Roman. You can pretty much guess what each looks like, but because I’m a cut-and-paste fool, here’s what it all looks like:

<OL>
   <LI STYLE=”list-style-type: decimal”> List Item

   <LI STYLE=”list-style-type: lower-alpha”> List Item

   <LI STYLE=”list-style-type: upper-alpha”> List Item

   <LI STYLE=”list-style-type: lower-roman”> List Item

   <LI STYLE=”list-style-type: upper-roman”> List Item

</OL>


…and this is what you get:


  1. List Item
  2. List Item
  3. List Item
  4. List Item
  5. List Item

     And just to drive the point home:


  1. decimal: basic 1, 2, 3, counting
  2. lower-alpha: lowercase letters
  3. upper-alpha: uppercase letters
  4. lower-roman: lowercase Roman numerals
  5. upper-roman: uppercase Roman numerals

     The command is good for <OL>, <UL> (changes bullets to numbers/letters), <LI>, <DD>, and <DT> tags.


List-Style

     Tired of writing all those list-item types? Do you want something that does it all for you? Well, search no more. The list-item catch-all command is for you!

     You may not have noticed above, but none of the attributes across all of the list-item-something commands were equal. That means if you use “circle” or “inside” the browser knows you mean a specific list-item type. Thus, you only need this one list-item command.

     Let’s say I want a list with uppercase Roman numerals and wrapping text to sit outside of the Roman number. I could set both a list-style-position and a list-item-type, but why? There’s no need. Use the basic list-style command and the browser will know what you mean from the attribute. Like so:

<OL STYLE=”list-style: upper-roman outside”>
   <LI> List Item

   <LI> List Item

   <LI> List Item

</OL>


…and this is what you get:


  1. List Item
  2. List Item
  3. List Item


That’s That

     As with any CSS command, your browser may not support it just yet. If so, keep the commands in your back pocket and use them anyway. Those browsers that do understand the commands will display them; those that do not will ignore the commands and no one will be the worse for it.


[List-Style-Image]
[List-Style-Position]

[List-Style-Type]
[List-Style]

 
Enjoy!

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured