04 - CSS - selectoren

• ICT
• MBO
• Studiejaar 1,2

Selectoren

Leerdoel

Aan het einde van de les kun je verschillende soorten selectoren in CSS identificeren en gebruiken.

Leerdoel

Aan het einde van de les kun je verschillende soorten selectoren in CSS identificeren en gebruiken.

Welke HTML-elementen herinner je je uit voorgaande lessen?

Wij zijn nu een paar lessen bezig geweest met CSS, maar ik ben wel benieuwd hoeveel elementen we nog weten van HTML

Op welke 3 manieren kunnen we CSS toevoegen aan een HTML pagina?

Oke en de volgende vraag

Welke van de volgende is het meest geschikt voor het toepassen van dezelfde stijl op meerdere pagina's van een website?

1. inline
2. intern
3. extern
4. alle opties zijn geschikt

Selectoren in CSS

Selectoren in CSS

Leerdoel

Aan het einde van de les kun je verschillende soorten selectoren in CSS identificeren en gebruiken.

Leerdoel

Aan het einde van de les ben je in staat om CSS-selectoren te herkennen en toe te passen.

Wat zijn selectoren?

Selectors zijn specifieke patronen die worden gebruikt om HTML-elementen te selecteren en te stijlen in CSS.

Er zijn drie soorten selectoren:

• HTML Element
• ID
• Class
  

Element selectoren

Element selectoren selecteren specifieke HTML-elementen op basis van hun tag naam, bijvoorbeeld 'h1' of 'p'.

In HTML

In CSS

<h1>Header 1</h1>

h1 {

   color: blue;

}

ID selectoren

ID selectoren selecteren een specifiek HTML-element op basis van het 'id' attribuut, bijvoorbeeld '#idnaam'.

In HTML

In CSS

<h1 id="idnaam">header 1</h1>

#idnaam {

    color: blue;

    font-size: 16px;

}

Class selectoren

Class selectoren selecteren meerdere HTML-elementen op basis van het 'class' attribuut, bijvoorbeeld '.classNaam'.

In HTML

In CSS

<h1 class="classNaam">header 1</h1>

.classNaam {

    color: blue;

    font-size: 16px;

}

Opmaak definiëren met selectoren

Tag selector (HTML tag)

h2 {

  color: blue;

  font-style: italic;

}

ID selector (een per pagina)

#footer {

  color: red;

}

Class selector (meerdere)

.article {

  background-color: #cccccc;

}

Opdracht

Welke selector kan je het beste gebruiken om 1 enkel element in een webpagina te voorzien van CSS?

1. HTML-selector
2. ID-selector
3. Class-selector
4. Alle drie

Wat vonden jullie van de les? En wat zou je veranderd willen zien?