HTML en CSS leren: De cascade

De cascade

Fons heeft twee regels voor de knoppen: een groene en een rode. De knoppen zijn rood. "Waarom die, en niet de andere?" De browser kiest niet zomaar: hij volgt een vaste volgorde, de cascade.

De laatste wint

Zeggen twee regels iets anders over dezelfde eigenschap van hetzelfde element, en zijn hun selectors even zwaar, dan wint de laatste.

Binnen een bestand is dat de regel die lager staat. Tussen bestanden is het het bestand dat later gekoppeld is: style.css staat na basis.css, en daarom wint jouw CSS van die van de toneelkring.

In de cascade onder de pagina zie je de winnaar bovenaan en de verliezer doorgestreept, met de reden.

style.css

1.knop {2  background-color: #2a6f4e;3}4.knop {5  background-color: #b8860b;6}

toneel.example

Waar een regel vandaan komt

Ook de browser heeft een stijlblad: daarom is een <h3> vet, een link onderlijnd en een <li> een punt met een bolletje.

Elke regel van de site wint daarvan, hoe eenvoudig ook. Met h3 { font-weight: normal; } is de titel niet langer vet.

En boven de stijlbladen van de site staat nog het style-attribuut, zoals je in module 2 zag. De volgorde van zwak naar sterk: de browser, de stijlbladen, het style-attribuut.

style.css

1h3 {2  font-weight: normal;3}

toneel.example

Probeer het zelf

Fons maakte de koppen ooit goud. Hij wil ze nu groen (#2a6f4e), en de titels van de stukken (h3) niet meer vet.

1h2 {2  color: #b8860b;3}

1<!DOCTYPE html>2<html lang="nl">3  <head>4    <title>Toneelkring Doek Open</title>5    <link rel="stylesheet" href="basis.css">6    <link rel="stylesheet" href="style.css">7  </head>8  <body>9    <header>10      <h1>Doek Open</h1>11      <p class="slogan">Toneelkring uit Geel, sinds 1952</p>12      <nav id="menu">13        <ul>14          <li><a href="index.html">Home</a></li>15          <li class="actief"><a href="affiche.html">Affiche</a></li>16          <li><a href="lid-worden.html">Lid worden</a></li>17          <li><a href="contact.html">Contact</a></li>18        </ul>19      </nav>20    </header>21    <main>22      <section id="affiche">23        <h2>Op de affiche</h2>24        <article class="stuk">25          <h3>De Vrek</h3>26          <p class="datum">14 tot 16 maart</p>27          <p>Een klucht naar <a href="https://nl.wikipedia.org/wiki/Molière">Molière</a>, over een man die zijn geld liever ziet dan zijn kinderen.</p>28          <blockquote>29            <p>Ik heb in jaren niet zo gelachen.</p>30          </blockquote>31          <a class="knop" href="https://tickets.doekopen.example/vrek">Tickets</a>32        </article>33        <article class="stuk">34          <h3>Moord in de Pastorij</h3>35          <p class="datum">9 tot 11 mei</p>36          <p>Iedereen heeft een alibi, behalve de kat.</p>37          <a class="knop" href="https://tickets.doekopen.example/pastorij">Tickets</a>38        </article>39      </section>40      <section id="speeldata">41        <h2>Speeldata</h2>42        <table>43          <tr>44            <th>Dag</th>45            <th>Uur</th>46          </tr>47          <tr>48            <td>Vrijdag 14 maart</td>49            <td>20 uur</td>50          </tr>51          <tr>52            <td>Zaterdag 15 maart</td>53            <td>20 uur</td>54          </tr>55          <tr>56            <td>Zondag 16 maart</td>57            <td>15 uur</td>58          </tr>59        </table>60      </section>61      <section id="downloads">62        <h2>Om te lezen</h2>63        <ul>64          <li><a href="programma.pdf">Het programmaboekje</a></li>65          <li><a href="reglement.pdf">Het reglement</a></li>66          <li><a href="https://nl.wikipedia.org/wiki/De_vrek">Over De Vrek</a></li>67          <li><a href="mailto:kassa@doekopen.example">Mail de kassa</a></li>68        </ul>69      </section>70    </main>71    <footer>72      <p>Zaal De Kroon, Kerkstraat 21, Geel</p>73    </footer>74  </body>75</html>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fbf6ee;5  color: #2b1d1d;6}7header {8  padding: 20px 16px 14px;9  background: #5c1515;10  color: #f5e6c8;11}12header h1 {13  margin: 0;14}15.slogan {16  margin: 4px 0 12px;17}18#menu ul {19  display: flex;20  flex-wrap: wrap;21  gap: 4px 18px;22  margin: 0;23  padding: 0;24  list-style: none;25}26#menu a {27  color: #f5e6c8;28}29main {30  padding: 8px 16px 24px;31}32h2 {33  color: #7a1c1c;34}35a {36  color: #7a1c1c;37}38.stuk {39  margin: 12px 0;40  padding: 12px 16px;41  border-radius: 16px;42  background: #ffffff;43}44.stuk h3 {45  margin: 0 0 4px;46}47blockquote {48  margin: 8px 0;49  padding-left: 12px;50  border-left: 3px solid #d4a017;51}52.knop {53  display: inline-block;54  padding: 6px 16px;55  border-radius: 999px;56  background-color: #7a1c1c;57  color: #ffffff;58  text-decoration: none;59}60table {61  border-collapse: collapse;62}63th,64td {65  padding: 6px 10px;66  border: 1px solid #e6d3c3;67  text-align: left;68}69footer {70  padding: 12px 16px;71  background: #5c1515;72  color: #f5e6c8;73}

toneel.example

Klaar voor meer?

De volledige les heeft 5 oefeningen, van makkelijk naar uitdagend, met hints, punten en een reeks die je kan opbouwen.

Begin aan de les

De laatste wint

Zeggen twee regels iets anders over dezelfde eigenschap van hetzelfde element, en zijn hun selectors even zwaar, dan wint de laatste.

Binnen een bestand is dat de regel die lager staat. Tussen bestanden is het het bestand dat later gekoppeld is: style.css staat na basis.css, en daarom wint jouw CSS van die van de toneelkring.

In de cascade onder de pagina zie je de winnaar bovenaan en de verliezer doorgestreept, met de reden.

style.css

1.knop {2  background-color: #2a6f4e;3}4.knop {5  background-color: #b8860b;6}

toneel.example

Waar een regel vandaan komt

Ook de browser heeft een stijlblad: daarom is een <h3> vet, een link onderlijnd en een <li> een punt met een bolletje.

Elke regel van de site wint daarvan, hoe eenvoudig ook. Met h3 { font-weight: normal; } is de titel niet langer vet.

En boven de stijlbladen van de site staat nog het style-attribuut, zoals je in module 2 zag. De volgorde van zwak naar sterk: de browser, de stijlbladen, het style-attribuut.

style.css

1h3 {2  font-weight: normal;3}

toneel.example

Probeer het zelf

Fons maakte de koppen ooit goud. Hij wil ze nu groen (#2a6f4e), en de titels van de stukken (h3) niet meer vet.

1h2 {2  color: #b8860b;3}

1<!DOCTYPE html>2<html lang="nl">3  <head>4    <title>Toneelkring Doek Open</title>5    <link rel="stylesheet" href="basis.css">6    <link rel="stylesheet" href="style.css">7  </head>8  <body>9    <header>10      <h1>Doek Open</h1>11      <p class="slogan">Toneelkring uit Geel, sinds 1952</p>12      <nav id="menu">13        <ul>14          <li><a href="index.html">Home</a></li>15          <li class="actief"><a href="affiche.html">Affiche</a></li>16          <li><a href="lid-worden.html">Lid worden</a></li>17          <li><a href="contact.html">Contact</a></li>18        </ul>19      </nav>20    </header>21    <main>22      <section id="affiche">23        <h2>Op de affiche</h2>24        <article class="stuk">25          <h3>De Vrek</h3>26          <p class="datum">14 tot 16 maart</p>27          <p>Een klucht naar <a href="https://nl.wikipedia.org/wiki/Molière">Molière</a>, over een man die zijn geld liever ziet dan zijn kinderen.</p>28          <blockquote>29            <p>Ik heb in jaren niet zo gelachen.</p>30          </blockquote>31          <a class="knop" href="https://tickets.doekopen.example/vrek">Tickets</a>32        </article>33        <article class="stuk">34          <h3>Moord in de Pastorij</h3>35          <p class="datum">9 tot 11 mei</p>36          <p>Iedereen heeft een alibi, behalve de kat.</p>37          <a class="knop" href="https://tickets.doekopen.example/pastorij">Tickets</a>38        </article>39      </section>40      <section id="speeldata">41        <h2>Speeldata</h2>42        <table>43          <tr>44            <th>Dag</th>45            <th>Uur</th>46          </tr>47          <tr>48            <td>Vrijdag 14 maart</td>49            <td>20 uur</td>50          </tr>51          <tr>52            <td>Zaterdag 15 maart</td>53            <td>20 uur</td>54          </tr>55          <tr>56            <td>Zondag 16 maart</td>57            <td>15 uur</td>58          </tr>59        </table>60      </section>61      <section id="downloads">62        <h2>Om te lezen</h2>63        <ul>64          <li><a href="programma.pdf">Het programmaboekje</a></li>65          <li><a href="reglement.pdf">Het reglement</a></li>66          <li><a href="https://nl.wikipedia.org/wiki/De_vrek">Over De Vrek</a></li>67          <li><a href="mailto:kassa@doekopen.example">Mail de kassa</a></li>68        </ul>69      </section>70    </main>71    <footer>72      <p>Zaal De Kroon, Kerkstraat 21, Geel</p>73    </footer>74  </body>75</html>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #fbf6ee;5  color: #2b1d1d;6}7header {8  padding: 20px 16px 14px;9  background: #5c1515;10  color: #f5e6c8;11}12header h1 {13  margin: 0;14}15.slogan {16  margin: 4px 0 12px;17}18#menu ul {19  display: flex;20  flex-wrap: wrap;21  gap: 4px 18px;22  margin: 0;23  padding: 0;24  list-style: none;25}26#menu a {27  color: #f5e6c8;28}29main {30  padding: 8px 16px 24px;31}32h2 {33  color: #7a1c1c;34}35a {36  color: #7a1c1c;37}38.stuk {39  margin: 12px 0;40  padding: 12px 16px;41  border-radius: 16px;42  background: #ffffff;43}44.stuk h3 {45  margin: 0 0 4px;46}47blockquote {48  margin: 8px 0;49  padding-left: 12px;50  border-left: 3px solid #d4a017;51}52.knop {53  display: inline-block;54  padding: 6px 16px;55  border-radius: 999px;56  background-color: #7a1c1c;57  color: #ffffff;58  text-decoration: none;59}60table {61  border-collapse: collapse;62}63th,64td {65  padding: 6px 10px;66  border: 1px solid #e6d3c3;67  text-align: left;68}69footer {70  padding: 12px 16px;71  background: #5c1515;72  color: #f5e6c8;73}

toneel.example