Collected by
Elizabeth Janson
Home Page

UL - Using List Bullets

 

One of the great things about Cascading Style Sheets is that they allow you to adjust the behavior of HTML tags, giving you more control over your Web page. With a little work, you can customize tags to work the way you want them to. In the past, you pretty much had to live with the way your browser rendered each tag.

For example, take a simple HTML list, like the one shown below. 

<UL TYPE="circle"; style="background: pink;">
<LI>List Item 1
<LI>List Item 2
</UL>

When rendered by your browser, and placed inside a coloured table where cellspacing="0" and cellpadding="0", this simple HTML element has a pink background for the list items, looks like this:

  • List Item 1
  • List Item 2

You can customize the bullets used in your list.
The other two issues, space, takes two pages to settle, the first on space above and below the list, and the second on the marker, or space to the left of the list.

First, there's the "list-style-type" property, which accepts the values "disc", "circle", or "square". Take a look using code for the <HEAD>
<STYLE TYPE="text/css">UL {list-style-type: square}
</STYLE>

  • One tube toothpaste
  • One can catfood
  • One blue cheese
  • One white goat
  • Two dozen bat wings

At the moment I am amused by changing the list-style-types. Consider this segment from my Pioneers home page (with the references disabled to keep this example simple).

  • Our 422 Pioneer families,
  • Tantivy 1853.
  • Gipsy Bride 1855
I found that I had to code the colour for the printing, as well as for the discs - I have used different colours for each one, just as a reminder each disc needs it's own colour attribute, otherwise it inherites the last font colour used.

<ul type="disc">
<li style="color: blue"><font color="#000000">Our 422 Pioneer families,
<li style="color: red"><font color="#000000">Tantivy 1853.
<li style="color: green"><font color="#000000">Gipsy Bride 1855
</UL>

A second way to introduce colour is to place an URL reference in the TYPE instruction placed in the HEAD, or in the STYLE attribute for UL.

<UL STYLE="list-style: url(redball.gif) disc">
<LI>Can I customize the bullets used in my list?
<LI>Can I control the colours of each entry?
</UL>

Two common questions asked by beginning HTML coders are:
  • Can I customize the bullets used in my list?
  • Can I control the colours of each entry?
Let us try again, a different bullet for each entry. 

<UL STYLE="list-style: url(green.gif) disc">
<LI STYLE="list-style: url(../4bits/mauve.gif) disc">
Can I customize the bullets used in my list?
<LI STYLE="list-style: url(orange.gif) disc">
Can I control the colours of each entry?
<LI>This is a treat - a new kid game.
<UL>

This one worked, after I got the correct pathway to the url.
  • Can I customize the bullets used in my list?
  • Can I control the colours of each entry?
  • This is a treat - a new kid game.
With basic HTML, the answer to both questions is "No, you can't."
With style sheets, the answer to both is "Yes, absolutely."

<STYLE
.red {color:red}
.blue {color:blue}
-->
</STYLE>
Now to work on our list again - notice green carries to the next LI square bullet, an example of 'inheritance'. See too, that the font color is specified - avoiding inheritance from the bullet.

<UL TYPE="square">
<LI class=red>One tube toothpaste
<LI class=blue><font color=maroon>One can catfood
<li style="color: coral"><font color=green>One blue cheese
<li><font color=sienna>One white goat
<li style="color: violet"><font color=orange>Two dozen bat wings
</UL>
  • One tube toothpaste
  • One can catfood
  • One blue cheese
  • One white goat
  • Two dozen bat wings

The CSS Standards say

A URL value can be combined with any other value:
UL { list-style: url(http://png.com/redball.gif) disc }
In the example above, the 'disc' will be used when the image can not be located.

The 'list-style' property is a shorthand notation for setting the three properties 'list-style-type', 'list-style-image' and 'list-style-position' at the same place in the style sheet.
'list-style-position', with Value: inside | outside is demonstrated on the page about Markers.

Email
CSS begins here
Back to define lists or on to space around the list.

This page is part of Elizabeth Janson's web site

http://www.oocities.org/elizatk/index.html

My other sites are the Anglican Parish of Northern Mallee,
Tetbury residents in the Eighteenth Century
my Australian Family History and Barrie, our Family Poet.