Summary  
This chapter covers CSS properties—line-height, letter-spacing, word-spacing, and text-shadow—that let you adjust vertical and horizontal spacing and add shadow effects to optimize text readability and appearance.

General domain of usage  
Web design and front-end development

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

God typografi forbedrer lesbarheten og den visuelle strukturen.
I dette kapittelet fokuserer vi på egenskaper som styrer avstand og subtile visuelle effekter for tekst: `line-height`, `letter-spacing`, `word-spacing` og `text-shadow`.

Disse egenskapene bidrar til å gjøre teksten lettere å lese og visuelt balansert.

## line-height
`line-height` styrer den vertikale avstanden mellom tekstlinjer. Nettlesere setter en standardverdi basert på skrifttypen, men du kan tilpasse den ved å bruke flere formater:

```css
line-height: multiplier | value in px | value in em | percent 
```
- `multiplier` enhetsløs verdi som `1.5` multipliserer `font-size`;
- `value in px` spesifikk høyde, f.eks. `24px`;
- `value in em` relativ verdi, lik multiplier (`1.4em = font-size × 1.4`);
- `percent` fungerer som 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>
            "Suksess er ikke nøkkelen til lykke. Lykke er nøkkelen til
            suksess. Hvis du elsker det du gjør, vil du bli vellykket." –
            Albert Schweitzer
          </p>
        </div>
      </li>
      <li>
        <div class="container lh-px">
          <h3>Piksler</h3>
          <p>
            "Jeg har ikke feilet. Jeg har bare funnet 10 000 måter som ikke fungerer." –
            Thomas Edison
          </p>
        </div>
      </li>
      <li>
        <div class="container lh-em">
          <h3>EM</h3>
          <p>
            "Midt i enhver utfordring ligger en mulighet." – Albert
            Einstein
          </p>
        </div>
      </li>
      <li>
        <div class="container lh-percent">
          <h3>Prosent</h3>
          <p>
            "Ikke gå der stien kan føre, gå heller der det ikke finnes noen sti og legg igjen et spor." – Ralph Waldo Emerson
          </p>
        </div>
      </li>
    </ul>
  </body>
</html>


## letter-spacing
`letter-spacing` angir horisontal avstand mellom tegn.

```css
letter-spacing: normal | value in px | value in em
``` 
- `normal`: standard avstand;
- `value in px`: fast ekstra avstand;
- `value in em`: avstand relativt til `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">
            "Forandre verden ved å være deg selv." – Amy Poehler
          </p>
        </div>
      </li>
      <li>
        <div class="container ls-px">
          <h3>4px</h3>
          <p class="quote">
            "Alt du kan forestille deg er virkelig." – Pablo Picasso
          </p>
        </div>
      </li>
      <li>
        <div class="container ls-em">
          <h3>0.3em</h3>
          <p class="quote">
            "Uansett hva du er, vær en god en." – Abraham Lincoln
          </p>
        </div>
      </li>
    </ul>
  </body>
</html>


## word-spacing
`word-spacing` justerer avstanden mellom ordene.

```css
word-spacing: value | inherit | normal
```
- `value`: egendefinert avstand;
- `inherit`: bruker avstanden til overordnet element;
- `normal`: standard avstand.

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">
            Gjør noe i dag som ditt fremtidige jeg vil takke deg for.
          </p>
        </div>
      </li>
      <li>
        <div class="container ws-custom">
          <h3>12px</h3>
          <p class="quote">
            Suksess kommer ikke av det du gjør av og til, men av det du gjør
            konsekvent.
          </p>
        </div>
      </li>
      <li>
        <div class="container ws-inherit">
          <h3>Arv</h3>
          <div class="parent">
            <p class="quote">Store ting skjer aldri i komfortsonen.</p>
          </div>
        </div>
      </li>
    </ul>
  </body>
</html>


## text-shadow
`text-shadow` legger til en skyggeeffekt på tekst. Den aksepterer fire verdier:

```css
text-shadow: "X set" | "Y set" | "blur radius" | "color"
```
- `X set`: horisontal forskyvning;
- `Y set`: vertikal forskyvning;
- `blur radius`: mykhet på skyggen (0 = skarp);
- `color`: hvilken som helst gyldig farge, standard er nåværende tekstfarge.

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>Diskré glød</h3>
          <p class="quote">Tro på deg selv, så er du allerede halvveis.</p>
        </div>
      </li>
      <li>
        <div class="container shadow-soft-depth">
          <h3>Myk dybde</h3>
          <p class="quote">Mot er nåde under press.</p>
        </div>
      </li>
      <li>
        <div class="container shadow-strong-contrast">
          <h3>Sterk kontrast</h3>
          <p class="quote">Gjør dine sår om til visdom.</p>
        </div>
      </li>
      <li>
        <div class="container shadow-colored">
          <h3>Farget glød</h3>
          <p class="quote">
            Alt du noen gang har ønsket deg, finnes på den andre siden av frykt.
          </p>
        </div>
      </li>
    </ul>
  </body>
</html>


Ved tekstformatering finnes det ingen strenge regler som bestemmer hvilke verdier som må brukes i bestemte situasjoner. Valg av tekstformateringsegenskaper og -verdier avhenger av de unike kravene til hvert prosjekt og designvisjonen.

Merk

Hvilken CSS-egenskap brukes for å lage en visuell effekt som legger til skygge på tekst?

Hvilken CSS-egenskap justerer avstanden mellom ord i en tekst?

Stilsetting av nettsider med CSS. Bruk av farger, typografi, mellomrom og oppsett, samt bygging av responsive komponenter med Flexbox.

Tekstformatering for bedre lesbarhet

line-height

Utdata

letter-spacing

Utdata

word-spacing

Utdata

text-shadow

Utdata

1. Hvilken CSS-egenskap brukes for å lage en visuell effekt som legger til skygge på tekst?

2. Hvilken CSS-egenskap justerer avstanden mellom ord i en tekst?