CSS Lists

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.  Now change the <ul> to <ol> and </ul> to </ol>, save it and refresh your browser. This time you should see an ordered list with numbers instead of bullets. Now change the list back to bullets <ul> and </ul>. We are about to dress up our bullets with CSS.

4. Create a new class named .list inside of lists.html. In this particular case, we are going to create styles inside of the html document instead of using an external css file. Add <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">
<li>do</li> 
<li>re</li> 
<li>me</li> 
</ul>

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!

 

9. You know the drill. Link it to your home page, and you're g2g.

Print Friendly, PDF & Email