HTML en CSS leren: Achtergronden en eenheden

Achtergronden en eenheden

"Bij mij in de zaak is het niet wit", zegt Gino. "Roze tegels, een groene balie." De site mag ook wat kleur achter de letters.

Een achtergrondkleur

color kleurt de letters. background-color kleurt het vlak erachter: het hele blok van het element.

Hier krijgt de pagina (body) een zachte crèmekleur, en de kop (header) een petrolgroene balk met witte letters.

Kies je een donkere achtergrond, geef de tekst dan een lichte kleur. Anders leest niemand nog iets.

style.css

1body {2  background-color: #fff7f0;3}4header {5  background-color: #2a9d8f;6  color: white;7}

kapsalon.example

px, rem en %

Een maat heeft altijd een eenheid, vlak achter het getal, zonder spatie. px is een vaste maat: 24px is altijd 24 pixels.

rem rekent met de standaardgrootte van de tekst, meestal 16 px. 2.5rem is dus 2,5 × 16 = 40 px. Zet iemand zijn gsm op grotere letters, dan groeit alles in rem mee.

% rekent met de ouder. width: 50% maakt een blok half zo breed als het blok waar het in staat, op elk scherm.

Onder de pagina staat het boxmodel van de afspraak: zet het scherm smaller met Breedte, en de breedte rekent mee.

style.css

1#naam {2  font-size: 2.5rem;3}4#afspraak {5  width: 50%;6  background-color: #fde2e4;7}

kapsalon.example

Probeer het zelf

Geef de prijslijst (.prijslijst) een lichtroze achtergrond (#fde2e4) en maak ze 80% zo breed als de pagina, op elk scherm.

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 achtergrondkleur

color kleurt de letters. background-color kleurt het vlak erachter: het hele blok van het element.

Hier krijgt de pagina (body) een zachte crèmekleur, en de kop (header) een petrolgroene balk met witte letters.

Kies je een donkere achtergrond, geef de tekst dan een lichte kleur. Anders leest niemand nog iets.

style.css

1body {2  background-color: #fff7f0;3}4header {5  background-color: #2a9d8f;6  color: white;7}

kapsalon.example

px, rem en %

Een maat heeft altijd een eenheid, vlak achter het getal, zonder spatie. px is een vaste maat: 24px is altijd 24 pixels.

rem rekent met de standaardgrootte van de tekst, meestal 16 px. 2.5rem is dus 2,5 × 16 = 40 px. Zet iemand zijn gsm op grotere letters, dan groeit alles in rem mee.

% rekent met de ouder. width: 50% maakt een blok half zo breed als het blok waar het in staat, op elk scherm.

Onder de pagina staat het boxmodel van de afspraak: zet het scherm smaller met Breedte, en de breedte rekent mee.

style.css

1#naam {2  font-size: 2.5rem;3}4#afspraak {5  width: 50%;6  background-color: #fde2e4;7}

kapsalon.example

Probeer het zelf

Geef de prijslijst (.prijslijst) een lichtroze achtergrond (#fde2e4) en maak ze 80% zo breed als de pagina, op elk scherm.

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