1. Now let’s focus on a new aspect of CSS styles: lists. By default, html provides you with two types of lists: Ordered lists that are numbered and un-ordered lists with round bullet points. Fortunately, CSS provides methods to vastly expand on these two basic list types. To begin our exploration, create a new html file and save it inside of the stylesheet_example folder as lists.html.
2. Now we will create a simple unordered list of three items between your document’s body tags as shown here:
<html> <head> <title>Lists</title> </head> <body> <ul> <li>do</li> <li>re</li> <li>me</li> </ul> </body> </html>
3. Preview list.html in your browser and you should see standard bullets. Let’s change that.
4. Create a new class named .list inside of lists.html (ie. inside of <style> </style> tags below the <title> tags and set it’s first property to list-style: square; as in:
<style> .list { list-style: square;} </style>
5. Apply the the list class to the <ul> tag that initiates the list as in:
<ul class="list">
Preview lists.html again. You should see the original round bullets change to squares.
6. Edit the .list style and experiment with the other type settings such as circle or disc, lower-greek, lower-roman, katakana, etc. For example
list-style: katakana;
should look like this:
- do
- re
- me
For a full list of list options visit http://www.w3schools.com/cssref/pr_list-style-type.asp.
7. Lists can also be populated with images. To see how images work in a list, replace your current list-style with list-style-image and browse to eye.gif inside of the pix folder as in:
.list {list-style-image:url(pix/eye.gif);
This one should look pretty creepy!
8. Return to Photoshop and create your very own bullet (take a picture of your self with Photo Booth and the iSight if you want). Save your new bullet inside of the pix folder and try it out by using it as the image for the .list style. It’s a bullet so the image shouldn’t be more than a few pixels wide or tall.
9. You know the drill. Link it to your home page, and you’re g2g.