CSS-klassen: verschillende stijlen in één document

Verschillende stijlen in één document

Vermits in ons bestand stijl.css de links op een bepaalde manier gedefinieerd zijn, verschijnen die overal in de site op deze manier, dus ook in de tekst:

Probeer het zelf maar eens uit: selecteer een stukje tekst, klik op de knop ’Koppeling’ en vul het adres in van een andere pagina van uw site, bijvoorbeeld contact.html.

We zullen dus een manier moeten vinden om een link die deel uitmaakt van een menu een bepaald uiterlijk te geven, en een link die in een tekst zit een ander.

In ons voorbeeld is een menulink niet onderlijnd en staat hij in het lettertype Arial, een tekstlink maken we donkergroen, we onderstrepen hem en we gebruiken een cursief lettertype.

Om dat te bereiken gaan we een paar klassen definiëren die die eigenschappen bezitten: de klasse ’menu’ en de klasse ’inhoud’.

Klassen toekennen

Een klasse toekennen aan een HTML-element doet u als volgt:

 Zet je cursor in de tekstlink die je net aangemaakt hebt
 Klik rechts op de <a>-tag onderaan en kies ’Geavanceerde eigenschappen’.
 Selecteer ’class’ als attribuut en vul als waarde ’inhoud’ in.

 Doe nu hetzelfde met een link uit het menu, maar geef deze keer ’menu’ als waarde op.

Klassen aanmaken in het stijlblad

Nu kan u in uw stijlblad (stijl.css) het uiterlijk van deze twee klassen bepalen.

 Klik op de knop Cascades om de CSS-editor te openen
 Klik op het pijltje naast het schilderspalet en kies ’Regel’
 Selecteer ’style applied to all elements of class’ onder ’Nieuwe Stijlregel’

U merkt dat in het tekstveld automatisch een puntje verschijnt. Vul na dit punt de naam ’menu’ in. Zo wordt inderdaad een css-klasse aangeduid in een stijlblad: een naam voorafgegaan door een punt.

 klik op de knop ’Stijlregel aanmaken’; de klasse .menu verschijnt in de lijst en wordt automatisch geselecteerd
 klik nu op het stijlelement ’a’ dat u al vroeger had aangemaakt; selecteer de 2 stijldefinities die in het werkvenster verschijnen en kopieer ze
 selecteer nu opnieuw de klasse .menu, klik met de rechter muisknop in het venster ’Stijlregel’ en kies ’Plakken’

Maak nu op dezelfde manier een tweede nieuwe klasse via en geef die de naam ’.inhoud’.

 via het tabblad ’Tekst’ kiest u onder ’Aangepast lettertype gebruiken’ voor ’times new roman’
 stel de kleur in op donkergroen (#006600)
 stel de tekenstijl in op ’Cursief’
 vink onder tekstversiering ’onderstrepen’ aan
 klik OK

Nu kan u met een gerust hart het ’a’-element uit de lijst verwijderen via de knop . U hebt nu immers twee stijlen bepaald voor de links in uw website: één voor het menu en één voor de inhoud. Een algemene linkstijl is dus niet meer nodig.

Bekijk nu eens opnieuw de link die u in de inhoud van je pagina opgenomen hebt: hij heeft automatisch de kenmerken die u aan de klasse .inhoud toegekend hebt overgenomen.