Using CSS (cascading style sheets) in your web pages gives you the ability
to have a broader selection of list bullets. For example, the "unordered"
list bullet in standard HTML is a solid circle (disc). With CSS that disc
can also be a circle (open center), solid square, none or an image you
create.
If you are not familiar with the different methods of CSS and how or
when to use them, be sure to read our article, "External,
Internal or Inline? Which Method is Best?". The code below should
be used with external style sheets which is what we recommend in web site
design for the majority of web sites. Choose the type of bullet you want to display: disc, circle, square or none.
Disc list bullets:
ul.disc { list-style-type: disc}
Circle list bullets:
ul.circle {list-style-type: circle}
Square list bullets:
ul.square {list-style-type: square}
No list bullets:
ul.none {list-style-type: none}
Here is how it will look in your HTML source code:
<ul class="disc">
<li>Walk the dog.</li>
<li>Brush the cat.</li>
<li>Wax the car.</li>
</ul>
<ul class="circle">
<li>Mow the grass.</li>
<li>Prepare dinner.</li>
<li>Do the laundry.</li>
</ul>
<ul class="square">
<li>Get groceries.</li>
<li>Change the oil in the car.</li>
<li>Iron the children's clothes.</li>
</ul>
<ul class="none">
<li>Defrag the computer.</li>
<li>Pay the bills.</li>
<li>Visit friends.</li>
</ul>
This is how it will appear on your web page viewing it with a browser:
- Walk the dog.
- Brush the cat.
- Wax the car.
- Mow the grass.
- Prepare dinner.
- Do the laundry.
- Get groceries.
- Change the oil in the car.
- Iron the children's clothes.
- Defrag the computer.
- Pay the bills.
- Visit friends.
Another method is to use a bullet .gif image. In the example below we are using a small gold  bullet we created in a graphics program. Use the following code within your external style sheet.
ul{list-style-image: url(yourbullet.gif)}
The HTML source code looks like this:
<ul>
<li>Walk the dog.</li><br>
<li>Brush the cat.<br>
<li>Wax the car.</li>
</ul>
Click
Here to see how it looks in your browser.
An alternative to using CSS and having a wider variety of list bullets is to use special keyboard characters. Read our related article, "Using
Special Keyboard Characters as List Bullets & Link Separators"
where we discuss how to use combinations of these characters for not only
list bullets but link separators too. Included in the article is 48 examples
which was the result of our brainstorm. BasicTemplates.com members have access to 144 additional bullet images in PSD format. This is only one example of the nice selection of freebie goodies are members have access to in addition to a huge assortment of over 600 quality web site templates stragetically designed utilizing external style sheets.
|