We are going to see one of the style sheet properties called "List Property". List property in CSS is consist of three different list properties. So, guys, let's see all list properties in detail with their example.CSS allows us to customize the lists that can be made with HTML.
The types of list property in CSS is as follows:
- List-style-type
- List-style-image
- List-style-position
The types of list property in CSS is as follows:
- List-style-type
- List-style-image
- List-style-position
List-style-type :
The list-style-type property allows you to control the shape or the style of the bullet point in the case of an unordered list and the style of numbering characters in the ordered list. The value of this property for the unordered list is:|
VALUE
|
MARKER
|
|
None
|
None
|
|
Disc(default)
|
A filled-in circle
|
|
Circle
|
An empty circle
|
|
Square
|
A filled-in square
|
The values to this property of ordered list are:
|
VALUE
|
MEANING
|
EXAMPLE
|
|
Decimal
|
Number
|
1,2,3,4,5,…
|
|
Decimal-leading-zero
|
0 before the number
|
01,02,03,04,05,……….
|
|
Lower-alpha
|
Lowercase alphanumeric character
|
a,b,c,d,e,….
|
|
Upper-alpha
|
Uppercase alphanumeric character
|
A,B,C,D,E,………
|
|
Lower-roman
|
Lowercase roman numerals
|
I,ii,iii,iv,v,……
|
|
Upper-roman
|
Uppercase roman numerals
|
I,II,III,IV,V,….
|
The list-style-type property can either be used on the <ul> and <ol> elements in which case it applies to the entire list or on the individual <li> element.
Example:
<html>
<head>
<title>css list-style-type example</title>
<style type="text/css">
li.one{list-style-type:disc}
li.two{list-style-type:square}
li.three{list-style-type:circle}
</style>
</head>
<body>
<h3>type of list style sheet property</h3>
<ul>
<li class="one">list-style-type</li>
<li class="two">list-style-image</li>
<li class="three">list-style-position</li>
</ul>
</body>
</html>
li{list-style-image:url("URL of image goes here");}
Example:
Example:
<html>
<head>
<title>css list-style-type example</title>
<style type="text/css">
li.one{list-style-type:disc}
li.two{list-style-type:square}
li.three{list-style-type:circle}
</style>
</head>
<body>
<h3>type of list style sheet property</h3>
<ul>
<li class="one">list-style-type</li>
<li class="two">list-style-image</li>
<li class="three">list-style-position</li>
</ul>
</body>
</html>
List-style-image:
The list-style-image property allows us to specify an image so that we can use our own bullet style. For this property, we must supply the URL of the marker image as value. The general format is:li{list-style-image:url("URL of image goes here");}
Example:
<html>
<head>
<title>list style image example</title>
<style type="text/css">
li.image{list-style-image:url(MSN.ico);font-size:25pt;}
</style>
</head>
<body>
<h2>Type of list style sheet property</h2>
<ul>
<li class="image">list-style-type</li>
<li class="image">list-style-image</li>
<li class="image">list-style-position</li>
</ul>
</body>
</html>
<head>
<title>list style image example</title>
<style type="text/css">
li.image{list-style-image:url(MSN.ico);font-size:25pt;}
</style>
</head>
<body>
<h2>Type of list style sheet property</h2>
<ul>
<li class="image">list-style-type</li>
<li class="image">list-style-image</li>
<li class="image">list-style-position</li>
</ul>
</body>
</html>
ALSO READ: Adding styles to HTML document
List-style-position:
The list-style-position property indicates whether the marker should appear inside or outside of the box containing the main points. There are two values for this property. They are two values for this property. They are:|
VALUE
|
PURPOSE
|
|
Inside
|
The marker is inside the block of text(which is indented:
|
|
Outside
|
The marker set to the left of the block of text( this is the default
value if this is not specified)
|
Example:
ul{list-style-position:outside;}
ol{list-style-position:inside;}
ul{list-style-position:outside;}
ol{list-style-position:inside;}
No comments:
Post a Comment