HTML & CSS Tutorial: List <li> Effects

First off, what is a list? Here is an example:

Bullet point
Bullet point
Bullet point

Okay, by default the list will NOT have hello kitty icons as the bullet point. xD It will look like a normal bullet point, but I'll get to how to customize that in a bit. Anyway, how did I create the above list? Like this:

Now what if you don't like the automatic indents/margins and you want to add a background color? You can make it like this:

Bullet point
Bullet point
Bullet point

How did I generate that? Like this:

You can use margin-left, margin-right, margin-top, margin-bottom, and background-color to customize your list.

And what if you wanted to make your bullet points an image like I have? Simply add this code inside your <head> section:

Replace IMAGEURL with the URL of the image you want to use, and you're done! You can use any of the above customization attributes in the head section too if you want it to apply in all cases. And if you don't want any images at all, you can use "list-style: none;" instead!

Have fun customizing those lists now!

Tutorials

Design

Quizzes

Interactive

HTML & CSS Tutorial: List <li> Effects

Forum

Site

Site of the Month

Affiliates