Workshop 4 id's en classes

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
1 / 13
volgende
Slide 1: Tekstslide
Software DeveloperMBOStudiejaar 1

In deze les zitten 13 slides, met tekstslides en 2 videos.

time-iconLesduur is: 15 min

Onderdelen in deze les

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

Slide 1 - Tekstslide

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.

Slide 2 - Tekstslide

Slide 3 - Tekstslide

Hoe laat je ze samenwerken?
Je kunt in HTML en in CSS dezelfde ID gebruiken voor de elementen die moeten samenwerken.

Slide 4 - Tekstslide

Bijvoorbeeld
HTML:
<div id="hallo">
     Ik ben een stukje tekst
</div>

CSS:
#hallo {
     color: blue;
}

Slide 5 - Tekstslide

Dit kan ook met een class
HTML:
<div class="hallo">
     Ik ben een stukje tekst
</div>

CSS:
.hallo {
     color: blue;
}

Slide 6 - Tekstslide

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;
}

Slide 7 - Tekstslide

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.

Slide 8 - Tekstslide

Slide 9 - Video

Slide 10 - Video

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.

Slide 11 - Tekstslide

Rijen met kleuren
Maak het voorbeeld hiernaast na. 

Gebruik alleen "class".

Slide 12 - Tekstslide

Rijen met kleuren
Maak het voorbeeld hiernaast na.

Gebruik "id" voor de afwijkende kleur.

Slide 13 - Tekstslide