Mint az látható a weboldalakon, a hivatkozások szövege más színű, mint a többi szöveg. Az szintén látható, hogy a kiemelésre alkalmas elemekhez hasonlóan a hivatkozás egyszerűen a soron belül található, azaz az A elem sorbeli elem. Azonban ha egy kép a tartalma, akkor a kép doboza lesz a hivatkozás, így szerencsésebb azt mondani, hogy önálló dobozt nem hoz létre az A elem.
A megjelenését tehát a szokásos szövegformázó tulajdonságokkal lehet állítani a hivatkozásnak is. Azonban ha beállítjuk a színét pirosra a következő szabállyal, meglepő dolgot tapasztalhatunk:
Úgy tűnik, mintha nem működne a dolog. Ez azért van, mert az A elem
ugyanolyan szövegelem, mint a többi. A fenti szabály azonban nem érvényes arra
az A elemre, amelynek van href
paramétere. Ekkor ugyanis a következő esetek valamelyike igaz:
Hogy egy cím mikor számít már meglátogatottnak, az a böngésző beállításaitól is függ.
A két esetet egy-egy
pseudo-osztály írja le. Az elsőt a
:link, a másodikat a
:visited. Ezeken felül még két
olyan pseudo osztály van, aminek a hivatkozások megjelenésénél hasznát vehetjük.
Ezek a :active, amelyben akkor
található egy elem, ha az egérrel éppen ráböknek; valamint a
:hover, amelyben akkor található
egy elem, ha az egér éppen fölötte tartózkodik.
A jelen dokumentumban például a bekezdések (P elem) esetén be van állítva, hogy rájuk kattintva sárgává váljon a színük. Ehhez a következő szabály kellett:
A :hover pseudo-osztályra pedig a feladatoknál lehet példát
látni, ahol a hivatkozások színe éppen olyan, mint a szövegé. Ezeket a
hivatkozásokat az egérmutató megváltozásán kívül éppen arról lehet észrevenni,
hogy kékké változik a szöveg, amikor fölötte van az egérmutató. Ezt a következő
szabályok állították be:
Az első szabály beállítja a betűket feketére. Ez nem vonatkozik a
hivatkozásokra, így a következő két szabály először a hivatkozás
alaphelyzetbeli színét, majd a meglátogatott állapotbeli színét is feketére
állítja. Ha ezzel együtt még az aláhúzást is letiltjuk
(text-decoration: none), akkor nem lehet észrevenni a hivatkozást,
csak ha fölötte van az egérmutató. Ekkor viszont az utolsó szabály érvényes rá,
ami miatt kékké változik a színe.
A következő példa eltünteti az aláhúzást, de ha az egeret fölé visszük, akkor megjelenik az aláhúzás, a háttér fehér, a szövegszín fekete lesz, míg egyébként a többi szöveggel azonos megjelenésű a hivatkozás:
További megjelenítési problémaként kell megemlíteni a képeknek hivatkozásként való használatát. Ekkor ugyanis alaphelyzetben a kép körül egy keret jelenik meg – mivel a böngésző a képet nem tudja aláhúzni, illetve eltérő színnel megjeleníteni –, amely keretnek a színe a hivatkozás szövegére beállított színnel egyezik meg. Sok esetben az ilyen keret nem szép látvány, ezért a legtöbb weboldal készítő ezeket a kereteket szereti eltüntetni. Ennek a legegyszerűbb módja, ha a kép keretét nulla szélességűre állítjuk, vagy ha az erre használandó elemtől független megoldást akarunk, akkor állítsuk be a következő szabállyal:
A fenti szabály azonban nem feltétlenül fogja minden esetben a várt eredményt adni, ezért elképzelhető, hogy tovább kell finomítani a szabályokon. Végső esetben alkalmazható az a megoldás is, hogy a HTML kódban a képet beszúró elemben állítjuk a keretet nullára.