One of the benefits of CSS is the ability to customise almost every single tag you can see. If you want bold text to be pink and 4 sizes bigger instead of simply bold: you can do it. If you want images next to all of your text links: you can do it. This tutorial explains how to customise one of the many HTML tags ? the unordered list.
We start the same way as we would with any CSS: with a stylesheet. If you have no idea how to create an external stylesheet, you'll want to start with my Creating an External Stylesheet Tutorial. If you already have a stylesheet, you can add the coding from this tutorial to the bottom of it, and we can move on...
First, we define the selector we wish customise, like so:
ul {
}
Now, you need to decide how you want to customise it; we'll start with bullet points. You can either use a "premade" list item bullet point, or use an image of your choice.
According to w3schools, these are the following values you can use to define your list (be warned: some of these don't work in all browsers):
* none
* disc
* circle
* square
* decimal
* decimal-leading-zero
* lower-roman
* upper-roman
* lower-alpha
* upper-alpha
* lower-greek
All of these values will give you a different type of bullet point (except none, which gives you.. well, none). These can be applied to your unordered list tag using the list-style-type property. For example:
ul {
list-style-type: lower-roman;
}
Now, what if you want an image, you ask? Easy peasy. Instead of list-style-type, we use list-style-image and the url to the image, like so:
ul {
list-style-image: url(images/mybullet.gif);
}
..where "images/mybullet.gif" is the location to the image you want to use. Don't make it too big though ? you won't want to cause overlapping of the bullets!
Remember: because we've customised the <ul> tag directly, every occurrence of an unordered list will have the new customisations associated with it. This can be a hassle sometimes therefore to combat this we can simply give the unordered lists we do want to customise an id, like so: <ul id="custombullet"> and change the CSS to suit:
ul#custombullet {
list-style-image: url(images/mybullet.gif);
}
Something else you should know about lists (both ordered and unordered) is that different browsers handle the way they're 'spaced', differently. Some browsers use margin to indent them and some padding. Simply fixed by first assigning a negative margin and padding, and then giving it the new left margin (thus making it equal in all browsers):
ul#custombullet {
list-style-image: url(images/mybullet.gif);
margin: 0; padding: 0;
margin-left: 35px;
}
Oh, and don't forget: other properties (like color and font-size) can be added too!
