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> |