Different List Item Markers in HTML and CSS - Tryit Editor for Web Developers
Edit This Code:
See Result »
<html> <head> <style> ul.a { list-style-type: circle; border: 5px solid blue; } ul.b { list-style-type: square; border: 5px solid red; } ol.c { list-style-type: upper-roman; border: 5px solid green; } ol.d { list-style-type: lower-alpha; border: 5px solid pink; } h1, p { color: purple; } </style> </head> <body> <h1>Different List Item Markers:</h1> <p><b>Example of Unordered lists:</b></p> <ul class="a"> <li>Tea</li> <li>Sandwich</li> <li>Coca-Cola</li> </ul> <ul class="b"> <li>Tea</li> <li>Sandwich</li> <li>Coca-Cola</li> </ul> <p><b>Example of Ordered lists:</b></p> <ol class="c"> <li>Tea</li> <li>Sandwich</li> <li>Coca-Cola</li> </ol> <ol class="d"> <li>Tea</li> <li>Sandwich</li> <li>Coca-Cola</li> </ol> <img src="logo.jpg"/> </body> </html>
Result: