Reprence Html CSS javascript PHP MySQL Bootsrap

CSS Lists

In this tutorial you will learn how to format HTML lists using CSS.

Types of HTML Lists

There are three different types of list in HTML:

lst1

See the tutorial on HTML lists to learn more about the lists and how to create them.

Styling Lists with CSS

CSS provides the several properties for styling and formatting the most commonly used unordered and ordered lists. These CSS list properties typically allow you to:

lst2

In the following section we will discuss the properties that can be used to style HTML lists.


Changing the Marker Type of Lists

By default, items in an ordered list are numbered with Arabic numerals (1, 2, 3, 5, and so on), whereas in an unordered list, items are marked with round bullets (•).

But, you can change this default list marker type to any other type such as roman numerals, latin letters, circle, square, and so on using the list-style-type property.

Let's try out the following example to understand how this property actually works:


Changing the Position of List Markers

By default, markers of each list items are positioned outside of their display boxes.

However, you can also position these markers or bullet points inside of the list item's display boxes using the list-style-position property along with the value inside. In this case the lines will wrap under the marker instead of being indented. Here's an example:

Let's take a look at the following illustration to understand how markers or bullets are positioned.


lnk3

Using Images as List Markers

You can also set an image as a list marker using the list-style-image property.
The style rule in the following example assigns a transparent PNG image "arrow.png" as the list marker for all the items in the unordered list. Let's try it out and see how it works:

Sometimes, the list-style-image property may not produce the expected output. Alternatively, you can use the following solution for better control over the positioning of image markers.

As a work-around, you can also set image bullets via the background-image CSS property. First, set the list to have no bullets. Then, define a non-repeating background image for the list element.

The following example displays the image markers equally in all browsers:



Setting All List Properties At Once

The list-style property is a shorthand property for defining all the three properties list-style-type, list-style-image, and list-style-position of a list in one place.

The following style rule sets all the list properties in a single declaration.


Creating Navigation Menus Using Lists

HTML lists are frequently used to create horizontal navigation bar or menu that typically appear at the top of a website. But since the list items are block elements, so to display them inline we need to use the CSS display property. Let's try out an example to see how it really works:

lnk4