Lists – Web Development

You know what people hate reading? Long chunks of text online. Do you know what people love? Scanning lists! By the end of this lesson, you will know how to create:

1. Ordered lists
2. Unordered Lists
3. Definition Lists

Create a new html file and save it as lists.html in your webdev folder in Dropbox. Since this is a html file, you’ll need to add the html:5 for the HTML boilerplate, or copy and paste the HTML boilerplate. You know the drill. Title your page “Lists.”

First, create a simple unordered list of three items between your document’s body tags as shown here. The letters in the <ul> tag refer to unordered list. Each item in the list is placed between the <li> tags.

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Lists</title>
</head>
<body>
     <ul>
          <li>do</li>
          <li>re</li>
          <li>me</li>
     </ul>
</body>
</html>

Preview list.html and you should see standard bullets. Now change the <ul> to <ol> and </ul> to </ol>. This time you should see an ordered list with numbers instead of bullets. Now change the list back to bullets <ul> and </ul>. We are about to dress up our bullets with Cascading Style Sheets, CSS.

While HTML controls the structure of websites, CSS controls the style. We’ll be creating an internal stylesheet by adding <style></style> tags to the head section of your HTML file.

 <head>
     <title>Lists</title>
     <style></style>
 </head>

Create a new class named .list inside of lists.html. Classes are identified by a period before them. Here’s how to create a class called list:

5. Apply the the list class to the <ul> tag that initiates the list as in:

 <ul class="list">
      <li>do</li> 
      <li>re</li> 
      <li>me</li> 
 </ul>

Preview lists.html again. You should see the original round bullets change to squares.

6. Edit the .list style and experiment with the other type settings such as circle or disc, lower-greek, lower-roman, katakana, etc.

For a full list of list options visit CSS list-style-type property.

When you’re done, save and preview it in Chrome to make sure it looks right. If you want the practice, you can upload it to your server and check it out there, too!