Formge länkad text
Länkar har som alla andra element vissa förinställda egenskaper. Det kanske mest framträdande är att länkad text alltid blir understruken.
Man kan också säga att en länk kan befinna sig i olika lägen; obesökt, besökt eller aktiv. Detta visas av webbläsaren med olika textfärger. Med CSS kan man ändra egenskaper för länkar i alla olika lägen. Det finns även ett fjärde läge som beskriver länkens utseende när man pekar på den.
För att ändra egenskaperna för alla länkar, oavsett läge, använder man enklast väljaren a. Det här gör att länkarna alltid ser lika ut, oavsett om man klickat på dem eller inte.
a { color:#000 }  /*Ger alla länkar svart textfärg*/
Pseudoelement för länkar
Genom att lägga till så kallade pseudoelement efter väljaren a, kan man beskriva olika utseenden för länkarnas olika lägen. För att detta ska fungera på rätt sätt bör man ange dem i följande ordning.
| Väljare | Beskrivning |
|---|---|
| a:link | utseende innan länken klickats på, obesökt |
| a:visited | utseende efter att länken klickats på, besökt |
| a:hover | utseende när man pekar på länken |
| a:active | utseende för aktiv länk (det senaste element som klickats på) |
Vill man endast ha ett annorlunda utseende vid pekning på länkar, räcker det att använda a:hover.
a { color:#000 } /*Ger alla länkar svart textfärg*/
a:hover  { color:#f00 } /*Länkar blir röda vid pekning*/
Understrykning
Med CSS kan man ge vilken text som helst understrykning. Detta är dock inte att rekommendera eftersom det är ett välkänt kännetecken för länkad text. Läsaren kan luras att tro att all understruken text är länkar. Av samma skäl bör man inte heller ta bort länkars understykning utan att ersätta dem med någon annan framträdande egenskap.
Understrykning heter underline och är ett av de värden som egenskapen text-decoration kan ha. Med värdet none tas understrykningen bort. I exemplet nedan blir länkar understrukna först när man pekar på dem.
a       { color:#ff0000; text-decoration:none }
a:hover { color:#00ff00; text-decoration:underline }