You can create mainly two types of List through HTML. First, Unordered List which is also called Bullet List. And another Ordered List is also called Number List. CSS List Properties have been created to customize HTML List. By List Properties of CSS, you can customize List Style, Position, Color, etc. according to you. Various CSS List Properties Many properties are provided to customize the HTML list as per the need. Whose names are being given below? list-style-type list-style-position list-style-image list-style list-style-type property The style of the Bullets and Numbers of the list is defined by the list-style-type property. It is also called List Style Marker. Depends on the type of Style List Type of Marker. There can be four possible values of an unordered list. None – Marker is removed from this value. Disc – This value is the default value of the Unordered List. It is a filled circle. Like a CD or DVD. Circle – You can compare this Style Marker with the circle. Its textur
You can create mainly two types of List through HTML. First, Unordered List which is also called Bullet List. And another Ordered List is also called Number List.
CSS List Properties have been created to customize HTML List. By List Properties of CSS, you can customize List Style, Position, Color, etc. according to you.
Various CSS List Properties
Many properties are provided to customize the HTML list as per the need. Whose names are being given below?
- list-style-type
- list-style-position
- list-style-image
- list-style
list-style-type property
The style of the Bullets and Numbers of the list is defined by the list-style-type property. It is also called List Style Marker. Depends on the type of Style List Type of Marker.
There can be four possible values of an unordered list.
- None – Marker is removed from this value.
- Disc – This value is the default value of the Unordered List. It is a filled circle. Like a CD or DVD.
- Circle – You can compare this Style Marker with the circle. Its texture looks like this.
- Square – This gives a filled square as a List Marker.
Similarly, there are many values in the order list as well. Below we are telling you only about the most used values.
- none – This removes all the markers.
- Decimal – In this value Order List Numbers i.e. 1, 2, 3, 4 are shown. This is the default in the Marker Style Order List.
- decimal-leading-zero – This value is clear from the name itself. In this Marker Style, 0 shows before the number. Like 01, 02, 03 etc.
- lower-alpha – In this value, the Marker Style shows the Lower Alphabets Characters. For example, a, b, c, d, etc.
- upper-alpha – Capital alphabets are shown in this value. For example, A, B, C, D, etc.
- lower-roman – Style Marker Shows in Roman Number in this value. Which are displayed in smaller i.e. lower size. For example, i, ii, ii, iv, etc.
- upper-roman – This value has Roman Number Capital Display. Like, I, II, III, IV, etc.
Try it
<!DOCTYPE html>
<html>
<head>
<title>CSS List Type Examples</title><style type=”text/css”>
ul {
list-style-type: circle;
}
ol {
list-style-type: upper-alpha;
}</style>
<body>
<ul>
<li>Computer<li>
<li>Tablet<li>
<li>Mobile<li>
</ul>
<ol>
<li>Mango<li>
<li>Banana<li>
<li>Grapes<li>
</ol>
</body></html>
The above code will give a result like this.
list-style-position property
By this property, you set the position of List Markers. It has two possible values.
- outside – If the position of the marker is outside set, then there is a lot of distance between the list content and the marker. And the second line of text also starts from below the first line.
- Inside – By setting the position of the marker inside, the marker becomes indented in the first line and the second line starts from the bottom of the marker. Learn the best html css course in Delhi from the best training institute...
Try it
<!DOCTYPE html>
<html>
<head>
<title>CSS List Style Position Examples</title><style type=”text/css”>
ul {
list-style-position: outside;
}
ol {
list-style-position: inside;
}</style>
<body>
<ul>
<li>This is a list of Internet Deices. First is computer, second is tablet and last one is mobile. This is a list of Internet Deices. First is computer, second is tablet and last one is mobile.</li>
<li>Computer<li>
<li>Tablet<li>
<li>Mobile<li>
</ul>
<ol>
<li>This is a list of fruits. First is manog, second is banana and last one is grapes. This is a list of fruits. First is manog, second is banana and last one is grapes.</li>
<li>Mango<li>
<li>Banana<li>
<li>Grapes<li>
</ol>
</body></html>
The above code will give a result like this.
list-style-image
By this property, you can use any image for List Marker. Which can make your List Content very attractive. Syntax of using Image as List Marker is exactly the same as Background Image Property.
Next-G Education is the best web development institute Delhi, which provides advanced courses...
Try it
<!DOCTYPE html>
<html>
<head>
<title>CSS List Style Image Examples</title><style type=”text/css”>
ul {
list-style-image: url(‘greenarrow.png’);
}</style>
<body>
<ul>
<li>Computer<li>
<li>Tablet<li>
<li>Mobile<li>
</ul>
</body></html>
The above code will give a result like this.
If the browser does not get the image, then it shows the default marker according to the list type.
Note – While using Image as Style Marker, keep in mind the Image Size which should be according to the Marker Style.
list-style property
All List Styles can be declared simultaneously by this property. It is called Shorthand Property.
When using list-style property, list properties have to be declared in proper order. If you do not declare anyone property, then the subsequent property is declared.
In the Shorthand Style Rule, the order of List Properties remains as follows.
list-style-type → list-style-position → list-style-image
Try it
ul {
list-style: inside circel;
}
Other List Properties
So far you have learned about List Properties Provided by CSS. You can also use some other CSS properties for HTML List. You can also use CSS Color, Background, Margin & Padding Properties, etc.
What have you learned?
In this tutorial, we have given you information about CSS List Property. You have learned about different types of List Properties through examples. We hope that this tutorial will prove useful for you.
Also Read:
- https://best-c-programming-course.blogspot.com/2021/11/what-is-programming.html
- https://nextgeducation.wixsite.com/webdesigninstitute/post/how-to-do-seo-and-how-does-it-work
- https://nextgeducation.weebly.com/blog/what-is-php-and-features-of-php
- https://ko-fi.com/post/What-is-Algorithm-F1F576QAJ
- https://nextgeducationblogs.wordpress.com/2021/11/12/earn-money-from-digital-marketing-and-seo/
- https://next-g-education.blogspot.com/2021/11/how-to-earn-money-from-online-teaching.html
- https://nextgeducation.my-free.website/blog/post/1458670/how-to-make-money-from-drop-shipping
- https://web-design-and-development2.my-free.website/blog/post/1404392/how-to-become-a-video-game-developer
- https://blogfreely.net/nextgeducationblogs/which-is-the-best-training-institute-in-delhi
- https://write.as/nextgeducationblogs/how-to-become-a-video-game-developer-designer-pn3z
- https://6181184bdb5df.site123.me/blog/frequently-asked-questions-about-graphic-design
Comments
Post a Comment