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

04 - CSS - eigenschappen

CSS-properties
1 / 13
volgende
Slide 1: Tekstslide
ICTMBOStudiejaar 1-4

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

time-iconLesduur is: 60 min

Onderdelen in deze les

CSS-properties

Slide 1 - Tekstslide

Deze slide heeft geen instructies

Plaats de selectoren bij de juiste benaming
Descendant
Class
Id
Element
Child
#unieke-id {
  /* CSS-props */
}
p {
  /* CSS-props */
}
.knop {
  /* CSS-props */
}
div h3 {
  /* CSS-stijlen */
}
ul > li {
  /* CSS-stijlen */
}

Slide 2 - Sleepvraag

Deze slide heeft geen instructies

Plaats de omschrijvingen bij de juiste benamingen
Intern
Inline
Extern
CSS code wordt direct in de HTML tag geplaats
CSS code wordt in een extern bestand geplaatst
CSS code staat in de head sectie van HTML

Slide 3 - Sleepvraag

Deze slide heeft geen instructies

Leerdoel
  • Begrijpen van de basisprincipes van CSS-eigenschappen
  • Toepassen van CSS-eigenschappen op HTML-elementen
  • Vertalen van functionele omschrijvingen naar CSS-eigenschappen

Slide 4 - Tekstslide

Deze slide heeft geen instructies

Wat weet je al over CSS-eigenschappen?

Slide 5 - Woordweb

Deze slide heeft geen instructies

Inleiding tot CSS-eigenschappen
CSS-eigenschappen zijn de kenmerken die worden toegepast op HTML-elementen om hun uiterlijk te veranderen, zoals kleur, grootte, positie, enz.
p {
  font-family: Arial;         /* Bepaalt het lettertype dat wordt gebruikt. In dit geval Arial */
  font-size: 16px;              /* Bepaalt de grootte van de tekst in paragrafen (16 pixels). */
  color: #333;                    /* Bepaalt de kleur van de tekst in paragrafen (#333 is een grijze kleur). */
  text-align: center;        /* Bepaalt de uitlijning van de tekst in paragrafen (gecentreerd). */
  line-height: 1.5;             /* Bepaalt de afstand tussen de regels van de tekst in paragrafen 
                                               (1.5 keer de lettergrootte). */
}

Slide 6 - Tekstslide

Deze slide heeft geen instructies

Hoe werken CSS-eigenschappen?
CSS-eigenschappen worden gedefinieerd met een naam en een waarde, bijvoorbeeld 'background-color: red;' waar 'background-color' de eigenschap is en 'red' de waarde.

Slide 7 - Tekstslide

Deze slide heeft geen instructies

Toepassing van CSS-eigenschappen
CSS-eigenschappen kunnen worden toegepast via inline-stijlen, interne stijlbladen of externe stijlbladen om de lay-out en stijl van een webpagina te beïnvloeden.

Slide 8 - Tekstslide

Deze slide heeft geen instructies

CSS: o.a. kleur, lettertype, achtergrond
p {
    font-size: 32px;
    color: white;
    background-color: #009;
    font-family: Verdana;
    font-weight: bold;
    font-style: italic;
    text-align: centre
}

Slide 9 - Tekstslide

Deze slide heeft geen instructies

Game
We gaan nu eens kijken of we een CSS-property kunnen plaatsen bij de juiste omschrijving. Jullie krijgen als team een formulier met een aantal omschrijvingen van CSS-property. We kiezen telkens een nieuwe property en gaan kijken of jullie daar de beschrijving van kunnen vinden.

Slide 10 - Tekstslide

Deze slide heeft geen instructies

Opdracht 1

Maak een website met daarin minstens 10 verschillende CSS eigenschappen. 

Lever de opdracht in via Teams
Opdracht 2

Je krijgt via Teams een webpagina gedeeld. Daarin staan omschrijvingen van CSS-properties, kan jij de juiste properties bij de juiste omschrijvingen plaatsen?

Lever de opdracht in via Teams

Slide 11 - Tekstslide

Deze slide heeft geen instructies

Evaluatie
Jullie zijn bekent geraakt met een aantal voorbeelden van CSS-eigenschappen

Slide 12 - Tekstslide

Deze slide heeft geen instructies

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

Slide 13 - 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.