HTML en CSS leren: Tekst

Tekst opmaken

"Op mijn visitekaartje staat alles in zo'n mooi rond lettertype", zegt Gino. "En de prijzen zijn er goed leesbaar." Tijd om aan de letters zelf te werken.

Het lettertype

font-family kiest het lettertype. Je geeft een lijst, met komma's ertussen: de browser neemt het eerste dat de computer heeft.

Sluit altijd af met een familie: serif (met schreefjes), sans-serif (zonder) of monospace (elke letter even breed). Die bestaat overal.

Zet je het lettertype op body, dan erft alle tekst op de pagina het mee.

style.css

1body {2  font-family: Georgia, serif;3}

kapsalon.example

Grootte en gewicht

font-size zet hoe groot de letters zijn, bijvoorbeeld 40px. Gewone tekst is 16 px.

font-weight zet hoe dik ze zijn: normal of bold, of een getal van 100 tot 900. 400 is normaal, 700 is vet.

Hier is de naam groter en zijn de tussenkoppen niet meer vet: koppen zijn dat standaard wel.

style.css

1h1 {2  font-size: 40px;3}4h2 {5  font-weight: normal;6}

kapsalon.example

Uitlijnen en regelhoogte

text-align zet tekst links (left), in het midden (center) of rechts (right) binnen haar blok.

line-height zet de afstand tussen de regels. Een getal zonder eenheid, zoals 1.6, betekent 1,6 keer de lettergrootte. Let op: met een punt, niet met een komma.

Iets ruimere regels lezen een stuk prettiger, zeker op een gsm.

style.css

1header {2  text-align: center;3}4p {5  line-height: 1.6;6}

kapsalon.example

Probeer het zelf

Maak de prijslijst (ul) beter leesbaar: lettertype Verdana, sans-serif, letters van 18px en een regelhoogte van 1.6.

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 5 oefeningen, van makkelijk naar uitdagend, met hints, punten en een reeks die je kan opbouwen.

Begin aan de les

HTML en CSS leren: Tekst

Tekst opmaken

"Op mijn visitekaartje staat alles in zo'n mooi rond lettertype", zegt Gino. "En de prijzen zijn er goed leesbaar." Tijd om aan de letters zelf te werken.

Het lettertype

font-family kiest het lettertype. Je geeft een lijst, met komma's ertussen: de browser neemt het eerste dat de computer heeft.

Sluit altijd af met een familie: serif (met schreefjes), sans-serif (zonder) of monospace (elke letter even breed). Die bestaat overal.

Zet je het lettertype op body, dan erft alle tekst op de pagina het mee.

style.css

1body {2  font-family: Georgia, serif;3}

kapsalon.example

Grootte en gewicht

font-size zet hoe groot de letters zijn, bijvoorbeeld 40px. Gewone tekst is 16 px.

font-weight zet hoe dik ze zijn: normal of bold, of een getal van 100 tot 900. 400 is normaal, 700 is vet.

Hier is de naam groter en zijn de tussenkoppen niet meer vet: koppen zijn dat standaard wel.

style.css

1h1 {2  font-size: 40px;3}4h2 {5  font-weight: normal;6}

kapsalon.example

Uitlijnen en regelhoogte

text-align zet tekst links (left), in het midden (center) of rechts (right) binnen haar blok.

line-height zet de afstand tussen de regels. Een getal zonder eenheid, zoals 1.6, betekent 1,6 keer de lettergrootte. Let op: met een punt, niet met een komma.

Iets ruimere regels lezen een stuk prettiger, zeker op een gsm.

style.css

1header {2  text-align: center;3}4p {5  line-height: 1.6;6}

kapsalon.example

Probeer het zelf

Maak de prijslijst (ul) beter leesbaar: lettertype Verdana, sans-serif, letters van 18px en een regelhoogte van 1.6.

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 5 oefeningen, van makkelijk naar uitdagend, met hints, punten en een reeks die je kan opbouwen.

Begin aan de les