{
}
Theres more indentation
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.
Theres more indentation
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.