Deze les is gemaakt door: V van Dalen

Cssles 3; Classes en ID(meerdere stijlen gebruiken)!

Classes

Er is echter nog een handige vorm van css; Een soort samenvoeging van Inline stylesheets en embedded/linked; classes!
Classes is erg handig zodra uw site gebruik maakt van meerdere lettertypes groottes en kleuren! We maken dus een functie en u kunt zelf in de html aangeven waar u de letters bijvoorbeeld rood wilt hebben en waar u de letters blauw wilt hebben!!

Een voorbeeld!
Zet dit in de html; In de <head>

<style type="text/css">
<!--
a.rood{color:red}
b.zwart{color:black}
//-->
</style>

Zet dit waar je maar wilt in de body!

<a class="rood">Dit is rood</a>
<b class="zwart">maar dit is zwart!</b>
Dan krijgt u dit;
Dit is rood maar dit is zwart!  

Door in de css de code a.rood{color:red} te plaatsen kunt via een simpele code in de body het effect krijgen!

TIP; U hoeft niet een letter toe te voegen. Een punt is ook genoeg, bijvoorbeeld; .rood{color:red}. Nu kunt u de rode kleur ook activeren door elke andere letter in het alfabet. Bijvoorbeeld <p class="rood">Dit is rood</p>, want dan krijgt u dit:

Dit is rood

De letter p wordt trouwens het meest gebruikt! Ook is het niet erg handig een a te gebruiken, want die wordt al gebruikt voor de links!

Id

We kunnen inplaats van een class ook een Id gebruiken. Een uniek nummer, zoiets als een IP. Het werk eigenlijk hetzelfde als een class, maar nu geven we een uniek nummer als selector!
Dus zet dit in de <head>
<style type="text/css">
<!--
#12345{color:yellow}
#54321{color:green}
//-->
</style>

Dit in de body! 
<b id="#12345">Ik ben geel </b><i id="#54321>en jij lekker niet</i>

Ik ben geel en jij lekker niet

Welke gaat boven de ander??

Zoals u in deze les en les 2 heeft gezien, zijn er verschillende csstoepassingen. We zetten ze even op een rijtje!
  1. Inline stylesheet
  2. ID als css
  3. CLASS als css
  4. Embedded en linked stylesheet
Oftewel; Inline gaat boven alles. Daarna komt Id, als derde Class en als laatste de embedded en linked stylesheet! Dus Inline overschrijft alles, ook al heeft u een linked stylesheet!

Wat heeft u geleerd?
<><Dat er classes en Id's zijn en dat daar leuke dingen mee mogelijk zijn!
<><Dat sommige toepassingen van css boven de ander gaan!

Dit was les 3. In de volgende lessen gaan we de selectors en de properties aan de orde stellen, zodat u meer kunt doen dan alleen letterkleuren maken!

----------------------------------------------------------------------------------------------------------------------------------------

Woordenlijst
IP- Uniek nummer dat u krijgt via uw internetprovider.

<Vorige les||volgende les>