WEB120 » Week 5

Update: December 10th, 2009

Assignment: Links + Rollovers

Create as many examples of links with special CSS handling as you can (at least 3). We will go over methods in Chapter 4 of your book
Add a link to this assignment on your project portal.

Reading

Book: CSS Mastery
Chapter: 4 - Styling Links
Pages: 70-83

Lecture Notes

In Class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Links + Styling + Hover Effects</title>
        <style type="text/css"><!--
		body {
			margin:50px;
		}
		/* apply to all anchor tags (whether links or not) */
		a {
			color:blue;
		}
		/* apply to all link states */
		a:link, a:visited, a:active, a:hover {
			text-decoration:none;
			border-bottom: 1px dashed #000;
			background-color:blue;
			padding:3px;
		}
		a:link {
			color:green;
		}
		a:visited {
			color:red;
		}
		a:active {
			color:black;
		}
		a:hover {
			color:yellow;
			background-color:red;
		}
		a[rel=nofollow] {
			color:#00CCCC;
			text-decoration:line-through;
		}
		/* pseudo-class on top of attribute selector */
		a[rel=nofollow]:hover {
			color:#660099;
			text-decoration:overline;
		}
		#pageContent {
			height:900px;
		}
		/* we can access attributes that have spaces and other special characters in values by enclosing the value in quotes */
		div[title="Gary's title"] {
			background-color:#eee
		}
 
		.tooltip {
			display:none;
			border: 1px solid #036;
			background-color:#CCCCCC;
			padding:5px;
			position:absolute;
			top:10px;
			left:0;
		}
		a:hover .tooltip {
			display:block;
		}
		--></style>
	</head>
	<body>
    	<a id="top" href="#bottom">Go to Bottom</a>
        <div id="pageContent" title="Gary's title">
            <ul>
                <li>
                    <a href="http://google.com" title="Visit Google!">Google</a>
                </li>
                <li>
                    <a rel="nofollow" class="external" href="http://google.com">Another Link<span class="tooltip">(visit another link)</span></a>
                </li>
                <li>
                    <a href="http://google.com">Another Link<span class="tooltip">(visit another link)</span></a>
                </li>
            </ul>
        </div>
    	<a id="bottom">bottom</a>
    	<a href="#top">Go to Top</a>
	</body>
</html>
No comments yet.
You must be logged in to post a comment.
TOP