Basics of HTML/HTML5 list part 2(unordered lists)

Basics of HTML/HTML5 list part 2(unordered lists)

Published: March 19, 2014 Author: JasonDarkX2  Category: Tech,Tutorials


An unordered list commonly use simply as a bullet list, which also allows it to be also used in various design techniques and navigation menus. Like the ordered lists, unordered lists has four types available for uses disc, circle, square, and none, the disc type is default. Using CSS list-type property is required to change types if you’re following HTML 5 standards. Otherwise slapping the old school type attribute should do the trick. But I’d always recommend defining it in CSS section is better, so styling can be reusable and easily modifiable in your themes.
Examples of unordered lists
list-style-type:disc list-style-type:circle list-style-type:square list-style-type:none
  • item 0
  • item 1
  • item 2
  • item 3
  • item 0
  • item 1
  • item 2
  • item 3
  • item 0
  • item 1
  • item 2
  • item 3
  • item 0
  • item 1
  • item 2
  • item 3

 <!--- unordered list  disc !-->
 <ul style="list-style-type:disc;">
 	<li>item 0</li>
 	<li>item 1</li>
 	<li>item 2</li>
 	<li>item 3</li>
 </ul>
If theses don’t suit your taste, you can always go custom by adding a bit more css to get something like this: custom lists example Simply by setting list-style-type to none, you can easily change what comes before list items using the pseudo :before to change it's content using UTF-8 character codes.An image can also be used by using the css property list-style-image specify the urk to image.

 <style>
 ul{list-style-type:none; float:left;}
  .spades li:before{content:"\2660";}
 .clubs li:before{content:"\2663";}
 .diamonds li:before{content:"\2666"; color:red;}
 .hearts li:before{content:"\2665"; color:red;}
 .imagelist{list-style-image: url('image/button.jpg');}
 </style>
 
Easy stuff eh? now good luck on your epic listing quest lol.
Tags:HTML, HTML5, web, Web Design, Web Tutorial
No comments