HTML CSS Lists

As you may recall, from the earlier HTML lesson on lists , there are 2 types of lists, ordered, or numbered and un-ordered, or bulleted lists. CSS styles both lists in a similar manner. They can take on the same properties as text elements; They use fonts and typefaces, text-decoration etc.

Possible values are;

Lists, both ordered and unordered, can be styled with one statement. list-style: (value, value) ;
Here is an example of a list being declared in one statement. 

	ul.flagList {
	    list-style: circle outside url("flag.jpg");
	{
This creates a class called "flagList" which is positioned outside the content flow and uses a flag image for a bullet. If the image is not available, it will use a circle as a bullet
Using an image as a bullet. Example; 
	
		<style>
			ul.myList {
			    		list-style-image: url("flag.jpg") ;

			}
		</style>
Here I have created a class in the head of my page for bulleted lists "ul.myList"

Then simply insert the class="myList" into the <ul> tag.

                <ul class="myList"><b>My Favorite Presidents</b>
                        <li>George Washington</li>
                        <li>Abraham Lincoln</li>
                        <li>Franklin Roosevelt</li>
                </ul>

Don't forget to use the proper path to your image. I had to resize the flag image to make it small enough to use. Unfortunately, I have been unable to find a method of resizing the images being used for bullets within the code. There is a work-around if you do not want to re-size the actual image. You can create a list with no bullets, then use the HTML < img src="image.jpg" height="" width="" > (Replacing "image.jpg" with your actual image source) tag at the beginning of each list item in place of a bullet. This would enable you to customize the bullet size without changing the actual image.
If you prefer to resize the images, here is a very easy-to-use website: reduceimages.com Also, you may want to re-visit the tutorial on images in HTML

To create a bulleted list with images you can resize in the code:
Here is the code:

    <ul style="list-style-type:none"> <b> My Favorite Presidents</b>
                        <li><img src="flag.jpg" height="22" width="18"> George Washington</li>
                        <li><img src="flag.jpg" height="22" width="18"> Abraham Lincoln</li>
                        <li><img src="flag.jpg" height="22" width="18"> Franklin Roosevelt</li>
    </ul> 

I admit it is not a great solution, but it works.

Here are other examples of list types; 

	ul.circle {
		    list-style-type: circle;
	}
This creates a class called "circle" which looks like this: 

	ul.square {
		    list-style-type: square;
	}
This creates a class called "square" which looks like this: 

	ol.upperRoman {
		    list-style-type: upper-roman ;
	}
This creates an ordered list class called "upperRoman" which looks like this:
  1. Item 1
  2. Item 2
  3. Item 3

	ol.lowerAlpha {
		    list-style-type: lower-alpha ;
	}
This creates an ordered list class called "lowerAlpha" which looks like this:
  1. Item 1
  2. Item 2
  3. Item 3

	ul.coloredList{
			background: yellow ;
	    		padding: 5px;
	    		margin-left: 35px;
			color: red ;
	}
This creates a bulleted list class called "coloredList" which looks like this:
I hope you will join us for the next lesson Lesson 13) Backgrounds

Additional Resources