Understanding list styles by using CSS

IN this post you'll get to know the process of adding simple styles to your lists using CSS.

As a quick refresher, here is the basic structure of an unordered list:

<ul>
<li>List example One</li>
<li>List example TwoOne</li>
<li>List example ThreeOne</li>
</ul>

Here is the resulting list:

• List example One


• List example Two


• List example Three

That's pretty boring to look at, isn't it? Thanks to CSS, there is a lot that we can do to jazz that list up a bit. For the sake of keeping it as simple as we can, we will be using inline style sheets for the examples. For visual learning purposes, our examples will also have a set margin of 1px as well as a padding of 1px by using the inline style "margin:1px;padding:1px;" in the list item tags (<li>) however, you will not see the styles.

The first thing we will be doing is simply giving the list items a background color and a colored bordered. To do this, we will simply insert the style style="background-color: #ffe1e1;" into each of the <li> tags:

<ul>
<li style="background-color:#f0f0f0;">List Item One</li>
<li style="background-color:#f0f0f0;">List Item Two</li>
<li style="background-color:#f0f0f0;">List Item Three</li>
</ul>

Since this doesn't help to distinguish the list items from each other and instead, it shows as a large block with a light grey background, we'll add borders to the list items and see what happens. Note that we won't have to begin the style with 'style=' as we have already used a style with the list items and we can simply add to that style.

Here is the style that we will be adding in the syntax of "width style #color;" border: 1px solid #d74545;. In adding the two styles together in each of the list item tags, we will get this code:

<ul>
<li style="background-color:#f0f0f0;border:1px solid #afaeae;">List Item One</li>
<li style="background-color:#f0f0f0;border:1px solid #afaeae;">List Item Two</li>
<li style="background-color:#f0f0f0;border:1px solid #afaeae;">List Item Three</li>
</ul>

This is what the above code will display on a webpage. For reference, this specific page is using a document type of HTML 4.01 Transitional:

• List Item One


• List Item Two


• List Item Three

The list does seem a bit wide, so we'll let the browser know that we would like the list to be smaller. To do this, we will add a style sheet to the unordered list tag:

<ul style="width:150px;">
<li style="background-color:#f0f0f0;border: 1px solid #afaeae;">List Item One</li>
<li style="background-color:#f0f0f0;border: 1px solid #afaeae;">List Item Two</li>
<li style="background-color:#f0f0f0;border: 1px solid #afaeae;">List Item Three</li>
</ul>

Now you know how to set border and background colors of a list. So keep posting your comments on this post.

Related Posts :