CSS Tutorials

Lists In CSS
Previous Home Next

Lists are a part of everyday life. To-do lists determine what to get done. Navigational routes provide turn-by-turn lists of directions. Recipes provide lists of ingredients and lists of instructions. With a list for nearly everything, it’s easy to understand why they are also popular online.

When we want to use a list on a website, HTML provides three different types to choose from:

  • unordered,
  • ordered, and
  • description lists.

Choosing which type of list to use—or whether to use a list at all—comes down to the content and the most semantically appropriate option for displaying that content.In addition to the three different types of lists available within HTML, there are multiple ways to style these lists with CSS.

Unordered Lists

An unordered list is simply a list of related items whose order does not matter. Creating an unordered list in HTML is accomplished using the unordered list block-level element, <ul>. Each item within an unordered list is individually marked up using the list item element, <li>.


Ordered Lists

The ordered list element, <ol>, works very much like the unordered list element; individual list items are created in the same manner. The main difference between an ordered list and an unordered list is that with an ordered list, the order in which items are presented is important.

<Li>first number</li>
<li>Second number</li>
<li>Third number</li>

Description Lists

Another type of list seen online (but not as often as unordered or ordered lists) is the description list. Description lists are used to outline multiple terms and their descriptions, as in a glossary.

For example,Creating a description list in HTML is accomplished using the description list block-level element, <dl>. Instead of using a <li> element to mark up list items, the description list requires two block-level elements: the description term element, <dt>, and the description element, <dd>.

A description list may contain numerous terms and descriptions, one after the other. Additionally, a description list may have multiple terms per description, as well as multiple descriptions per term. A single term may have multiple meanings and warrant multiple descriptions. Conversely, a single description may be suitable for multiple terms.

When adding a description list, the <dt> element must come before the <dd> element. The definition term and the description that directly follows it correspond to one another; thus, the order of these elements is important.

By default, the <dl> element will include vertical margins, just like the <ul> and <ol& elements. Additionally, the <dd> element includes a left margin by default.

<dt>computer course</dt>
<dd>MCA,BCA and etc.</dd>
<dd>Regular and correspondence</dd>
<dt>Business course</dt>
<dd>MBA,BBA,and etc</dd>
<dd>Regular and correspondence</dd>
Previous Home Next