Home
HTML and CSS
Tutorials
CSS Lists
Level: Beginner Software:
Dreamweaver
Creating lists to show information are sometimes essential, there are many types of lists and many more ways in which you can edit them. Here are some of the types of lists you can create.
Ordered Lists
- Object 1
- Object 2
- Object 3
- Object 4
- Object 5
Unordered Lists
- Object 1
- Object 2
- Object 3
- Object 4
- Object 5
On the unordered list you can see instead of each list object being numbered they have a dot (bullet) at the beginning at each one. So how are these made?
Ordered List Code
|
<ol> <!-- Ordered List ---> <li>Object 1</li> <li>Object 2</li> <li>Object 3</li> <li>Object 4</li> <li>Object 5</li> </ol> |
Unordered List Code
|
<ul> <!-- Unordered List ---> <li>Object 1</li> <li>Object 2</li> <li>Object 3</li> <li>Object 4</li> <li>Object 5</li> </ul> |
Now lets use a bit of CSS to customize our list shall we? What if you don't want bullets at the beginning of each list? Say you want squares. To do this we are going to use internal CSS.
|
<ul id="squares"> <!-- Unordered List With Squares---> <li>Object 1</li> <li>Object 2</li> <li>Object 3</li> <li>Object 4</li> <li>Object 5</li> </ul> |
And your CSS would be:
|
#squares li { list-style-type: square; } |
These together would give you:
Other possible values for list-style-type are as follows:-
- disc
- circle
- square
- decimal
- lower-roman
- upper-roman
- lower-alpha
- upper-alpha
- none
Why not try them out and see which one suits you best. Remember, there are much more you can do to customize these lists, check out my CSS section for more.
More HTML and CSS: Most Popular Materials | Fresh Materials
| More HTML Tutorials at Markuptutorials.com