Een class in CSS is een stukje code die je op meerdere dingen kunt toepassen. Je kunt bijvoorbeeld in je body hebben gezet dat je tekst rood moet zijn, maar je hebt hier en daar een stukje waar je je tekst geel had gewilt. Dan kun je overal natuurlijk per vak instellen dat het geel word, of je geeft elk vak een class en die spreek je dan aan in je css bestand.
Officieel moet alle opmaak sowieso in een CSS bestand staan, zodat je alle opmaak altijd vanuit 1 bestand kan sturen.
Om een object aan te sturen via een class, moet dat object wel weten welke class deze heeft. Dat kun je zo doen:
[div class="voorbeeld"> tekst [/div>
Nu doet alles in deze div was de class 'voorbeeld' verteld. Bijvoorbeeld een speciale kleur.
Je kunt ook meerdere classes in 1 object zetten:
[div class="backZwart txtRood"> tekst [/div>
Nu luistert deze div naar 'backZwart' én 'txtRood'. Als er dingen in beide classes staat, overruled de laatste class de class daarvoor. De meest recent gelezen class overruled.
Je ziet hier ook gelijk waarom het niet praktisch is om spaties in een classnaam te zetten.
Een class in een css maken is simpel. Je zet een punt neer, en dan de naam van de class:
.voorbeeld{ color: #FEDCBA; }
En als je twee classes (of meer) hebt:
.backZwart{ background: #000000; } .backRood{ background: #FF0000; } .txtZwart{ color: #000000; } .txtRood{ color: #FF0000; }
Zoals wel te zien, zijn het korte maar duidelijke namen. 'vakWaarinDeTekstRoodWordt' is ook duidelijk, maar niet echt meer praktisch. Ook is het een 'regel' om geen spaties te gebruiken, en het eerste woord in kleine letters en daarna elke woord laten beginnen met een hoofdletter. Dit samen verhoogt de leesbaarheid, voor jezelf, maar ook voor anderen die misschien een keer in je code kijken om je te helpen.
Het is ook mogelijk om je class alleen te laten werken voor 1 (of meerdere) objecten. Uiteraard is het logischer om gewoon alleen de dingen die een class moeten hebben die class te geven, maar om toch een voorbeeld aan te geven:
div.voorbeeld{ color: #FEDCBA; }