CSS Styling List Tutorial
This tutorial will show you how to create custom made bullets or remove the bullet all together. You can use this tutorial with the following CSS selectors:
ul { }
ol { }
The following are a list of new CSS properties that can be used with the list selectors:
list-style-type: none; |
Removes the bullet completely. |
list-style-image: url(IMAGEURL); |
Replaces the bullet with an image. Replace IMAGEURL with an image URL that is only 10px by 10px or smaller. |
margin-left: 1em; padding: 0; |
This gets rid of the large margin in you bullet list. |
Here's an example of how the CSS for a image styled bullet list would appear:
ul {
list-style-image: url(IMAGEURL);
}
list-style-image: url(IMAGEURL);
}
CSS Bullet list Classes
You can also apply classes to your CSS bullet list. Here's how your CSS would look in your style sheet:
ul.sidebar { }
Only ul with the class sidebar will have the effect you applied to it in your style sheet. The HTML to call the ul sidebar class would look like this:
<ul class="sidebar">
<li>TEXT HERE</li>
<li>TEXT HERE</li>
<li>TEXT HERE</li>
</ul>
<li>TEXT HERE</li>
<li>TEXT HERE</li>
<li>TEXT HERE</li>
</ul>
This may also apply to the <ol> tag as well.