Les 6
Classes en ID's
In deze les worden classes en ID's behandeld.
Stel je hebt een stijlregel waar
in staat dat alle h1's worden weergegeven in het rood. Maar nu heb je een groene h1 nodig.
Dan komen de classes in het spel, hier kun je namelijk verschillende stijlkenmerken opstellen
voor dezelfde soort tags, bijvoorbeeld h1's.
Daarna worden de ID's besproken waarmee je soortgelijke
dingen kunt bereiken.
Classes
We gaan nu verschillende varianten voor de h1 tag opgeven door middel van classes. In het voorbeeld
geven we de volledige internal Style Sheet. We maken een rode, blauwe en groene h1.
Je maakt de classes als volgt:
Voorbeeld van classes voor h1:
<html>
<head>
<title>Voorbeeld van classes</title>
<style type="text/css">
<!--
h1.rood { color: red }
h1.blauw { color: blue }
h1.groen { color: green }
-->
</style>
</head>
<body>
<h1 class="rood">Rode H1 tekst</h1>
<h1 class="blauw">Blauwe H1 tekst</h1>
<h1 class="groen">Groene H1 tekst</h1>
</body>
</html>
Resultaat:
Rode h1 tekst
Blauwe h1 tekst
Groene h1 tekst
Zoals je ziet, maken we de classes door in de head van het document na de h1 een punt
te plaatsen en dan een willekeurige naam voor de class te typen (in het voorbeeld: rood, groen
en blauw). Vervolgens komen de stijlregels voor h1.
Het enige wat je dan nog moet doen is
verwijzen naar de betreffende class als je de h1 tag in het body gedeelte zet, zoals hierboven:
<h1 class="rood">Rode h1 tekst</h1>
<h1 class="blauw">Blauwe h1 tekst</h1>
<h1 class="groen">Groene h1 tekst</h1>
N.B. De naam waarmee je verwijst naar de class, dus hier: rood, groen en blauw, moet dezelfde zijn als de naam die je hebt opgegeven in de stijlregel!!
Class voor meerdere tags
Je kunt ook een class opgeven die door meerdere HTML tags gebruikt kan worden. Je maakt hem op dezelfde manier als hierboven, alleen nu type je:
.rood { color: red }
Nu kun je de class rood gebruiken voor allerlei HTML tags, die dan een rode tekstkleur zullen gebruiken.
Een voorbeeld:
<html>
<head>
<title>Voorbeeld van classes</title>
<style type="text/css">
<!--
.rood { color: red }
-->
</style>
</head>
<body>
<h1 class="rood">Rode h1 tekst</h1>
<p class="rood">Nu krijg je rode paragraaf tekst</p>
<div class="rood">Opnieuw rode tekst</div>
</body>
</html>
Resultaat:
Rode h1 tekst
Nu krijg je rode paragraaf tekst
ID's
Met ID's kun je soortgelijke dingen bereiken als met classes. Je kunt ze het beste alleen gebruiken als je de stijl van een individuele tag wilt veranderen, omdat iedere ID uniek moet zijn.
Voorbeeld van een ID:
<html>
<head>
<title>Voorbeeld van classes</title>
<style type="text/css">
<!--
#bruinetekst { color: brown }
-->
</style>
</head>
<body>
<h1 id="bruinetekst">Bruine h1 tekst</h1>
</body>
</html>
Resultaat:
Bruine H1 tekst
N.B. Voor de ID die je opgeeft in de head sectie moet een hekje, #, staan!!
Verder geldt hier hetzelfde als bij de classes: je moet bij het verwijzen naar de ID dezelfde
naam gebruiken die je hebt opgegeven in de head, maar hier zonder hekje.
Einde les 6
In deze les heb je geleerd hoe je met classes en ID's moet werken. In de volgende les komen pseudo-classes aan de orde. Hiermee gaan we verschillend gekleurde links maken.
MijnHomepage Tip
Heb je genoeg van je hostingprovider?
Neem dan een host die wel de kwaliteit kan bieden die je zoekt. Breng je site bijvoorbeeld onder bij Alphamega Hosting. Hun klanten zijn over het algemeen erg tevreden waardoor er maar weinig mensen overstappen naar een andere webhost. En dat is altijd een goede graadmeter voor de kwaliteit van een host. Alphamega biedt zelfs een niet-tevreden-geld-terug-garantie van 100 dagen.
Het First-class hostingpakket is voor veel mensen het meest geschikte pakket. Je krijgt het volgende:
100 MB» nu 512 MB schijfruimte2 GB» nu 10 GB dataverkeer- een eigen domeinnaam
- 1000 (pop)mailboxen
- 100 MySQL databases
- hoge kwaliteit techniek en prima support (helpdesk ook telefonisch bereikbaar)
Al met al is dit een prima pakket voor nog geen tientje per maand. Bekijk de site van Alphamega Hosting voor meer informatie!
