CLASS

 

Wil je onderscheid maken en variatie aanbrengen in het formaat van elementen, zelfs al zijn hun eigenschappen vastgelegd in een stijlregel, dan kan dit dankzij het CSS-attribuut CLASS.

Met CLASS kunnen we stijlvarianten samenstellen, ze een naam naar keuze geven en toekennen aan willekeurige HTML-elementen.

Syntaxis

.CLASS-naam {declaratie}
of:
element.CLASS-naam {declaratie}

Voorbeeld 1

<style>
<!--
A {text-decoration:none;}
.CLroostr {color:red; text-decoration:underline;}
-->
</style>

Als deze regels opgenomen zijn in het stijlblok zijn sprongwoorden niet onderstreept… tot er eentje bijzondere aandacht verdient en jij beslist dat die moet onderstreept worden en in het rood verschijnen. Dat doe je dan met de inline stijlregel.

<body>
<A HREF>Dit</A> is een gewone hyperlink, maar <A HREF Class="CLroostr">deze</A> moet opvallen.
</body>

Hoe ziet het resultaat eruit?

Klik hier!


Voorbeeld 2

<style>
<!--
A {text-decoration:none;}
A.CLroostr {color:red; text-decoration:underline;}
-->
</style>

Als in het stijlblok de naam van een element voor een CLASS-naam geplaatst wordt, betekent dit: de waarde wordt alleen toegekend aan tekst die ingesloten is door het betrokken element.

</body>
Begrijp je nu waarom <i class="CLroostr">deze tekst</i> niet rood en onderstreept is en <a HREF class="CLroostr">deze</a> wel?
</body>

Begrijp je nu waarom deze tekst niet rood en onderstreept is en deze wel?