HTML en CSS leren: Stijlbladen

Een stijlblad koppelen

"Waar staat die CSS eigenlijk?", vraagt Gino. "In de HTML?" Niet echt. Daar staat alleen een verwijzing naar.

Een eigen bestand

CSS staat meestal in een eigen bestand, een stijlblad. Bij Knip & Krul heet het style.css.

Dat stijlblad werkt pas als de HTML ernaar verwijst, met <link rel="stylesheet" href="style.css"> in de <head>. rel zegt wat voor bestand het is, href waar het staat.

Het mooie: tien pagina's met dezelfde <link> delen hetzelfde stijlblad. Eén aanpassing, en de hele site verandert mee.

index.html

1<!DOCTYPE html>2<html lang="nl">3  <head>4    <title>Kapsalon Knip &amp; Krul</title>5    <link rel="stylesheet" href="basis.css">6    <link rel="stylesheet" href="style.css">7  </head>8  <body>9    <header>10      <h1 id="naam">Knip &amp; Krul</h1>11      <p class="slogan">Kapsalon in hartje Genk</p>12    </header>13    <main>14      <h2>Onze prijzen</h2>15      <ul class="prijslijst">16        <li><span class="dienst">Knippen</span> <span class="prijs">€ 28</span></li>17        <li><span class="dienst">Wassen en föhnen</span> <span class="prijs">€ 22</span></li>18        <li><span class="dienst">Kleuren</span> <span class="prijs">€ 55</span></li>19      </ul>20      <section id="afspraak">21        <h2>Afspraak maken</h2>22        <p class="uitleg">Bel ons of loop gewoon even binnen.</p>23        <a class="knop" href="tel:+3289000000">Bel ons</a>24      </section>25    </main>26    <footer>27      <p>Stationsstraat 8, Genk</p>28    </footer>29  </body>30</html>

style.css

1h1 {2  color: purple;3}

kapsalon.example

Twee andere plekken

CSS kan ook in de HTML zelf. In een <style>-element in de <head> werkt ze alleen voor die ene pagina.

Of in een style-attribuut op één element, zoals <h2 style="color: orange">. Dat lijkt handig, maar zo'n stijl wint van alles in je stijlblad, je vindt hem moeilijk terug, en je moet hem op elk element opnieuw typen.

Daarom: CSS in style.css, en geen style-attributen.

Onder de pagina staat de cascade van de tweede kop: het style-attribuut wint, h2 { color: teal; } is doorgestreept.

index.html

1<!DOCTYPE html>2<html lang="nl">3  <head>4    <title>Kapsalon Knip &amp; Krul</title>5    <link rel="stylesheet" href="basis.css">6    <style>7      h2 { color: teal; }8    </style>9  </head>10  <body>11    <header>12      <h1 id="naam">Knip &amp; Krul</h1>13      <p class="slogan">Kapsalon in hartje Genk</p>14    </header>15    <main>16      <h2>Onze prijzen</h2>17      <ul class="prijslijst">18        <li><span class="dienst">Knippen</span> <span class="prijs">€ 28</span></li>19        <li><span class="dienst">Wassen en föhnen</span> <span class="prijs">€ 22</span></li>20        <li><span class="dienst">Kleuren</span> <span class="prijs">€ 55</span></li>21      </ul>22      <section id="afspraak">23        <h2 style="color: orange">Afspraak maken</h2>24        <p class="uitleg">Bel ons of loop gewoon even binnen.</p>25        <a class="knop" href="tel:+3289000000">Bel ons</a>26      </section>27    </main>28    <footer>29      <p>Stationsstraat 8, Genk</p>30    </footer>31  </body>32</html>

kapsalon.example

Probeer het zelf

De neef maakte beide tussenkoppen groenblauw met style-attributen. Haal ze weg en zet dezelfde kleur, teal, in style.css.

1<!DOCTYPE html>2<html lang="nl">3  <head>4    <title>Kapsalon Knip &amp; Krul</title>5    <link rel="stylesheet" href="basis.css">6    <link rel="stylesheet" href="style.css">7  </head>8  <body>9    <header>10      <h1 id="naam">Knip &amp; Krul</h1>11      <p class="slogan">Kapsalon in hartje Genk</p>12    </header>13    <main>14      <h2 style="color: teal">Onze prijzen</h2>15      <ul class="prijslijst">16        <li><span class="dienst">Knippen</span> <span class="prijs">€ 28</span></li>17        <li><span class="dienst">Wassen en föhnen</span> <span class="prijs">€ 22</span></li>18        <li><span class="dienst">Kleuren</span> <span class="prijs">€ 55</span></li>19      </ul>20      <section id="afspraak">21        <h2 style="color: teal">Afspraak maken</h2>22        <p class="uitleg">Bel ons of loop gewoon even binnen.</p>23        <a class="knop" href="tel:+3289000000">Bel ons</a>24      </section>25    </main>26    <footer>27      <p>Stationsstraat 8, Genk</p>28    </footer>29  </body>30</html>

kapsalon.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

Een eigen bestand

CSS staat meestal in een eigen bestand, een stijlblad. Bij Knip & Krul heet het style.css.

Dat stijlblad werkt pas als de HTML ernaar verwijst, met <link rel="stylesheet" href="style.css"> in de <head>. rel zegt wat voor bestand het is, href waar het staat.

Het mooie: tien pagina's met dezelfde <link> delen hetzelfde stijlblad. Eén aanpassing, en de hele site verandert mee.

index.html

1<!DOCTYPE html>2<html lang="nl">3  <head>4    <title>Kapsalon Knip &amp; Krul</title>5    <link rel="stylesheet" href="basis.css">6    <link rel="stylesheet" href="style.css">7  </head>8  <body>9    <header>10      <h1 id="naam">Knip &amp; Krul</h1>11      <p class="slogan">Kapsalon in hartje Genk</p>12    </header>13    <main>14      <h2>Onze prijzen</h2>15      <ul class="prijslijst">16        <li><span class="dienst">Knippen</span> <span class="prijs">€ 28</span></li>17        <li><span class="dienst">Wassen en föhnen</span> <span class="prijs">€ 22</span></li>18        <li><span class="dienst">Kleuren</span> <span class="prijs">€ 55</span></li>19      </ul>20      <section id="afspraak">21        <h2>Afspraak maken</h2>22        <p class="uitleg">Bel ons of loop gewoon even binnen.</p>23        <a class="knop" href="tel:+3289000000">Bel ons</a>24      </section>25    </main>26    <footer>27      <p>Stationsstraat 8, Genk</p>28    </footer>29  </body>30</html>

style.css

1h1 {2  color: purple;3}

kapsalon.example

Twee andere plekken

CSS kan ook in de HTML zelf. In een <style>-element in de <head> werkt ze alleen voor die ene pagina.

Daarom: CSS in style.css, en geen style-attributen.

Onder de pagina staat de cascade van de tweede kop: het style-attribuut wint, h2 { color: teal; } is doorgestreept.

index.html

1<!DOCTYPE html>2<html lang="nl">3  <head>4    <title>Kapsalon Knip &amp; Krul</title>5    <link rel="stylesheet" href="basis.css">6    <style>7      h2 { color: teal; }8    </style>9  </head>10  <body>11    <header>12      <h1 id="naam">Knip &amp; Krul</h1>13      <p class="slogan">Kapsalon in hartje Genk</p>14    </header>15    <main>16      <h2>Onze prijzen</h2>17      <ul class="prijslijst">18        <li><span class="dienst">Knippen</span> <span class="prijs">€ 28</span></li>19        <li><span class="dienst">Wassen en föhnen</span> <span class="prijs">€ 22</span></li>20        <li><span class="dienst">Kleuren</span> <span class="prijs">€ 55</span></li>21      </ul>22      <section id="afspraak">23        <h2 style="color: orange">Afspraak maken</h2>24        <p class="uitleg">Bel ons of loop gewoon even binnen.</p>25        <a class="knop" href="tel:+3289000000">Bel ons</a>26      </section>27    </main>28    <footer>29      <p>Stationsstraat 8, Genk</p>30    </footer>31  </body>32</html>

kapsalon.example

Probeer het zelf

De neef maakte beide tussenkoppen groenblauw met style-attributen. Haal ze weg en zet dezelfde kleur, teal, in style.css.

1<!DOCTYPE html>2<html lang="nl">3  <head>4    <title>Kapsalon Knip &amp; Krul</title>5    <link rel="stylesheet" href="basis.css">6    <link rel="stylesheet" href="style.css">7  </head>8  <body>9    <header>10      <h1 id="naam">Knip &amp; Krul</h1>11      <p class="slogan">Kapsalon in hartje Genk</p>12    </header>13    <main>14      <h2 style="color: teal">Onze prijzen</h2>15      <ul class="prijslijst">16        <li><span class="dienst">Knippen</span> <span class="prijs">€ 28</span></li>17        <li><span class="dienst">Wassen en föhnen</span> <span class="prijs">€ 22</span></li>18        <li><span class="dienst">Kleuren</span> <span class="prijs">€ 55</span></li>19      </ul>20      <section id="afspraak">21        <h2 style="color: teal">Afspraak maken</h2>22        <p class="uitleg">Bel ons of loop gewoon even binnen.</p>23        <a class="knop" href="tel:+3289000000">Bel ons</a>24      </section>25    </main>26    <footer>27      <p>Stationsstraat 8, Genk</p>28    </footer>29  </body>30</html>

kapsalon.example