Chapter 9: Lists, Links and Navigation Bars
In this chapter, we’ll be looking at CSS properties for styling hyperlinks and lists. In addition, we’ll combine both concepts and discuss how to create navigation bars commonly seen on web pages. Ready? Let’s first start with CSS list.
CSS Lists
Recall that in HTML, we can create two different types of list: ordered list and unordered list? We can style these lists using CSS list properties.
list-style-type
The list-style-type property allows you to set list item markers for your lists. List item markers refer to those bullets/numbers/letters on the left of each list item.
For ordered lists, we can specify the type of numbers or letters we want to use as markers. For instance, if we want to use roman numbers (e.g. i, ii, iii) as item markers, we can write list-style-type: lower-roman;.
Other commonly used markers include:
decimal (this is the default),
decimal-leading-zero (number with a leading zero, e.g. 01, 02..),
lower-alpha (e.g. a, b, c..),
lower-greek (e.g. α, β, γ..),
upper-alpha (e.g. A, B, C..) and
upper-roman (e.g. I, II, III…).
For unordered list, you can specify the shape that you want to use as the bullet. The default marker is a disc (a filled circle). You can change that to either a square or a circle.
In addition, you can also choose not to use any item marker for your list. To do that, you write list-style-type: none;. This is commonly done when creating navigation bars.
Examples:
list-style-type: lower-roman;
list-style-type: circle;
list-style-type: none;
list-style-image
If you do not fancy any of the provided list styles, you can choose to use an image as the list item marker. To do that, you use the list-style-image property to specify the url of the image to use.
Examples:
list-style-image: url(‘myMarker.gif’);
list-style-position
The list-style-position property is used to specify whether the list item markers should appear inside or outside the content flow. There are two acceptable values: inside and outside.
By default, list items are displayed with a certain amount of indentation. If list-style-position is set to inside, the list item markers are displayed after the indentation. The indentation is represented by the left edge of the boxes in the image below. If list-style-position is set to outside, the markers are displayed before the indentation.
In other words, list-style-position: inside will result in more indentation than list-style-position: outside. The default position is outside.
Examples:
list-style-position: outside;
list-style
list-style is a shorthand property for setting all the list properties (i.e. list-style-type, list-style-position and list-style-image) in one declaration. If any value is missing, the default value for the missing property will be used.
Examples:
list-style: square inside url("myMarker.gif");
CSS Links
Hyperlinks can be styled using any of the CSS properties discussed in previous chapters. You can style the background color using the background-color property. This will give the link a highlighted appearance. You can also use the text and font properties covered in Chapter 8 to change the font size, font style, text color, text decoration etc.
In addition, we can choose to style hyperlinks based on the state they are in. Links can be in one of four states:
link (an unvisited link)
visited (a visited link)
hover (when the user mouses over it), or
active (when the link is clicked).
To specify the state, we write a:link, a:visited, a:hover or a:active. You should always specify the 4 states in the order above.
Examples:
a {
text-decoration: none;
}
a:link {
color: #0000FF;
}
a:visited {
color: #00FF00;
}
a:hover {
color: #FFFF00;
}
a:active {
color: #FF00FF;
}
Navigation Bars
Navigation bars are commonly created as an unordered list in HTML and styled using list and link properties in CSS.
Let’s try creating our own navigation bar. First, we need to create an unordered list of items for our menu and make the list items clickable (as hyperlinks).
<ul>
<li><a href=”home.html”>Home</a></li>
<li><a href=”htmltutorial.html”>HTML Tutorial</a></li>
<li><a href=”csstutorial.html”>CSS Tutorial</a></li>
<li><a href=”javascripttutorial.html”>Javascript Tutorial</a></li>
</ul>
Next, let’s add the following declaration to our CSS style to remove the default bullet from the list.
ul {
list-style-type: none;
}
Now, we have to style the hyperlinks. We’ll use a block display which allows us to specify the width of the links. In addition, we’ll center align the text and remove all underlines. We’ll also add a background color to our links.
a {
display: block;
width: 160px;
text-align: center;
text-decoration: none;
background-color: #00FF00;
}
Finally, if we want the navigation bar to be a horizontal bar, we need to float the list items left. Otherwise, the list items will be displayed as a vertical bar.
li {
float: left;
}
There you go! We’ve just created a simple horizontal navigation bar. The source code for this navigation bar is given as part of the exercise for this chapter. Play around with it and try to make it more visually appealing. You can also specify different styles for the four different link states.
This method is just one of the methods to create a navigation bar. The accompanying project for this book will demonstrate a different method.
Exercise 9
Download the source code for this exercise from http://learncodingfast.com/css and unzip the file. The source code for this exercise can be found in the Chapter 9 - Lists, Links and Navigation Bars folder.
Exercise 9.1
1. Open the file Chapter 9 - List and Links.html concurrently in your browser and text editor.
2. Modify the CSS declaration for ol and observe what happens to the 'Cars Ordered List'. Try each of the following:
(a) list-style-type: decimal-leading-zero;
(b) list-style-type: lower-roman;
(c) list-style-type: upper-roman;
(d) list-style-type: upper-alpha;
(e) list-style-type: lower-alpha;
(f) list-style-type: lower-greek;
(g) list-style-type: none;
3. Modify the CSS declaration for ul and observe what happens to the 'Cars Unordered List'. Try each of the following:
(a) list-style-type: circle;
(b) list-style-type: square;
(c) list-style-type: none;
(d) list-style-type: disc;
4. Add the following rule to the CSS declaration for ul:
list-style-position: outside;
Refresh the browser. Nothing changes right? That is because list-style-position: outside; is the default. Now change list-style-position: outside; to list-style-position: inside;. You’ll notice that the unordered list is shifted slightly to the right (i.e. there’s more indentation).
5. Remove the list-style-type property for ul and add the following instead:
(a) list-style-image: url("myMarker.gif");
Observe what happens to the 'Cars Unordered List'.
6. Now let’s look at how to style hyperlinks. Try adding the following rules to the stated selector:
(a) Add color: green; to a:link{}
and observe what happens to the ‘Click Me’ link.
(b) Add font-size: 2em; to a:active{}
and click on the link.
(c) Add background-color: red; to a:hover{}
and hover your mouse over the link.
Exercise 9.2
1. Open the file Chapter 9 - Navigation Bar.html concurrently in your browser and text editor.
2. This page shows an example of how a horizontal navigation bar can be created using CSS rules for lists and links. The steps are explained in the book. Study the code and try modifying the CSS declaration to improve the design of this navigation bar.