CSS List Styles: There are small circular or square symbols in front of each line in the order list, there are several types of order listings. Such as Dais Style, Circle Style, Square Style, etc.
Types of CSS List Styles
- To create a dictionary-style list, you must declare list-style-type: disc;
- To create a Circle Style List, Declaration must be list-style-type: circle;
- To create a square style list, the Declaration must be list-style-type: square;
CSS List Styles Example
<html>
<head>
<title> www.tutorials.freshersnow.com </title>
<style>
body {background: #80ced6;; margin-left: 120px;}
h1 {colour: # F00;}
#disc {list-style-type: disc;}
#circle {list-style-type: circle}
#square {list-style-type: square;}
</style>
</head>
<body>
<h1> Unordered list </h1>
<h4> Disc Type list </h4>
<ul id = "disc">
<li> Home </li>
<li About Us </li>
<li> Contact Us </li>
</ul>
<h4> Circle Type list </h4>
<ul id "circle">
<li> HTML </li>
<li> CSS </li>
<li> PHP </li>
</ul> <h4> Square Type list </h4>
<ul id "square">
<li> Paragraph </li>
<li> Table </ li>
<li> List </li>
</ul>
</body>
</html>
List Styling Example Output
Open a Notepad and enter the code at the top and save the file from the File menu by clicking on Save as type: Save as type: All files, save the index.html file with Mozilla Firefox or Google Chrome and check.
The Image on the List
The image can be used instead of any symbol in the list. The use of the list in the navigation bar is very popular. Usually, the use of images as a list style in the list used in the sidebar navigation can be seen.
The Image on the List Syntax
To use the image as a list style, Declaration must be list-style-image: url(images/b.png).
The Image on the List Example
<html>
<head>
<title> www.tutorials.freshersnow.com </title>
<style> body {background:#80ced6; margin-left: 120px;}
h1 {colour: # F00;}
ul {list-style-image: url (images / b.png)}
</style>
</head>
<body>
<h1> List Style Image </h1>
<ul id = "disc">
<li>
<a href="https://tutorials.freshersnow.com/"> Home </a> </li>
<li> <a href="https://www.freshersnow.com/about-us/"> About Us </a> </li>
<li> <a href="https://tutorials.freshersnow.com/html/"> HTML </a> </li>
<li> <a href="https://tutorials.freshersnow.com/cprogramming/"> C Programming </a> </li>
<li> <a href="https://tutorials.freshersnow.com/python/"> Python </a> </li>
<li> <a href="https://www.freshersnow.com/contact-us/"> Contact Us </a></li>
</ul>
</body>
</html>
Procedure
1. Create a folder name in style and create a new folder named images. The image folder should be kept on the list. This project uses an image called b.png.
2. Download the logo image from the following website. https://tutorials.freshersnow.com
3. Then open a Notepad folder in the folder named in Style and type the above code and save the file by clicking on Save as filename: index.html, Save as type: Save all files, save index.html file with Mozilla Firefox or Google Chrome The image shown below Will look like.
The Image on the List Example Output
Now click on the “home ” that directs to the home page of www.tutorials.freshersnow.com