CSS List Styles

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.

list styling example output



 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. http://www.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

list Styling image example output

Now click on the “home ” that directs to the home page of www.tutorials.freshersnow.com