Terug naar beginpagina Homepage-Maken.nl
Versio Webhosting   

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

Opnieuw rode 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.

Klik hier om te starten met je Weebly website!

Zoekfunctie en Overige Info


Copyright © Homepage-Maken.nl 2000-2018 · Privacybeleid

Deze pagina voldoet aan de XHTML 1.0 richtlijnen     Deze pagina voldoet aan de CSS richtlijnen

[Naar boven]  [Home]