Summary  
This chapter covers CSS properties for adjusting text spacing and adding depth—specifically line-height, letter-spacing, word-spacing, and text-shadow—to improve readability.

General domain of usage  
Web typography and front-end design.

Watch this video to see how `line-height`, `letter-spacing`, `word-spacing`, and `text-shadow` work in real CSS examples. You'll learn how each property affects readability, get tips for choosing values. Use simple css examples. Do not provide full html document stucture. Focus on css mainly

Goede typografie verbetert de leesbaarheid en visuele structuur.
In dit hoofdstuk richten we ons op eigenschappen die de afstand en subtiele visuele effecten voor tekst regelen: `line-height`, `letter-spacing`, `word-spacing` en `text-shadow`.

Deze eigenschappen zorgen ervoor dat tekst gemakkelijker te lezen is en visueel in balans blijft.

## line-height
`line-height` regelt de verticale afstand tussen tekstregels. Browsers stellen standaard een waarde in op basis van het lettertype, maar je kunt deze aanpassen met verschillende formaten:

```css
line-height: multiplier | value in px | value in em | percent 
```
- `multiplier` een eenheidsloze waarde zoals `1.5` vermenigvuldigt de `font-size`;
- `value in px` specifieke hoogte, bijvoorbeeld `24px`;
- `value in em` relatieve waarde, vergelijkbaar met multiplier (`1.4em = font-size × 1.4`);
- `percent` werkt als multiplier (`120% = font-size × 1.2`).

PCFkb2N0eXBlIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8dWw+CiAgICAgIDxsaT4KICAgICAgICA8ZGl2IGNsYXNzPSJjb250YWluZXIgbGgtbXVsdGlwbGllciI+CiAgICAgICAgICA8aDM+TXVsdGlwbGllcjwvaDM+CiAgICAgICAgICA8cD4KICAgICAgICAgICAgIlN1Y2Nlc3MgaXMgbm90IHRoZSBrZXkgdG8gaGFwcGluZXNzLiBIYXBwaW5lc3MgaXMgdGhlIGtleSB0bwogICAgICAgICAgICBzdWNjZXNzLiBJZiB5b3UgbG92ZSB3aGF0IHlvdSBhcmUgZG9pbmcsIHlvdSB3aWxsIGJlIHN1Y2Nlc3NmdWwuIiAtCiAgICAgICAgICAgIEFsYmVydCBTY2h3ZWl0emVyCiAgICAgICAgICA8L3A+CiAgICAgICAgPC9kaXY+CiAgICAgIDwvbGk+CiAgICAgIDxsaT4KICAgICAgICA8ZGl2IGNsYXNzPSJjb250YWluZXIgbGgtcHgiPgogICAgICAgICAgPGgzPlBpeGVsczwvaDM+CiAgICAgICAgICA8cD4KICAgICAgICAgICAgIkkgaGF2ZSBub3QgZmFpbGVkLiBJJ3ZlIGp1c3QgZm91bmQgMTAsMDAwIHdheXMgdGhhdCB3b24ndCB3b3JrLiIgLQogICAgICAgICAgICBUaG9tYXMgRWRpc29uCiAgICAgICAgICA8L3A+CiAgICAgICAgPC9kaXY+CiAgICAgIDwvbGk+CiAgICAgIDxsaT4KICAgICAgICA8ZGl2IGNsYXNzPSJjb250YWluZXIgbGgtZW0iPgogICAgICAgICAgPGgzPkVNPC9oMz4KICAgICAgICAgIDxwPgogICAgICAgICAgICAiSW4gdGhlIG1pZGRsZSBvZiBldmVyeSBkaWZmaWN1bHR5IGxpZXMgb3Bwb3J0dW5pdHkuIiAtIEFsYmVydAogICAgICAgICAgICBFaW5zdGVpbgogICAgICAgICAgPC9wPgogICAgICAgIDwvZGl2PgogICAgICA8L2xpPgogICAgICA8bGk+CiAgICAgICAgPGRpdiBjbGFzcz0iY29udGFpbmVyIGxoLXBlcmNlbnQiPgogICAgICAgICAgPGgzPlBlcmNlbnQ8L2gzPgogICAgICAgICAgPHA+CiAgICAgICAgICAgICJEbyBub3QgZ28gd2hlcmUgdGhlIHBhdGggbWF5IGxlYWQsIGdvIGluc3RlYWQgd2hlcmUgdGhlcmUgaXMgbm8KICAgICAgICAgICAgcGF0aCBhbmQgbGVhdmUgYSB0cmFpbC4iIC0gUmFscGggV2FsZG8gRW1lcnNvbgogICAgICAgICAgPC9wPgogICAgICAgIDwvZGl2PgogICAgICA8L2xpPgogICAgPC91bD4KICA8L2JvZHk+CjwvaHRtbD4=

LyogQ3VycmVudCBmb2N1cyAqLwoubGgtbXVsdGlwbGllciBwIHsKICBsaW5lLWhlaWdodDogMS42Owp9CgoubGgtcHggcCB7CiAgbGluZS1oZWlnaHQ6IDI4cHg7Cn0KCi5saC1lbSBwIHsKICBsaW5lLWhlaWdodDogMS44ZW07Cn0KCi5saC1wZXJjZW50IHAgewogIGxpbmUtaGVpZ2h0OiAxODAlOwp9CgovKiBBZGRpdGlvbmFsIHN0eWxlcyBmb3IgYmV0dGVyIGFwcGVhcmFuY2UgKG5vdCB0aGUgY3VycmVudCBmb2N1cykgKi8KYm9keSB7CiAgZm9udC1mYW1pbHk6ICdJbnRlcicsIHNhbnMtc2VyaWY7CiAgZGlzcGxheTogZmxleDsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGhlaWdodDogMTAwdmg7CiAgYmFja2dyb3VuZC1jb2xvcjogI2YzZjNmMzsKICBtYXJnaW46IDA7CiAgdGV4dC1hbGlnbjogY2VudGVyOwp9Cgp1bCB7CiAgZGlzcGxheTogZmxleDsKICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWFyb3VuZDsKICBsaXN0LXN0eWxlOiBub25lOwogIHBhZGRpbmctbGVmdDogMDsKICBmbGV4LXdyYXA6IHdyYXA7CiAgZ2FwOiAyMHB4Owp9CgouY29udGFpbmVyIHsKICB3aWR0aDogMjYwcHg7CiAgYm9yZGVyOiAxcHggZGFzaGVkIGRhcmtzYWxtb247CiAgcGFkZGluZzogMTVweDsKICBib3JkZXItcmFkaXVzOiA4cHg7CiAgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7CiAgYm94LXNoYWRvdzogMnB4IDJweCA4cHggcmdiYSgwLCAwLCAwLCAwLjEpOwogIHRleHQtYWxpZ246IGxlZnQ7Cn0KCmgzIHsKICB0ZXh0LWFsaWduOiBjZW50ZXI7CiAgbWFyZ2luLWJvdHRvbTogMTBweDsKICBmb250LXNpemU6IDE4cHg7Cn0=

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      /* Current focus */
      .lh-multiplier p {
        line-height: 1.6;
      }

      .lh-px p {
        line-height: 28px;
      }

      .lh-em p {
        line-height: 1.8em;
      }

      .lh-percent p {
        line-height: 180%;
      }

      /* Additional styles for better appearance (not the current focus) */
      body {
        font-family: 'Inter', sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f3f3f3;
        margin: 0;
        text-align: center;
      }

      ul {
        display: flex;
        justify-content: space-around;
        list-style: none;
        padding-left: 0;
        flex-wrap: wrap;
        gap: 20px;
      }

      .container {
        width: 260px;
        border: 1px dashed darksalmon;
        padding: 15px;
        border-radius: 8px;
        background-color: white;
        box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
        text-align: left;
      }

      h3 {
        text-align: center;
        margin-bottom: 10px;
        font-size: 18px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <div class="container lh-multiplier">
          <h3>Vermenigvuldiger</h3>
          <p>
            "Succes is niet de sleutel tot geluk. Geluk is de sleutel tot succes. Als je houdt van wat je doet, zul je succesvol zijn." – Albert Schweitzer
          </p>
        </div>
      </li>
      <li>
        <div class="container lh-px">
          <h3>Pixels</h3>
          <p>
            "Ik heb niet gefaald. Ik heb alleen 10.000 manieren gevonden die niet werken." – Thomas Edison
          </p>
        </div>
      </li>
      <li>
        <div class="container lh-em">
          <h3>EM</h3>
          <p>
            "In het midden van elke moeilijkheid ligt een kans." – Albert Einstein
          </p>
        </div>
      </li>
      <li>
        <div class="container lh-percent">
          <h3>Procent</h3>
          <p>
            "Ga niet waar het pad je naartoe leidt, maar ga waar geen pad is en laat een spoor achter." – Ralph Waldo Emerson
          </p>
        </div>
      </li>
    </ul>
  </body>
</html>


## letter-spacing
`letter-spacing` bepaalt de horizontale afstand tussen tekens.

```css
letter-spacing: normal | value in px | value in em
``` 
- `normal`: standaardafstand;
- `value in px`: vaste extra afstand;
- `value in em`: afstand relatief aan `font-size`.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8dWw+CiAgICAgIDxsaT4KICAgICAgICA8ZGl2IGNsYXNzPSJjb250YWluZXIgbHMtbm9ybWFsIj4KICAgICAgICAgIDxoMz5Ob3JtYWw8L2gzPgogICAgICAgICAgPHAgY2xhc3M9InF1b3RlIj4KICAgICAgICAgICAgIkNoYW5nZSB0aGUgd29ybGQgYnkgYmVpbmcgeW91cnNlbGYuIiDigJMgQW15IFBvZWhsZXIKICAgICAgICAgIDwvcD4KICAgICAgICA8L2Rpdj4KICAgICAgPC9saT4KICAgICAgPGxpPgogICAgICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciBscy1weCI+CiAgICAgICAgICA8aDM+NHB4PC9oMz4KICAgICAgICAgIDxwIGNsYXNzPSJxdW90ZSI+CiAgICAgICAgICAgICJFdmVyeXRoaW5nIHlvdSBjYW4gaW1hZ2luZSBpcyByZWFsLiIg4oCTIFBhYmxvIFBpY2Fzc28KICAgICAgICAgIDwvcD4KICAgICAgICA8L2Rpdj4KICAgICAgPC9saT4KICAgICAgPGxpPgogICAgICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciBscy1lbSI+CiAgICAgICAgICA8aDM+MC4zZW08L2gzPgogICAgICAgICAgPHAgY2xhc3M9InF1b3RlIj4KICAgICAgICAgICAgIldoYXRldmVyIHlvdSBhcmUsIGJlIGEgZ29vZCBvbmUuIiDigJMgQWJyYWhhbSBMaW5jb2xuCiAgICAgICAgICA8L3A+CiAgICAgICAgPC9kaXY+CiAgICAgIDwvbGk+CiAgICA8L3VsPgogIDwvYm9keT4KPC9odG1sPg==

LyogQ3VycmVudCBmb2N1cyAqLwoubHMtbm9ybWFsIC5xdW90ZSB7CiAgbGV0dGVyLXNwYWNpbmc6IG5vcm1hbDsKfQoKLmxzLXB4IC5xdW90ZSB7CiAgbGV0dGVyLXNwYWNpbmc6IDRweDsKfQoKLmxzLWVtIC5xdW90ZSB7CiAgbGV0dGVyLXNwYWNpbmc6IDAuM2VtOwp9CgovKiBBZGRpdGlvbmFsIHN0eWxlcyBmb3IgYmV0dGVyIGFwcGVhcmFuY2UgKG5vdCB0aGUgY3VycmVudCBmb2N1cykgKi8KYm9keSB7CiAgZm9udC1mYW1pbHk6ICdQbGF5ZmFpciBEaXNwbGF5Jywgc2VyaWY7CiAgZGlzcGxheTogZmxleDsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGJhY2tncm91bmQtY29sb3I6ICNmNmY2ZjY7CiAgbWFyZ2luOiAwOwogIHRleHQtYWxpZ246IGNlbnRlcjsKfQoKdWwgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuOwogIGxpc3Qtc3R5bGU6IG5vbmU7CiAgcGFkZGluZy1sZWZ0OiAwOwogIGZsZXgtd3JhcDogd3JhcDsKICBnYXA6IDIwcHg7Cn0KCi5jb250YWluZXIgewogIHdpZHRoOiAyODBweDsKICBib3JkZXI6IDFweCBkYXNoZWQgZGFya3NhbG1vbjsKICBwYWRkaW5nOiAyMHB4OwogIGJvcmRlci1yYWRpdXM6IDhweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiB3aGl0ZTsKICBib3gtc2hhZG93OiAycHggMnB4IDhweCByZ2JhKDAsIDAsIDAsIDAuMSk7Cn0KCmgzIHsKICB0ZXh0LWFsaWduOiBjZW50ZXI7CiAgbWFyZ2luLWJvdHRvbTogMTBweDsKICBmb250LXNpemU6IDE4cHg7Cn0KCi5xdW90ZSB7CiAgZm9udC1zaXplOiAxOHB4OwogIGZvbnQtd2VpZ2h0OiA1MDA7Cn0=

<!DOCTYPE html>
<html lang="en">
  <head>
    
    <style>/* Current focus */
.ls-normal .quote {
  letter-spacing: normal;
}

.ls-px .quote {
  letter-spacing: 4px;
}

.ls-em .quote {
  letter-spacing: 0.3em;
}

/* Additional styles for better appearance (not the current focus) */
body {
  font-family: 'Playfair Display', serif;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f6f6f6;
  margin: 0;
  text-align: center;
}

ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding-left: 0;
  flex-wrap: wrap;
  gap: 20px;
}

.container {
  width: 280px;
  border: 1px dashed darksalmon;
  padding: 20px;
  border-radius: 8px;
  background-color: white;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
}

h3 {
  text-align: center;
  margin-bottom: 10px;
  font-size: 18px;
}

.quote {
  font-size: 18px;
  font-weight: 500;
}
</style>
  </head>
  <body>
    <ul>
      <li>
        <div class="container ls-normal">
          <h3>Normaal</h3>
          <p class="quote">
            "Verander de wereld door jezelf te zijn." – Amy Poehler
          </p>
        </div>
      </li>
      <li>
        <div class="container ls-px">
          <h3>4px</h3>
          <p class="quote">
            "Alles wat je je kunt voorstellen is echt." – Pablo Picasso
          </p>
        </div>
      </li>
      <li>
        <div class="container ls-em">
          <h3>0.3em</h3>
          <p class="quote">
            "Wat je ook bent, wees een goede." – Abraham Lincoln
          </p>
        </div>
      </li>
    </ul>
  </body>
</html>


## word-spacing
De `word-spacing` past de afstand tussen woorden aan.

```css
word-spacing: value | inherit | normal
```
- `value`: aangepaste afstand;
- `inherit`: gebruikt de afstand van het bovenliggende element;
- `normal`: standaardafstand.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8dWw+CiAgICAgIDxsaT4KICAgICAgICA8ZGl2IGNsYXNzPSJjb250YWluZXIgd3Mtbm9ybWFsIj4KICAgICAgICAgIDxoMz5Ob3JtYWw8L2gzPgogICAgICAgICAgPHAgY2xhc3M9InF1b3RlIj4KICAgICAgICAgICAgRG8gc29tZXRoaW5nIHRvZGF5IHRoYXQgeW91ciBmdXR1cmUgc2VsZiB3aWxsIHRoYW5rIHlvdSBmb3IuCiAgICAgICAgICA8L3A+CiAgICAgICAgPC9kaXY+CiAgICAgIDwvbGk+CiAgICAgIDxsaT4KICAgICAgICA8ZGl2IGNsYXNzPSJjb250YWluZXIgd3MtY3VzdG9tIj4KICAgICAgICAgIDxoMz4xMnB4PC9oMz4KICAgICAgICAgIDxwIGNsYXNzPSJxdW90ZSI+CiAgICAgICAgICAgIFN1Y2Nlc3MgZG9lc24ndCBjb21lIGZyb20gd2hhdCB5b3UgZG8gb2NjYXNpb25hbGx5LCBidXQgd2hhdCB5b3UgZG8KICAgICAgICAgICAgY29uc2lzdGVudGx5LgogICAgICAgICAgPC9wPgogICAgICAgIDwvZGl2PgogICAgICA8L2xpPgogICAgICA8bGk+CiAgICAgICAgPGRpdiBjbGFzcz0iY29udGFpbmVyIHdzLWluaGVyaXQiPgogICAgICAgICAgPGgzPkluaGVyaXQ8L2gzPgogICAgICAgICAgPGRpdiBjbGFzcz0icGFyZW50Ij4KICAgICAgICAgICAgPHAgY2xhc3M9InF1b3RlIj5HcmVhdCB0aGluZ3MgbmV2ZXIgY29tZSBmcm9tIGNvbWZvcnQgem9uZXMuPC9wPgogICAgICAgICAgPC9kaXY+CiAgICAgICAgPC9kaXY+CiAgICAgIDwvbGk+CiAgICA8L3VsPgogIDwvYm9keT4KPC9odG1sPg==

LyogQ3VycmVudCBmb2N1cyAqLwoud3Mtbm9ybWFsIC5xdW90ZSB7CiAgd29yZC1zcGFjaW5nOiBub3JtYWw7Cn0KCi53cy1jdXN0b20gLnF1b3RlIHsKICB3b3JkLXNwYWNpbmc6IDEycHg7Cn0KCi5wYXJlbnQgewogIHdvcmQtc3BhY2luZzogMjBweDsKfQoKLndzLWluaGVyaXQgLnF1b3RlIHsKICB3b3JkLXNwYWNpbmc6IGluaGVyaXQ7Cn0KCi8qIEFkZGl0aW9uYWwgc3R5bGVzIGZvciBiZXR0ZXIgYXBwZWFyYW5jZSAobm90IHRoZSBjdXJyZW50IGZvY3VzKSAqLwpib2R5IHsKICBmb250LWZhbWlseTogJ1JhbGV3YXknLCBzYW5zLXNlcmlmOwogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmFmYWZhOwogIG1hcmdpbjogMDsKICB0ZXh0LWFsaWduOiBjZW50ZXI7Cn0KCnVsIHsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjsKICBsaXN0LXN0eWxlOiBub25lOwogIHBhZGRpbmctbGVmdDogMDsKICBmbGV4LXdyYXA6IHdyYXA7CiAgZ2FwOiAyMHB4Owp9CgouY29udGFpbmVyIHsKICB3aWR0aDogMjgwcHg7CiAgYm9yZGVyOiAxcHggZGFzaGVkIGRhcmtzYWxtb247CiAgcGFkZGluZzogMjBweDsKICBib3JkZXItcmFkaXVzOiA4cHg7CiAgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7CiAgYm94LXNoYWRvdzogMnB4IDJweCA4cHggcmdiYSgwLCAwLCAwLCAwLjEpOwp9CgpoMyB7CiAgdGV4dC1hbGlnbjogY2VudGVyOwogIG1hcmdpbi1ib3R0b206IDEwcHg7CiAgZm9udC1zaXplOiAxOHB4Owp9CgoucXVvdGUgewogIGZvbnQtc2l6ZTogMThweDsKICBmb250LXdlaWdodDogNTAwOwp9

<!DOCTYPE html>
<html lang="en">
  <head>
   <style>/* Current focus */
.ws-normal .quote {
  word-spacing: normal;
}

.ws-custom .quote {
  word-spacing: 12px;
}

.parent {
  word-spacing: 20px;
}

.ws-inherit .quote {
  word-spacing: inherit;
}

/* Additional styles for better appearance (not the current focus) */
body {
  font-family: 'Raleway', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fafafa;
  margin: 0;
  text-align: center;
}

ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding-left: 0;
  flex-wrap: wrap;
  gap: 20px;
}

.container {
  width: 280px;
  border: 1px dashed darksalmon;
  padding: 20px;
  border-radius: 8px;
  background-color: white;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
}

h3 {
  text-align: center;
  margin-bottom: 10px;
  font-size: 18px;
}

.quote {
  font-size: 18px;
  font-weight: 500;
}
</style>
  </head>
  <body>
    <ul>
      <li>
        <div class="container ws-normal">
          <h3>Normaal</h3>
          <p class="quote">
            Doe vandaag iets waar je toekomstige zelf je dankbaar voor zal zijn.
          </p>
        </div>
      </li>
      <li>
        <div class="container ws-custom">
          <h3>12px</h3>
          <p class="quote">
            Succes komt niet van wat je af en toe doet, maar van wat je consequent doet.
          </p>
        </div>
      </li>
      <li>
        <div class="container ws-inherit">
          <h3>Overnemen</h3>
          <div class="parent">
            <p class="quote">Grote dingen ontstaan nooit in je comfortzone.</p>
          </div>
        </div>
      </li>
    </ul>
  </body>
</html>


## text-shadow
`text-shadow` voegt een schaduweffect toe aan tekst. Het accepteert vier waarden:

```css
text-shadow: "X set" | "Y set" | "blur radius" | "color"
```
- `X set`: horizontale verschuiving;
- `Y set`: verticale verschuiving;
- `blur radius`: zachtheid van de schaduw (0 = scherp);
- `color`: elke geldige kleur, standaard de huidige tekstkleur.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8dWw+CiAgICAgIDxsaT4KICAgICAgICA8ZGl2IGNsYXNzPSJjb250YWluZXIgc2hhZG93LXN1YnRsZSI+CiAgICAgICAgICA8aDM+U3VidGxlIEdsb3c8L2gzPgogICAgICAgICAgPHAgY2xhc3M9InF1b3RlIj5CZWxpZXZlIHlvdSBjYW4gYW5kIHlvdSdyZSBoYWxmd2F5IHRoZXJlLjwvcD4KICAgICAgICA8L2Rpdj4KICAgICAgPC9saT4KICAgICAgPGxpPgogICAgICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciBzaGFkb3ctc29mdC1kZXB0aCI+CiAgICAgICAgICA8aDM+U29mdCBEZXB0aDwvaDM+CiAgICAgICAgICA8cCBjbGFzcz0icXVvdGUiPkNvdXJhZ2UgaXMgZ3JhY2UgdW5kZXIgcHJlc3N1cmUuPC9wPgogICAgICAgIDwvZGl2PgogICAgICA8L2xpPgogICAgICA8bGk+CiAgICAgICAgPGRpdiBjbGFzcz0iY29udGFpbmVyIHNoYWRvdy1zdHJvbmctY29udHJhc3QiPgogICAgICAgICAgPGgzPlN0cm9uZyBDb250cmFzdDwvaDM+CiAgICAgICAgICA8cCBjbGFzcz0icXVvdGUiPlR1cm4geW91ciB3b3VuZHMgaW50byB3aXNkb20uPC9wPgogICAgICAgIDwvZGl2PgogICAgICA8L2xpPgogICAgICA8bGk+CiAgICAgICAgPGRpdiBjbGFzcz0iY29udGFpbmVyIHNoYWRvdy1jb2xvcmVkIj4KICAgICAgICAgIDxoMz5Db2xvcmVkIEdsb3c8L2gzPgogICAgICAgICAgPHAgY2xhc3M9InF1b3RlIj4KICAgICAgICAgICAgRXZlcnl0aGluZyB5b3UndmUgZXZlciB3YW50ZWQgaXMgb24gdGhlIG90aGVyIHNpZGUgb2YgZmVhci4KICAgICAgICAgIDwvcD4KICAgICAgICA8L2Rpdj4KICAgICAgPC9saT4KICAgIDwvdWw+CiAgPC9ib2R5Pgo8L2h0bWw+

LyogQ3VycmVudCBmb2N1cyAqLwouc2hhZG93LXN1YnRsZSAucXVvdGUgewogIHRleHQtc2hhZG93OiAxcHggMXB4IDNweCByZ2JhKDAsIDAsIDAsIDAuMik7IC8qIHNvZnQgZGFyayBzaGFkb3cgKi8KfQoKLnNoYWRvdy1zb2Z0LWRlcHRoIC5xdW90ZSB7CiAgdGV4dC1zaGFkb3c6IDJweCA0cHggNnB4IHJnYmEoMCwgMCwgMCwgMC4zKTsgLyogZGVlcGVyLCBsb25nZXIgc2hhZG93ICovCn0KCi5zaGFkb3ctc3Ryb25nLWNvbnRyYXN0IC5xdW90ZSB7CiAgdGV4dC1zaGFkb3c6IDNweCAzcHggOHB4IHJnYmEoMCwgMCwgMCwgMC42KTsgLyogbW9yZSBhZ2dyZXNzaXZlIHNoYWRvdyAqLwp9Cgouc2hhZG93LWNvbG9yZWQgLnF1b3RlIHsKICB0ZXh0LXNoYWRvdzogMnB4IDJweCA2cHggcmdiYSgxMjgsIDAsIDEyOCwgMC41KTsgLyogcHVycGxlIGdsb3cgKi8KfQoKLyogQWRkaXRpb25hbCBzdHlsZXMgZm9yIGJldHRlciBhcHBlYXJhbmNlIChub3QgdGhlIGN1cnJlbnQgZm9jdXMpICovCmJvZHkgewogIGZvbnQtZmFtaWx5OiAnUGxheWZhaXIgRGlzcGxheScsIHNlcmlmOwogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjlmOWY5OwogIG1hcmdpbjogMDsKICB0ZXh0LWFsaWduOiBjZW50ZXI7Cn0KCnVsIHsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogc3BhY2UtYXJvdW5kOwogIGxpc3Qtc3R5bGU6IG5vbmU7CiAgcGFkZGluZy1sZWZ0OiAwOwogIGZsZXgtd3JhcDogd3JhcDsKICBnYXA6IDIwcHg7Cn0KCi5jb250YWluZXIgewogIHdpZHRoOiAyODBweDsKICBib3JkZXI6IDFweCBkYXNoZWQgZGFya3NhbG1vbjsKICBwYWRkaW5nOiAyMHB4OwogIGJvcmRlci1yYWRpdXM6IDhweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiB3aGl0ZTsKICBib3gtc2hhZG93OiAycHggMnB4IDhweCByZ2JhKDAsIDAsIDAsIDAuMSk7Cn0KCmgzIHsKICB0ZXh0LWFsaWduOiBjZW50ZXI7CiAgbWFyZ2luLWJvdHRvbTogMTBweDsKICBmb250LXNpemU6IDE4cHg7Cn0KCi5xdW90ZSB7CiAgZm9udC1zaXplOiAyMHB4OwogIGZvbnQtd2VpZ2h0OiA2MDA7Cn0=

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>/* Current focus */
.shadow-subtle .quote {
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); /* soft dark shadow */
}

.shadow-soft-depth .quote {
  text-shadow: 2px 4px 6px rgba(0, 0, 0, 0.3); /* deeper, longer shadow */
}

.shadow-strong-contrast .quote {
  text-shadow: 3px 3px 8px rgba(0, 0, 0, 0.6); /* more aggressive shadow */
}

.shadow-colored .quote {
  text-shadow: 2px 2px 6px rgba(128, 0, 128, 0.5); /* purple glow */
}

/* Additional styles for better appearance (not the current focus) */
body {
  font-family: 'Playfair Display', serif;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f9f9f9;
  margin: 0;
  text-align: center;
}

ul {
  display: flex;
  justify-content: space-around;
  list-style: none;
  padding-left: 0;
  flex-wrap: wrap;
  gap: 20px;
}

.container {
  width: 280px;
  border: 1px dashed darksalmon;
  padding: 20px;
  border-radius: 8px;
  background-color: white;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
}

h3 {
  text-align: center;
  margin-bottom: 10px;
  font-size: 18px;
}

.quote {
  font-size: 20px;
  font-weight: 600;
}
</style>
  </head>
  <body>
    <ul>
      <li>
        <div class="container shadow-subtle">
          <h3>Subtiele Gloed</h3>
          <p class="quote">Geloof dat je het kunt en je bent al halverwege.</p>
        </div>
      </li>
      <li>
        <div class="container shadow-soft-depth">
          <h3>Zachte Diepte</h3>
          <p class="quote">Moed is gratie onder druk.</p>
        </div>
      </li>
      <li>
        <div class="container shadow-strong-contrast">
          <h3>Sterk Contrast</h3>
          <p class="quote">Verander je wonden in wijsheid.</p>
        </div>
      </li>
      <li>
        <div class="container shadow-colored">
          <h3>Gekleurde Gloed</h3>
          <p class="quote">
            Alles wat je ooit hebt gewild, ligt aan de andere kant van angst.
          </p>
        </div>
      </li>
    </ul>
  </body>
</html>


Bij tekstopmaak zijn er geen strikte regels die bepalen welke waarden in specifieke situaties moeten worden gebruikt. De keuze van tekstopmaak-eigenschappen en waarden hangt af van de unieke vereisten van elk project en de ontwerpvisie.

Opmerking

Welke CSS-eigenschap wordt gebruikt om een visueel effect toe te voegen dat een schaduw aan tekst geeft?

Welke CSS-eigenschap past de afstand tussen woorden in een tekst aan?

Beheers de basisprincipes van CSS, de opmaakt taal die het uiterlijk en de uitstraling van webpagina's transformeert. Verken kernconcepten zoals tekststijlen, kleuren, afstand, het boxmodel, Flexbox en decoratieve effecten. Ontwikkel vaardigheden om visueel aantrekkelijke en goed gestructureerde webpagina's te creëren.

Begrijpen hoe CSS wordt gekoppeld aan HTML en hoe stijlen worden toegepast via selectors.
Toepassen van kleuren, tekststijlen en hover-effecten om de visuele presentatie te beheersen.

Verbeter typografie met behulp van regelhoogte, afstand, lettertype-eigenschappen en aangepaste lettertypen. Beheer lettertypefamilies, gewicht, stijl en grootte voor betere leesbaarheid.

Beheer de lay-outstructuur met behulp van margin-, padding-, border- en width-eigenschappen. Inzicht in het gedrag van box-sizing en elementweergavetypen zoals block, inline en inline-block.

Beheer horizontale en verticale lay-outs met behulp van Flexbox-eigenschappen. Pas richting, uitlijning en afstand aan om UI-componenten te structureren.

Verbeter lay-outs met achtergrondkleuren, afbeeldingen, pseudo-elementen en schaduwen. Stijl visuele componenten voor diepte en contrast.

Tekstopmaak voor Betere Leesbaarheid

line-height

Uitvoer

letter-spacing

Uitvoer

word-spacing

Uitvoer

text-shadow

Uitvoer

1. Welke CSS-eigenschap wordt gebruikt om een visueel effect toe te voegen dat een schaduw aan tekst geeft?

2. Welke CSS-eigenschap past de afstand tussen woorden in een tekst aan?