Summary  
The chapter explains how to use CSS properties to format text—covering line-height, letter-spacing, word-spacing, and text-shadow—to control typographic spacing and visual effects.  

General domain of usage  
Web design/front-end styling

## line-height
`line-height` styr det vertikala avståndet mellan textrader. Webbläsare sätter ett standardvärde baserat på typsnittet, men det kan anpassas med flera format:

```css
line-height: multiplier | value in px | value in em | percent 
```
- `multiplier` enhetslöst värde som `1.5` multiplicerar `font-size`;
- `value in px` specifik höjd, t.ex. `24px`;
- `value in em` relativt värde, liknande multiplier (`1.4em = font-size × 1.4`);
- `percent` fungerar som multiplier (`120% = font-size × 1.2`).

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8dWw+CiAgICAgIDxsaT4KICAgICAgICA8ZGl2IGNsYXNzPSJjb250YWluZXIgbGgtbXVsdGlwbGllciI+CiAgICAgICAgICA8aDM+TXVsdGlwbGllcjwvaDM+CiAgICAgICAgICA8cD4KICAgICAgICAgICAgIlN1Y2Nlc3MgaXMgbm90IHRoZSBrZXkgdG8gaGFwcGluZXNzLiBIYXBwaW5lc3MgaXMgdGhlIGtleSB0bwogICAgICAgICAgICBzdWNjZXNzLiBJZiB5b3UgbG92ZSB3aGF0IHlvdSBhcmUgZG9pbmcsIHlvdSB3aWxsIGJlIHN1Y2Nlc3NmdWwuIiDigJMKICAgICAgICAgICAgQWxiZXJ0IFNjaHdlaXR6ZXIKICAgICAgICAgIDwvcD4KICAgICAgICA8L2Rpdj4KICAgICAgPC9saT4KICAgICAgPGxpPgogICAgICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciBsaC1weCI+CiAgICAgICAgICA8aDM+UGl4ZWxzPC9oMz4KICAgICAgICAgIDxwPgogICAgICAgICAgICAiSSBoYXZlIG5vdCBmYWlsZWQuIEkndmUganVzdCBmb3VuZCAxMCwwMDAgd2F5cyB0aGF0IHdvbid0IHdvcmsuIiDigJMKICAgICAgICAgICAgVGhvbWFzIEVkaXNvbgogICAgICAgICAgPC9wPgogICAgICAgIDwvZGl2PgogICAgICA8L2xpPgogICAgICA8bGk+CiAgICAgICAgPGRpdiBjbGFzcz0iY29udGFpbmVyIGxoLWVtIj4KICAgICAgICAgIDxoMz5FTTwvaDM+CiAgICAgICAgICA8cD4KICAgICAgICAgICAgIkluIHRoZSBtaWRkbGUgb2YgZXZlcnkgZGlmZmljdWx0eSBsaWVzIG9wcG9ydHVuaXR5LiIg4oCTIEFsYmVydAogICAgICAgICAgICBFaW5zdGVpbgogICAgICAgICAgPC9wPgogICAgICAgIDwvZGl2PgogICAgICA8L2xpPgogICAgICA8bGk+CiAgICAgICAgPGRpdiBjbGFzcz0iY29udGFpbmVyIGxoLXBlcmNlbnQiPgogICAgICAgICAgPGgzPlBlcmNlbnQ8L2gzPgogICAgICAgICAgPHA+CiAgICAgICAgICAgICJEbyBub3QgZ28gd2hlcmUgdGhlIHBhdGggbWF5IGxlYWQsIGdvIGluc3RlYWQgd2hlcmUgdGhlcmUgaXMgbm8KICAgICAgICAgICAgcGF0aCBhbmQgbGVhdmUgYSB0cmFpbC4iIOKAkyBSYWxwaCBXYWxkbyBFbWVyc29uCiAgICAgICAgICA8L3A+CiAgICAgICAgPC9kaXY+CiAgICAgIDwvbGk+CiAgICA8L3VsPgogIDwvYm9keT4KPC9odG1sPg==

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>
            "Framgång är inte nyckeln till lycka. Lycka är nyckeln till framgång. Om du älskar det du gör kommer du att bli framgångsrik." – Albert Schweitzer
          </p>
        </div>
      </li>
      <li>
        <div class="container lh-px">
          <h3>Pixlar</h3>
          <p>
            "Jag har inte misslyckats. Jag har bara hittat 10 000 sätt som inte fungerar." – Thomas Edison
          </p>
        </div>
      </li>
      <li>
        <div class="container lh-em">
          <h3>EM</h3>
          <p>
            "Mitt i varje svårighet finns en möjlighet." – Albert Einstein
          </p>
        </div>
      </li>
      <li>
        <div class="container lh-percent">
          <h3>Procent</h3>
          <p>
            "Gå inte där stigen redan finns, gå istället där det inte finns någon stig och lämna ett spår." – Ralph Waldo Emerson
          </p>
        </div>
      </li>
    </ul>
  </body>
</html>


## letter-spacing
`letter-spacing` anger horisontellt avstånd mellan tecken.

```css
letter-spacing: normal | value in px | value in em
``` 
- `normal`: standardavstånd;
- `value in px`: fast extra avstånd;
- `value in em`: avstånd relativt till `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">
            "Förändra världen genom att vara dig själv." – Amy Poehler
          </p>
        </div>
      </li>
      <li>
        <div class="container ls-px">
          <h3>4px</h3>
          <p class="quote">
            "Allt du kan föreställa dig är verkligt." – Pablo Picasso
          </p>
        </div>
      </li>
      <li>
        <div class="container ls-em">
          <h3>0.3em</h3>
          <p class="quote">
            "Vem du än är, var en bra sådan." – Abraham Lincoln
          </p>
        </div>
      </li>
    </ul>
  </body>
</html>


## word-spacing
`word-spacing` justerar avståndet mellan ord.

```css
word-spacing: value | inherit | normal
```
- `value`: anpassat avstånd;
- `inherit`: använder föräldraelementets avstånd;
- `normal`: standardavstånd.

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">
            Gör något idag som ditt framtida jag kommer att tacka dig för.
          </p>
        </div>
      </li>
      <li>
        <div class="container ws-custom">
          <h3>12px</h3>
          <p class="quote">
            Framgång kommer inte från det du gör ibland, utan från det du gör
            konsekvent.
          </p>
        </div>
      </li>
      <li>
        <div class="container ws-inherit">
          <h3>Ärv</h3>
          <div class="parent">
            <p class="quote">Stora saker kommer aldrig från komfortzoner.</p>
          </div>
        </div>
      </li>
    </ul>
  </body>
</html>


## text-shadow
`text-shadow` lägger till skuggor på text. Den accepterar fyra värden:

```css
text-shadow: "X set" | "Y set" | "blur radius" | "color"
```
- `X set`: horisontell förskjutning;
- `Y set`: vertikal förskjutning;
- `blur radius`: mjukhet på skuggan (0 = skarp);
- `color`: valfri giltig färg, standard är aktuell textfärg.

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>Diskret Glöd</h3>
          <p class="quote">Tro på dig själv så har du redan kommit halvvägs.</p>
        </div>
      </li>
      <li>
        <div class="container shadow-soft-depth">
          <h3>Mjuk Djup</h3>
          <p class="quote">Mod är elegans under press.</p>
        </div>
      </li>
      <li>
        <div class="container shadow-strong-contrast">
          <h3>Stark Kontrast</h3>
          <p class="quote">Förvandla dina sår till visdom.</p>
        </div>
      </li>
      <li>
        <div class="container shadow-colored">
          <h3>Färgad Glöd</h3>
          <p class="quote">
            Allt du någonsin önskat finns på andra sidan av rädsla.
          </p>
        </div>
      </li>
    </ul>
  </body>
</html>


Vid textformatering finns det inga strikta regler som bestämmer vilka värden som måste användas i specifika situationer. Valet av textformateringsegenskaper och värden beror på projektets unika krav och designvision.

Observera

Vilken CSS-egenskap används för att skapa en visuell effekt som lägger till en skugga på text?

Vilken CSS-egenskap justerar avståndet mellan ord i en text?

Behärska grunderna i CSS (Cascading Style Sheets), det stiliseringsspråk som förändrar utseendet och känslan på webbsidor. Utforska kärnkoncept som textstilar, färger, avstånd, boxmodellen, Flexbox och dekorativa effekter. Bygg upp färdigheter för att skapa visuellt tilltalande och välstrukturerade webbsidor. Perfekt för nybörjare som vill skapa en stabil grund i CSS.

Lär dig vad CSS är, hur det kopplas till HTML och hur HTML-element kan stylas med selektorer. Utforska grundläggande koncept som textfärger, användaraktions-pseudoklasser och variabler i CSS.

Utforska hur du kan formatera och utforma text på dina webbsidor. Lär dig att använda anpassade typsnitt och undersök olika typsnittsegenskaper för att förbättra textens utseende.

Lär dig grunderna i boxmodellen, som definierar layout och avstånd för element på en webbsida. Utforska koncept som boxstorlek, tillägg av utrymme till element, arbete med block- och inline-element samt användning av strukturella och funktionella pseudoklasser för avancerad formatering.

Utforska Flexbox, en kraftfull CSS-layoutmetod för att arrangera element i rader och kolumner. Lär dig att kontrollera riktning, justering och avstånd mellan element horisontellt och vertikalt samt anpassa enskilda flexobjekt för precisa layouter.

Lär dig hur du kan förbättra den visuella attraktionskraften på dina webbsidor med CSS. Utforska tekniker för att använda bakgrundsfärger och bakgrundsbilder, formge bilder, använda dekorativa pseudo-element samt lägga till skuggor för att skapa imponerande designer.

Textformateringstekniker för Läsbarhet

line-height

Utdata

letter-spacing

Utdata

word-spacing

Utdata

text-shadow

Utdata

1. Vilken CSS-egenskap används för att skapa en visuell effekt som lägger till en skugga på text?

2. Vilken CSS-egenskap justerar avståndet mellan ord i en text?