Craigslist ad - Step 2

Bulleted List

Our Craigslist ad has six reasons why someone may need to sell their house quickly.  We want to impress upon the reader the importance of the six reasons.  Each reason or item will be preceded by a bullet.  However, the order of the items is not important.  We do not need to number them from 1 to 6.

Html has a set of tags that will create an unordered list of items with bullets.  Our current task is to investigate the structure and usage of these tags.

Tags                       Description                               
<ul></ul>          start and end unordered list
<li></li>             start and end bulleted item

Below, is the structure of an unordered list using html.  And below is the creation of our list for our Craigslist ad.  Notice that the six reasons or items are enclosed within the start <ul> tag and the end </ul> tag of the unordered list.  I have indented the <li></li> item tags to stress the relationship between the <ul></ul> and <li></li> tags.  Html does not require the indentation. 

Structure                               
<ul>                                                  
   <li>first item</li>                               
   <li>second item</li>                           
   .                                                       
   .                                                       
   .                                                       
   <li>sixth item</li>                             
</ul>                                                

Actual                                                         
<ul>
   <li>Facing foreclosure</li>
   <li>Thinking about bankruptcy</li> 
   <li>Job transfer or job loss</li>
   <li>Relocating</li>
   <li>Tired of problem tenants</li>
</ul>

Now our ad has the following bulleted unordered list:

• Facing foreclosure
• Need a Short Sale
• Thinking about bankruptcy
• Job transfer or job loss
• Relocating
• Tired of problem tenants

Bonus Information:

Bullets are the default symbol for the items in a list.  There are other symbols besides bullets.  Caution - using different symbols besides a bullet may not be viewed correctly in other browsers.  Therefore, our Craigslist ad will only use the default bullet.

I want to give you another choice for our unordered list, the choice of color.

• Facing foreclosure
• Need a Short Sale
• Thinking about bankruptcy
• Job transfer or job loss
• Relocating
• Tired of problem tenants

• Facing foreclosure
• Need a Short Sale
• Thinking about bankruptcy
• Job transfer or job loss
• Relocating
• Tired of problem tenants

To change the color, you will need to add a 'style element' to the <ul> tag.

<ul style="color:red"> or <ul style="color:navy">

If you want to get ready fancy, how about changing the color of each item.

<li style="color:green"> or <li style="color:maroon">

Try out these variations and have fun.  Tomorrow we will complete our Craigslist ad and introduce links.