CSS Lists

Last Updated Jul 21, 2015, 12:00:06 PM




CSS Lists

CSS lists are similar to what you see in Microsoft Office bullets and square boxes before the content. Of course, that is provided by Microsoft. However you can also do the same to your content on the web page.

CSS lists allow you do add different types of bullets, square boxes for order and un order lists. See the below image for more understanding

Basic Lists Without CSS


Try It Now

Basic Lists With CSS


Try It Now

Basic Square box lists Without CSS


Try It Now

CSS Lists

Output
Try It Now

The HTML list properties allows you to style the content in three main different waysorder lists, unorder lists

You can further style these two lists according to your needs

CSS list items in diffetent ways

CSS lists items can be set using the list-style property

Try It Now

Setting an Image as a CSS list

Just as the circle, square boxes and others you can also set an image as the CSS list marker


Try It Now

CSS lists Shorthand properties

You can write the above css code using shorthand property



Browser compatibility
Feature
Basic support 1.0 1.0 1.0 3.5 4.0 1.0 1.0



All CSS List Properties

Property Description Example
list-style-position It defines where to position the list marker, and it accepts one of two values: "inside" or "outside". Try It Now
list-style-image This property determines whether the list marker is set with an image, and accepts a value of "none" or a URL that points to the image: Try It Now
list-style-type The list-style-type property defines the type of list by setting the content of each marker, or bullet, on the list. Try It Now


Sources and Credits

The source of the content has been referred and updated with Mozilla Foundation and W3C Organization

Last Updated Jul 21, 2015, 12:00:06 PM