| |
| Overview |
| |
In this chapter you will learn:
- The importance of lists
- Different style options for lists
- Different types of lists
- Adding images to the lists
- Setting position for a list
|
| |
| |
| |
CSS allows you to customize your web pages using lists. Lists are a basic way of organizing data in a linear way, one item after another. They format the data in an easy-to-use method. |
| |
| List-Style |
| |
| List-style property allows you to specify the list-style-type, list-style-position and list-style-image properties. These properties can also be used independently. Their use is explained below. |
| |
| |
| List-Style-Type |
| |
This property specifies the style of list-item maker (or bullet point) associated with a list item.
- There are two types of lists: Unordered list and Ordered list.
- Unordered list contains the values: square, circle, disc, none.
none -This means there will be no list marker.
disc -This will look as a filled circle.
circle - This will look as an empty circle.
square - This will look like a solid square.
- Ordered list contains the values: decimal, upper-roman, lower-roman, lower-alpha, upper-alpha etc.
decimal - The marker is a number, for example, 1,2,3,4 etc.
lower-roman - The marker is in lower roman, for example, i, ii, iii, iv etc.
upper-roman - The marker is in upper roman, for example, I, II, III, IV etc.
lower-alpha - The marker is lower case ASCII letter, for example, a, b, c, d etc.
upper-alpha - The marker is upper case ASCII letter, for example, A, B, C, D etc.
- By default, a list-item-type has value disc.
|
| |
| Example for Un-Ordered List |
ul { list-style-type :circle;}
- strawberry
- vanilla
- chocolate
- butterscotch
|
| |
| Example for Ordered List |
ol { list-style-type : lower-roman;}
- strawberry
- vanilla
- chocolate
- butterscotch
|
| |
| List-Style-Image |
| |
CSS also lets you specify an image by URL in place of the normal bullets.
- This property lets you use a custom graphic for bullets.
- List-style-image has values: none, url(<url>)
none - This value displays no image.
url - This specifies the path to the image.
- If list-style-image is none, then list-style-type marker would be used.
- If image loading is turned off, list-style-type marker would be used.
|
| |
| Example |
| ul { list-style-image : url ( 'Redo.gif ');}
 water-melon
mango
apple
grapes |
| |
|
