05 - CSS - kleuren

• ICT
• MBO
• Studiejaar 1

Levendige kleuren met CSS

Leerdoel

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

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

Kleur toevoegen

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

Kleuren selecteren

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

Kleurnamen

CSS heeft een set voorgedefinieerde kleurnamen die je kunt gebruiken, zoals 'red', 'blue' en 'yellow'.

h1 {

   color: blue;

}

h1 {

   color: red;

}

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;

}

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, );

}

Oefening

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

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

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

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

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.