How to Use Cascading Style Sheets to Format Bulleted and Numbered HTML Lists
In HTML, to create a list, you use either the <ul></ul> tag or the <ol></ol> tag with the <li></li> tag used in between to define list items. The <ul></ul> tag defines an unordered list, which will have bullet points beside each list item, while the <ol></ol> tag defines an ordered list that will have numbers beside each item. The first example below is an HTML unordered list, and the second sample is an ordered list.
HTML Unordered List
- HTML Code
- HTML code viewed within an HTML document:
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
- Browser View
- HTML coding viewed through a web browser:
HTML Ordered List
- HTML Code
- HTML code viewed within an HTML document:
<ol>
<li>Item one</li>
<li> Item two</li>
<li> Item three</li>
</ol>
- Browser View
- HTML coding viewed through a web browser:
- Item one
- Item two
- Item three
However, you may want to use squares instead of round bullet points, or roman numerals instead of numbers. In HTML, you must specify this in each <li> tag, using either <li type="square"> for square bullets or <li type="I"> for roman numerals. Remember, in HTML, this must be done inside each HTML <li> tag.
However, if you are using CSS, this can be done once and it will be applied anywhere that the <li> tag occurs within your page. You can also use images instead of bullet points, numbers, or roman numerals.
For example, to use square bullets within an unordered list:
ul { list-style-type: square }
If you would like to use an image, use the following code:
ul {list-style-image: url (images/bullet.gif)}
Of course, the image that you use needs to be uploaded to the images directory on your web server before it will appear on your page. Again, this code goes in the comment section of the <style> tag, which is inside the <head> tag inside the HTML coding.
This concludes the CSS lists lesson. In the next lesson, you will learn how to format hyperlinks with CSS.