Inspirerend, verbindend en nieuwsgierig
Een leven lang leren
Bezoek de website
‹Terug naar zoeken

05 - CSS - kleuren

Levendige kleuren met CSS
1 / 11
volgende
Slide 1: Tekstslide
ICTMBOStudiejaar 1

In deze les zitten 11 slides, met interactieve quizzen en tekstslides.

Onderdelen in deze les

Levendige kleuren met CSS

Slide 1 - Tekstslide

Deze slide heeft geen instructies

Leerdoel
Aan het eind van de les weet je hoe je kleuren kunt toepassen op HTML elementen door middel van CSS.

Slide 2 - Tekstslide

Deze slide heeft geen instructies

Wat weet je al over CSS en het gebruik van kleuren?

Slide 3 - Woordweb

Deze slide heeft geen instructies

Kleur toevoegen
Met CSS kun je kleuren toevoegen aan verschillende elementen van een webpagina, zoals tekst, achtergronden en randen.

Slide 4 - Tekstslide

Deze slide heeft geen instructies

Kleuren selecteren
CSS biedt verschillende manieren om kleuren te selecteren, zoals het gebruik van kleurnamen, hexadecimale waarden en RGB-waarden.

Slide 5 - Tekstslide

Deze slide heeft geen instructies

Kleurnamen
CSS heeft een set voorgedefinieerde kleurnamen die je kunt gebruiken, zoals 'red', 'blue' en 'yellow'.
h1 {
   color: blue;
}
h1 {
   color: red;
}

Slide 6 - Tekstslide

Deze slide heeft geen instructies

Hexadecimale waarden
Een hexadecimale waarde is een combinatie van zes cijfers en/of letters die de kleur representeert. Bijvoorbeeld #FF0000 is rood.
h1 {
    /* rood */
    color: #FF0000;
}
h2 {
    /* groen */
    color: #00FF00;
}

Slide 7 - Tekstslide

Deze slide heeft geen instructies

RGB-waarden
Met RGB-waarden kun je kleuren definiëren door de hoeveelheid rood, groen en blauw aan te passen. Bijvoorbeeld rgb(255, 0, 0) is rood.
h1 {
    /* rood */
    color: rgb(255, 0, 0, );
}
h1 {
    /* groen */
    color: rgb(0, 255, 0, );
}

Slide 8 - Tekstslide

Deze slide heeft geen instructies

Oefening
Maak ik je HTML pagina drie paragrafen en gebruik daarbij het volgende:

  • Vooraf gedefinieerde kleur
  • Een RGB kleur
  • Een hexadecimale kleur

Slide 9 - Tekstslide

Deze slide heeft geen instructies

Samenvatting
Je weet nu op welke manieren je kleuren kan toepassen op HTML elementen. Hierbij hebben we de volgende manieren behandeld:
  • Vooraf gedefinieerde kleur
  • Een RGB kleur
  • Een hexadecimale kleur

Slide 10 - Tekstslide

Deze slide heeft geen instructies

Stel 1 vraag over iets dat je nog niet zo goed hebt begrepen.

Slide 11 - Open vraag

De leerlingen geven hier (in vraagvorm) aan met welk onderdeel van de stof ze nog moeite. Voor de docent biedt dit niet alleen inzicht in de mate waarin de stof de leerlingen begrijpen/beheersen, maar ook een goed startpunt voor een volgende les.