Your Guide to Professional
Web Site Design and Development

HTML Tips
HTML Codes
Web Development
Web Design Tips
JavaScript Codes
216 Web Safe Colors
CSS Tutorial
JavaScript Tutorial
ASCII Character Codes

 

| Web Site Development | HTML Codes | HTML Tips | Web Design TipsJavascript Snippets | 216 Safe Colors | Symbols | CSS Tutorial | JavaScript Tutorial |

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:
  1. Item one
  2. Item two
  3. 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
business web design  Creating a Basic HTML Page
business web design  Embedding Cascading Style Sheets
business web design  Using Cascading Style Sheets (CSS) to Specify Web Page Formatting
business web design  Manipulating Bulleted and Numbered Lists with Cascading Style Sheets (CSS)
business web design  Formatting Hyperlinks with Cascading Style Sheets (CSS)
business web design  Creating Tables within a Web Page with Cascading Style Sheets (CSS)
business web design  Cascading Style Sheets (CSS) Classes and ID's
business web design  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