Prev | Current Page 130 | Next

Charles Wyke-Smith

"Stylin' with CSS: A Designer's Guide 2nd Edition"


8. #contentarea a {margin-left:6em;}
The ???More about??¦??? link looks better moved right to align it
under the list.
9. a {color:#036; font-style:italic;}
All the links are dark blue and italicized.
10. a:hover {color:#069; text-decoration:none;}
When hovered, the links get lighter, and the underlining is
removed.
11. acronym {border-bottom:1px dotted; cursor:default;}
To show that the acronym has a tooltip when rolled, we use
a dashed underline (a solid underline would indicate a link).
Additionally, we change the cursor to the pointer to encourage
users to linger long enough to let the tooltip pop up.
STYLIN??™ FONTS AND TEXT 99
12. #homepagefooter {border-top:1px solid #069;}
Adds a blue horizontal rule above the footer.
13. #homepagefooter p {font-size:.7em; text-align:center;
text-indent:0em; border-top:1px solid #069; paddingtop:.
5em;}
Finally, we size and center the footer text and add a border to
the top, padded away from its text, to separate the footer from
the content. Note that we remove the text-indent that we
would otherwise inherit from the less speci?¬? c p declaration earlier
in the styles.
While this might seem like a lot of work for a single page, remember
that once styles like these are in a style sheet, they are applied to
all the pages that are linked to it, so you can get a whole Web site??™sworth
of mileage out of the work you put into styling a page like this.


Pages:
118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142