Workshop 4 id's en classes

• Software Developer
• MBO
• Studiejaar 1

Id's en classes in CSS en HTML

Om CSS en HTML goed met elkaar te laten samenwerken moet je zogenaamde id's en/of classes aanmaken. Hiermee koppel je css-tags aan html-elementen.

1. Docent doet eerst voor
   
2. Dan samen doen
   
3. Daarna alleen doen
   

Wat is HTML

HTML betekent HyperText Markup Language. HTML wordt gebruikt om structuur aan te brengen binnen je website. In feite is dit de basis van jouw website.

Hoe laat je ze samenwerken?

Je kunt in HTML en in CSS dezelfde ID gebruiken voor de elementen die moeten samenwerken.

Bijvoorbeeld

HTML:

<div id="hallo">

     Ik ben een stukje tekst

</div>

CSS:

#hallo {

     color: blue;

}

Dit kan ook met een class

HTML:

<div class="hallo">

     Ik ben een stukje tekst

</div>

CSS:

.hallo {

     color: blue;

}

HTML:

<div id="hallo">

     Ik ben een stukje tekst

</div>

CSS:

#hallo {

     color: blue;

}

HTML:

<div class="hallo">

     Ik ben een stukje tekst

</div>

CSS:

.hallo {

     color: blue;

}

ID vs Class

Een ID gebruik je maar eenmaal binnen een webpagina. Slechts 1 element wordt aangesproken.

Een class is herbruikbaar en dus voor meerdere elementen tegelijk toepasbaar.

Rijen met kleuren

Maak drie blokken naast elkaar en drie blokken onder elkaar. Dus 9 blokken in totaal. Kleur elke rij in een andere kleur.

Gebruik alleen "class"!

Zie de voorbeelden hiernaast.

Rijen met kleuren

Maak het voorbeeld hiernaast na. 

Gebruik alleen "class".

Rijen met kleuren

Maak het voorbeeld hiernaast na.

Gebruik "id" voor de afwijkende kleur.