Web Development Lesson 3 - Lists
Multi-level Lists
Objectives
In this exercise you will:
Setup
We'll start from a blank slate in
jsfiddle, so delete all the
HTML and
CSS you've entered so far.
Nesting Lists
Sometimes you'll want to have lists inside of lists. Think of the table of contents of a textbook where each chapter has a number of subheadings and even those may have subheadings.
To keep it interesting, we'll look here at a simple profile of yourself.
Enter the heading 'Who Am I?'
<h2>Who Am I?</h2>
Now create a list of topics to cover. Even though the order doesn't matter, I'm using
<ol> because I'll use it to illustrate a point later.
<ol>
<li>Family Members</li>
<li>Hobbies</li>
<li>Favourite Bands</li>
</ol>
Now we'll populate these with other lists under (inside) each topic.
Enter the names of your family members. I don't know the names of your family, so I'll just label some options.
<li>Family Members
<ul>
<li>Father</li>
<li>Mother</li>
<li>Sister</li>
<li>Brother</li>
</ul>
</li>
Notice that the new list needs its own
<ul> or
<ul> tag.
Also notice that the whole list goes before the
</li> tag of the heading list element.
Finally, you should have noticed that the browser automatically uses different bullets for the different levels of list items.
Try this yourself with the Hobbies and Favourite Bands sections.
Cascading Styles
Just to quickly review the way
CSS cascades to lower level elements, try the following
CSS code.
ol {
color: blue;
}
See how even the
<ul> sublists are now blue, not just the upper level
<ol> that we selected. This is cascading.
Combining CSS Selectors
<li>Hobbies
<ol>
<li>Music</li>
<li>Football</li>
<li>Cycling</li>
</ol>
</li>
Now, add the following
CSS code to target that specific list.
ol ol {
font-weight: 700;
}
jsfiddle is great for quickly testing a piece of code, but it has limitations.
Primarily, you can't easily see a full screen result.
Simalarly, it's difficult to see large blocks of code.
Instead, there are many full web development source code editors available with varying benefits and levels of complexity. We will be using Visual Studio Code, which is one of the most powerful.
First, create a folder on your desktop with your name.
Open Visual Studio Code.
Navigate to File → Open Folder and select the folder you created.
Hit Ctrl-N to create a new file. Hit Ctrl-S to save the file and name it 'lists.html'.
HTML Structure
Type '
HTML' and select '
HTML:5'.
Visual Studio automatically enters the structure of a full
HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Adding CSS
Final Code
If your code doesn't look quite right or you want to check it against mine, here's what we've been working on.
Next: Checklists