HTML en CSS leren: CSS-regels

Wat CSS is

Gino schuift een kop koffie naar je toe. "De tekst klopt, zegt mijn neef. Maar het is zo... kaal." Je opent style.css: het is nog leeg.

Een regel

HTML zegt wat er op de pagina staat, CSS zegt hoe het eruitziet. CSS schrijf je in regels.

Een regel begint met een selector: welke elementen hij opmaakt. h1 vindt elke <h1>. Tussen { en } staat dan een eigenschap (color, de tekstkleur), een dubbele punt, een waarde (purple) en een puntkomma.

Kijk maar: de naam van de kapsalon is nu paars.

style.css

1h1 {2  color: purple;3}

kapsalon.example

De puntkomma

Een regel kan meer dan één ding veranderen. Elke eigenschap met haar waarde heet een declaratie, en na elke declaratie komt een ;.

Hier is de naam paars én staat ze in het midden (text-align: center).

Vergeet je de ; na purple, dan leest de browser purple text-align: center als één rare waarde. Die snapt hij niet, en dus doet hij allebei niet.

style.css

1h1 {2  color: purple;3  text-align: center;4}

kapsalon.example

Probeer het zelf

Je eerste eigen regel: maak de voettekst (footer) grijs met gray en zet ze in het midden. De rest van de pagina blijft zoals hij is.

1/* Jouw CSS komt hier. */

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>

kapsalon.example

Klaar voor meer?

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

Begin aan de les

Een regel

HTML zegt wat er op de pagina staat, CSS zegt hoe het eruitziet. CSS schrijf je in regels.

Kijk maar: de naam van de kapsalon is nu paars.

style.css

1h1 {2  color: purple;3}

kapsalon.example

De puntkomma

Een regel kan meer dan één ding veranderen. Elke eigenschap met haar waarde heet een declaratie, en na elke declaratie komt een ;.

Hier is de naam paars én staat ze in het midden (text-align: center).

Vergeet je de ; na purple, dan leest de browser purple text-align: center als één rare waarde. Die snapt hij niet, en dus doet hij allebei niet.

style.css

1h1 {2  color: purple;3  text-align: center;4}

kapsalon.example

Probeer het zelf

Je eerste eigen regel: maak de voettekst (footer) grijs met gray en zet ze in het midden. De rest van de pagina blijft zoals hij is.

1/* Jouw CSS komt hier. */

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>

kapsalon.example