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.
Homepage-Maken Tip
De makkelijkste manier om je eigen website te maken?
Dat is via een website bouwer als Weebly. Hiermee kun je eenvoudig via je browser door middel van drag-en-drop een website bouwen. Je kunt volledig gratis beginnen met 500MB webruimte voor je site. Zo nodig kun je een betaald pakket nemen met eigen domeinnaam, "onbeperkte" opslag (fair use policy) en e-commerce mogelijkheden.
Weebly is daarom een prima optie als je snel een website in elkaar wilt zetten. Kennis van HTML of het installeren van een eigen content management systeem is niet nodig bij Weebly.
