Jos verkkosivuston kävijän selain ei löydä viitteitä hyperlinkkien värisuunnittelusta sivukoodista, se käyttää oletusarvoja. Nämä arvot ovat sinisiä passiivisille linkeille, punaiset aktiivisille (hiiren päällä) linkeille ja magentanväriset sävyt jo vierailleille linkeille. Tätä värimaailmaa ei aina yhdistetä sivusuunnittelun värimalliin, joten koodi sisältää yleensä lohkon tyylityypin kuvauksia.
Ohjeet
Vaihe 1
Luo selaimelle joukko ohjeita, jotka kuvaavat linkkien värit kolmessa tilassa. Se voi esimerkiksi näyttää tältä: a: link {color: Red;}
a: käynyt {väri: keltainen;}
a: hover {color: Orange;} Tällöin jokaisen rivin alussa olevaa "a": ta kutsutaan "valitsimeksi" ja se määrittää tunnisteen, johon selaimen tulisi käyttää tyylikkäitä kuvauksia, jotka on suljettu aaltosulkeisiin. "A" on hyperlinkkitagi. Kaksoispisteellä erotettuun valitsimeen lisättyä sanaa kutsutaan "pseudoluokaksi" - jonka selain käyttää määrittämään, mihin linkkitilaan tyyli kiharaisissa aaltosulkeissa kuuluu. link vastaa tavallista linkkiä, vieraili linkissä, jossa on jo käynyt, ja vie linkki, kun kohdistin on sen päällä. Kihara-olkainten sisällä olevalle väriparametrille määritetyt värit voidaan määrittää joko värisävyn nimellä tai sen heksadesimaalikoodilla.
Vaihe 2
Jos haluat määrittää eri värejä sivun eri linkkiryhmille, määritä kullekin ryhmälle oma nimitys ("luokka") ja kirjoita erillinen kuvaus tyyleistä kullekin niistä. Nimeä esimerkiksi yksi ryhmä LinksRed ja toinen LinksGreen. Sitten tyylin kuvaus näyttää tältä: a. LinksRed: link {color: Red;}
a. LinksRed: käynyt {väri: keltainen;}
a. LinksRed: hover {väri: Oranssi;} a. LinksGreen: linkki {väri: Vihreä;}
a. LinksGreen: käynyt {color: DarkGreen;}
a. LinksGreen: hover {color: Lime;} Ja kunkin ryhmän linkkien tunnisteissa sinun on ilmoitettava mihin luokkaan he kuuluvat. Esimerkiksi: Punainen linkki
Vihreä linkki
Vaihe 3
Nämä ohjeet on kirjoitettu CSS: ään (CSS-tyylitaulukot), joten ne on sijoitettava tyylitagin sisään, joka erottaa ne sivun lähdekoodin muista ohjeista HTML-muodossa (HyperText Markup Language):
a. LinksRed: linkki {väri: Punainen;}
a. LinksRed: käynyt {väri: keltainen;}
a. LinksRed: hover {väri: Oranssi;} a. LinksGreen: linkki {väri: Vihreä;}
a. LinksGreen: käynyt {color: DarkGreen;}
a. LinksGreen: hover {väri: Lime;}
Vaihe 4
Sijoita valmis linkkityylin kuvauslohko sivun lähdekoodin otsikko-osaan - sitä rajaavat ja -tagit.
