When creating lists in HTML and CSS you can create a numbered list or an unordered list of items. There are three tags that you need to know in order to create a list.
The tags you need to know are <ul> for an unordered list, <ol> for an ordered or numbered list, and <li> which is used for the list items.
So let’s say you have a list of items you want to display with two values for each item. For example a list of names and email addresses.
The unordered list would look like this:
- John Doe jdoe@somedomain.com
- Jane Doe janedoe@someotherdomain.com
- Joan Doe joan@somedomain.com
The HTML would look like this for the above list:
<ul>
<li>John Doe <span id=”email” >jdoe@somedomain.com</span></li>
<li>Jane Doe <span id=”email”>janedoe@someotherdomain.com</span></li>
<li>Joan Doe <span id=”email”>joan@somedomain.com</span></li>
</ul>
Notice the unordered list has a little arrow next to it. To acheive this style. You’ll need an image of an arrow and also some CSS code.
ul li {
list-style: none;
line-height: 20px;
background: url(‘images/orange_bullet.gif’) no-repeat 0px 7px;
font-weight: bold;
}
The ordered list would look like this:
- John Doe jdoe@somedomain.com
- Jane Doe janedoe@someotherdomain.com
- Joan Doe joan@somedomain.com
The HTML for the above ordered list would look like this:
<ol>
<li>John Doe <span id=”email”>jdoe@somedomain.com</span></li>
<li>Jane Doe <span id=”email”>janedoe@someotherdomain.com</span></li>
<li>Joan Doe <span id=”email”>joan@somedomain.com</span></li>
</ol>
Now in order to get the bold look with the blue email text you’ll need to add a few more lines to your CSS like below.
#email {
color: #1A2F8F;
}
Here is the complete code with the CSS and the HTML for both lists.
<style>
ul li {
list-style: none;
line-height: 20px;
background: url(‘images/orange_bullet.gif’) no-repeat 0px 7px;
font-weight: bold;
}
ol li {
font-weight: bold;
}#email {
color: #1A2F8F;
}
</style><ul>
<li>John Doe <span id=”email” >jdoe@somedomain.com</span></li>
<li>Jane Doe <span id=”email”>janedoe@someotherdomain.com</span></li>
<li>Joan Doe <span id=”email”>joan@somedomain.com</span></li>
</ul><ol>
<li>John Doe <span id=”email” >jdoe@somedomain.com</span></li>
<li>Jane Doe <span id=”email”>janedoe@someotherdomain.com</span></li>
<li>Joan Doe <span id=”email”>joan@somedomain.com</span></li>
</ol>
