Web Development Lesson 3 - Lists

In this exercise you will create a bulleted list and a numbered list and learn some list-specific formatting rules.

• Open a new jsfiddle tab.
• Populate the HTML section with headings for 'Recipe', 'Ingredients' and 'Method'.

<h2>Pancake Recipe</h2>
<h3>Ingredients</h3>
<h3>Method</h3>

• Let's look at the Method first. Most recipes show the method as a numbered list since it's important to do the steps in order.

<h3>Method</h3>
<ol>
  <li>Mix ingredients</li>
  <li>Pour mix into pan</li>
  <li>Cook 1 minute on each side</li>
  <li>Serve</li>
</ol>

• Run the code now and see that the browser automatically places a number at the beginning of each line, starting with '1'.
• The <ol> stands for 'ordered list'.
• Each item in the list is designated by the tag <li>, which stands for 'list item'.
• It looks like we forgot to heat the pan first. Let's add that step before we pour the mix.

<h3>Method</h3>
<ol>
  <li>Mix ingredients</li>
  <li>Heat pan</li>
  <li>Pour mix into pan</li>
  <li>Cook 1 minute on each side</li>
  <li>Serve</li>
</ol>

• What do you notice when you run the code? The numbers change automatically so that 'heat pan' becomes '2' and everything afterwards is incremented.

• Now let's look at the ingredients. The order of the ingredients doesn't matter, so they're not usually numbered.

<h3>
  Ingredients
</h3>
<ul>
  <li>100g flour</li>
  <li>2 eggs</li>
  <li>300ml milk</li>
</ul>

• Run the code and see that instead of a number, we have a dot (or bullet) in front of each item.
• It's as easy as this to create a list. Now let's see what we can do to change their appearance.

• Add the following style attribute to the method.

<ul style="list-style-position: inside;">

• Run the code and notice that the bullets move to the right. They're moving 'inside' the <ul> block.
• We can see this better by adding the following code to an <li> in each of the lists.

<li style="border: solid red 1px;">

• This style creates a solid red border with a width of 1 pixel around the list element.
• Now you can see that the bullets are 'inside' the border, while the numbers of the ordered list are outside the border.
• Notice that you have to add the border style to each of the elements you want to apply it to. That gets hard to manage when you want to do it more than a few times, especially if you want to change them multiple times to see which you like best. There's a better way.
• In the CSS pane at the top right, enter the following code.

li {
  border: solid red 1px;
}

• Run the code and see that the border is applied to every instance of <li>. That's much easier.
• The expression before the { determines which elements the CSS rules apply to.
• Everything between the {} are the rules to be applied.
• Convention is to put every rule on its own line.
• Remember to always end the rule with ;

• CSS stands for Cascading Style Sheets. 'Cascading' means that styles cascade down to all elements inside / below. Since some styles might cause conflicts, the browser needs to prioritise which rule to follow.
• To see this, change one of the attributes in the HTML section to:

<li style="border: solid blue 3px;">

• Run the code and see that the specific list item now has a thicker blue border. It takes priority over the general rule because it's more specific.

• Add the following style for the unordered list.

ul {
  list-style-type: square;
}

• Notice that the bullet shape changed. Other options for list-style-type are disc and circle.
• We can also change the style for ordered lists.
• Some options are upper-roman and lower-alpha. Try these to see which ones you like.

ol {
  list-style-type: upper-roman;
}

If you get to this point and something isn't quite right, or you'd like to check your code, here is the code we've been working on.

• HTML
• CSS
• Full jsfiddle

Next: Multi-level Lists