CSS Tutorial: Formatting Bulleted and Numbered Lists with Cascading Style
Sheets (CSS)
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
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three<li>
</ul>
In a web browser, this code would appear as:
-
Item one
-
Item two
-
Item Three
|
HTML Ordered List
<ol>
<li>Item one</li>
<li> Item two</li>
<li> Item three</li>
</ol>
In a web browser, this code would appear as:
-
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.
 |
 |
Previous |
Next |
 An Introduction to Cascading Style
Sheets
Creating a Basic HTML Page
Embedding Cascading Style Sheets
Using Cascading
Style Sheets (CSS) to Specify Web Page Formatting
Manipulating Bulleted
and Numbered Lists with Cascading Style Sheets (CSS)
Formatting Hyperlinks
with Cascading Style Sheets (CSS)
Creating Tables within a
Web Page with Cascading Style Sheets (CSS)
Cascading Style
Sheets (CSS) Classes and ID's
Cascading Style Sheet
Codes Chart - Property Index
Web Development Tutorials
Cascading Style
Sheets Tutorial: An Introduction to Cascading Style Sheets
JavaScript
Tutorial: An Introduction to JavaScript
Web
Development: A step by step guide to developing a successful Internet
business
HTML
Codes Chart: Copy and paste HTML codes for your web page
HTML Tips:
Copy and paste special effect HTML codes for your web page
Web Design
Tips: Tips, tricks, and special effect codes for your web page
JavaScript
Code Snippets: Copy and paste special effect JavaScript codes for your
web page
216
Web Safe Color Chart: Hexadecimal and RGB Color Codes for your web page
ASCII Character
Codes Chart: American Standard Code for Information
Interchange character codes chart
|
