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

Gute Typografie verbessert die Lesbarkeit und die visuelle Struktur.
In diesem Kapitel konzentrieren wir uns auf Eigenschaften, die den Abstand und subtile visuelle Effekte für Text steuern: `line-height`, `letter-spacing`, `word-spacing` und `text-shadow`.

Diese Eigenschaften tragen dazu bei, Text leichter lesbar und optisch ausgewogen zu gestalten.

## line-height
`line-height` steuert den vertikalen Abstand zwischen Textzeilen. Browser setzen einen Standardwert basierend auf der Schriftart, aber Sie können ihn mit verschiedenen Formaten anpassen:

```css
line-height: multiplier | value in px | value in em | percent 
```
- `multiplier` einheitenloser Wert wie `1.5` multipliziert die `font-size`;
- `value in px` spezifische Höhe, z. B. `24px`;
- `value in em` relativer Wert, ähnlich wie multiplier (`1.4em = font-size × 1.4`);
- `percent` funktioniert wie 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>Multiplikator</h3>
          <p>
            "Erfolg ist nicht der Schlüssel zum Glück. Glück ist der Schlüssel zum Erfolg. Wenn du liebst, was du tust, wirst du erfolgreich sein." – Albert Schweitzer
          </p>
        </div>
      </li>
      <li>
        <div class="container lh-px">
          <h3>Pixel</h3>
          <p>
            "Ich habe nicht versagt. Ich habe nur 10.000 Wege gefunden, die nicht funktionieren." – Thomas Edison
          </p>
        </div>
      </li>
      <li>
        <div class="container lh-em">
          <h3>EM</h3>
          <p>
            "Inmitten jeder Schwierigkeit liegt eine Möglichkeit." – Albert Einstein
          </p>
        </div>
      </li>
      <li>
        <div class="container lh-percent">
          <h3>Prozent</h3>
          <p>
            "Gehe nicht dorthin, wo der Weg hinführen mag, sondern dorthin, wo kein Weg ist, und hinterlasse eine Spur." – Ralph Waldo Emerson
          </p>
        </div>
      </li>
    </ul>
  </body>
</html>


## letter-spacing
`letter-spacing` legt den horizontalen Abstand zwischen Zeichen fest.

```css
letter-spacing: normal | value in px | value in em
``` 
- `normal`: Standardabstand;
- `value in px`: fester zusätzlicher Abstand;
- `value in em`: Abstand relativ zur `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>Normal</h3>
          <p class="quote">
            „Verändere die Welt, indem du du selbst bist.“ – Amy Poehler
          </p>
        </div>
      </li>
      <li>
        <div class="container ls-px">
          <h3>4px</h3>
          <p class="quote">
            „Alles, was du dir vorstellen kannst, ist real.“ – Pablo Picasso
          </p>
        </div>
      </li>
      <li>
        <div class="container ls-em">
          <h3>0.3em</h3>
          <p class="quote">
            „Was immer du bist, sei ein guter.“ – Abraham Lincoln
          </p>
        </div>
      </li>
    </ul>
  </body>
</html>


## word-spacing
Das `word-spacing` passt den Abstand zwischen Wörtern an.

```css
word-spacing: value | inherit | normal
```
- `value`: benutzerdefinierter Abstand;
- `inherit`: übernimmt den Abstand des Elternelements;
- `normal`: Standardabstand.

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>Normal</h3>
          <p class="quote">
            Tu heute etwas, wofür dir dein zukünftiges Ich danken wird.
          </p>
        </div>
      </li>
      <li>
        <div class="container ws-custom">
          <h3>12px</h3>
          <p class="quote">
            Erfolg entsteht nicht durch das, was du gelegentlich tust, sondern durch das, was du konsequent tust.
          </p>
        </div>
      </li>
      <li>
        <div class="container ws-inherit">
          <h3>Vererbt</h3>
          <div class="parent">
            <p class="quote">Großartige Dinge entstehen nie in der Komfortzone.</p>
          </div>
        </div>
      </li>
    </ul>
  </body>
</html>


## text-shadow
`text-shadow` fügt dem Text einen Schatteneffekt hinzu. Es akzeptiert vier Werte:

```css
text-shadow: "X set" | "Y set" | "blur radius" | "color"
```
- `X set`: horizontale Verschiebung;
- `Y set`: vertikale Verschiebung;
- `blur radius`: Weichheit des Schattens (0 = scharf);
- `color`: jede gültige Farbe, standardmäßig die aktuelle Textfarbe.

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>Sanfter Schein</h3>
          <p class="quote">Glaube daran, dass du es kannst, und du bist schon auf halbem Weg.</p>
        </div>
      </li>
      <li>
        <div class="container shadow-soft-depth">
          <h3>Weiche Tiefe</h3>
          <p class="quote">Mut ist Anmut unter Druck.</p>
        </div>
      </li>
      <li>
        <div class="container shadow-strong-contrast">
          <h3>Starker Kontrast</h3>
          <p class="quote">Verwandle deine Wunden in Weisheit.</p>
        </div>
      </li>
      <li>
        <div class="container shadow-colored">
          <h3>Farbiger Schein</h3>
          <p class="quote">
            Alles, was du dir je gewünscht hast, liegt auf der anderen Seite der Angst.
          </p>
        </div>
      </li>
    </ul>
  </body>
</html>


Bei der Textformatierung gibt es keine strikten Regeln, welche Werte in bestimmten Situationen verwendet werden müssen. Die Auswahl der Eigenschaften und Werte zur Textformatierung hängt von den individuellen Anforderungen des jeweiligen Projekts und der gestalterischen Vision ab.

Hinweis

Welche CSS-Eigenschaft wird verwendet, um einen visuellen Effekt zu erzeugen, der einem Text einen Schatten hinzufügt?

Welche CSS-Eigenschaft passt den Abstand zwischen Wörtern in einem Text an?

Beherrschen Sie die Grundlagen von CSS, der Gestaltungssprache, die das Erscheinungsbild von Webseiten verändert. Erforschen Sie zentrale Konzepte wie Textstile, Farben, Abstände, das Box-Modell, Flexbox und dekorative Effekte. Entwickeln Sie die Fähigkeiten, um optisch ansprechende und gut strukturierte Webseiten zu erstellen.

Verstehen, wie CSS mit HTML verbunden wird und wie Stile durch Selektoren angewendet werden. Farben, Textgestaltung und Hover-Effekte zur Steuerung der visuellen Darstellung anwenden.

Verbesserung der Typografie durch Zeilenhöhe, Abstände, Schriftarteigenschaften und benutzerdefinierte Schriftarten. Steuerung von Schriftfamilien, -gewicht, -stil und -größe für eine bessere Lesbarkeit.

Steuerung der Layoutstruktur mit Margin-, Padding-, Border- und Width-Eigenschaften. Verständnis des Box-Sizing-Verhaltens und der Anzeigearten von Elementen wie Block, Inline und Inline-Block.

Steuerung von horizontalen und vertikalen Layouts mit Flexbox-Eigenschaften. Anpassung von Richtung, Ausrichtung und Abstand zur Strukturierung von UI-Komponenten.

Layouts mit Hintergrundfarben, Bildern, Pseudoelementen und Schatten aufwerten. Visuelle Komponenten für Tiefe und Kontrast gestalten.

Textformatierung für bessere Lesbarkeit

line-height

Ausgabe

letter-spacing

Ausgabe

word-spacing

Ausgabe

text-shadow

Ausgabe

1. Welche CSS-Eigenschaft wird verwendet, um einen visuellen Effekt zu erzeugen, der einem Text einen Schatten hinzufügt?

2. Welche CSS-Eigenschaft passt den Abstand zwischen Wörtern in einem Text an?