W26

WEEK 26

Dressing Up Links
web.selah-hcs.orgweb design for kids // html5 + css3one day academy
THIS WEEK'S JOB // Style your links in all four of their moods: unvisited, visited, hover, active. (Book pages 197-201 in Mrs. Gaiser's book.)

THE THREE IDEAS

Links have states
a:link, a:visited, a:hover, a:active. Same door, four moods. Order matters in the stylesheet: LoVe HAte (link, visited, hover, active).
Hover is the handshake
A hover change (color, underline) tells the visitor's hand it found something clickable. Menus feel alive because of this one state.
Do not hide the doors
Links must look different from plain text somehow. Remove the underline only if color or weight still says clickable.

TRY IT IN THE PAINT BOOTH

<style>
  a:link    { color: #39e6ff; }
  a:visited { color: #9a92c9; }
  a:hover   { color: #a6ff4d; text-decoration: none; }
</style>
<p>Hover over <a href="#">this door</a> and watch it light up.</p>
OPEN THE PAINT BOOTH, PRELOADED »

ON YOUR LOT

Style all four link states on your site in your palette, then hover every link on every page like a visitor would.
« W25W27 »