04 - CSS - eigenschappen

• ICT
• MBO
• Studiejaar 1-4

CSS-properties

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 */

}

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

Leerdoel

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

Wat weet je al over CSS-eigenschappen?

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). */

}

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.

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.

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
}

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.

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

Evaluatie

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

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.