CSS elementen selecteren met #id en .class

Welke HTML elementen gaan we gebruiken?

<h1>Pas een krantje aan<h1>
  <h2>Vandaag</h2>
  <p>rood</p>
  <p id="lucht">De lucht is blauw</p>
  <p class="maandag">maandag</p> 

CSS

p {
  color:red;
  background:lightgrey;
}
#lucht {
  color:purple;
}
.maandag {
  color : orange;
}
  • De CSS voor P kleurt alle P’s. Dat wil je niet altijd.
  • #lucht kleurt alleen deze ene P. Dit gaat op #id. Je mag elke #id maar 1x gebruiken.
  • .class kleurt alle P’s van deze class. Je kunt die dus vaker gebruiken.

Opdracht

Maak je html en css in codepen zo, dat je alle 3 de voorbeelden werkend krijgt.

Resultaat