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

Une bonne typographie améliore la lisibilité et la structure visuelle.
Dans ce chapitre, nous nous concentrons sur les propriétés qui contrôlent l'espacement et les effets visuels subtils pour le texte : `line-height`, `letter-spacing`, `word-spacing` et `text-shadow`.

Ces propriétés facilitent la lecture du texte et assurent un équilibre visuel.

## line-height
`line-height` contrôle l'espacement vertical entre les lignes de texte. Les navigateurs définissent une valeur par défaut basée sur la police, mais il est possible de la personnaliser avec plusieurs formats :

```css
line-height: multiplier | value in px | value in em | percent 
```
- `multiplier` valeur sans unité comme `1.5` multiplie la `font-size` ;
- `value in px` hauteur spécifique, par exemple `24px` ;
- `value in em` valeur relative, similaire au multiplicateur (`1.4em = font-size × 1.4`) ;
- `percent` fonctionne comme le multiplicateur (`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>Multiplicateur</h3>
          <p>
            « Le succès n'est pas la clé du bonheur. Le bonheur est la clé du succès. Si vous aimez ce que vous faites, vous réussirez. » – Albert Schweitzer
          </p>
        </div>
      </li>
      <li>
        <div class="container lh-px">
          <h3>Pixels</h3>
          <p>
            « Je n'ai pas échoué. J'ai simplement trouvé 10 000 solutions qui ne fonctionnent pas. » – Thomas Edison
          </p>
        </div>
      </li>
      <li>
        <div class="container lh-em">
          <h3>EM</h3>
          <p>
            « Au milieu de chaque difficulté se trouve une opportunité. » – Albert Einstein
          </p>
        </div>
      </li>
      <li>
        <div class="container lh-percent">
          <h3>Pourcentage</h3>
          <p>
            « Ne va pas là où le chemin peut mener, va là où il n'y a pas de chemin et laisse une trace. » – Ralph Waldo Emerson
          </p>
        </div>
      </li>
    </ul>
  </body>
</html>


## letter-spacing
`letter-spacing` définit l'espacement horizontal entre les caractères.

```css
letter-spacing: normal | value in px | value in em
``` 
- `normal` : espacement par défaut ;
- `value in px` : espacement supplémentaire fixe ;
- `value in em` : espacement relatif à la `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">
            « Change le monde en étant toi-même. » – Amy Poehler
          </p>
        </div>
      </li>
      <li>
        <div class="container ls-px">
          <h3>4px</h3>
          <p class="quote">
            « Tout ce que tu peux imaginer est réel. » – Pablo Picasso
          </p>
        </div>
      </li>
      <li>
        <div class="container ls-em">
          <h3>0.3em</h3>
          <p class="quote">
            « Quoi que tu sois, sois quelqu’un de bien. » – Abraham Lincoln
          </p>
        </div>
      </li>
    </ul>
  </body>
</html>


## word-spacing
La propriété `word-spacing` ajuste la distance entre les mots.

```css
word-spacing: value | inherit | normal
```
- `value` : espacement personnalisé ;
- `inherit` : utilise l'espacement de l'élément parent ;
- `normal` : espacement par défaut.

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">
            Faites aujourd'hui quelque chose dont votre futur vous remerciera.
          </p>
        </div>
      </li>
      <li>
        <div class="container ws-custom">
          <h3>12px</h3>
          <p class="quote">
            Le succès ne vient pas de ce que vous faites de temps en temps, mais de ce que vous faites
            de façon constante.
          </p>
        </div>
      </li>
      <li>
        <div class="container ws-inherit">
          <h3>Hériter</h3>
          <div class="parent">
            <p class="quote">Les grandes choses ne naissent jamais de la zone de confort.</p>
          </div>
        </div>
      </li>
    </ul>
  </body>
</html>


## text-shadow
`text-shadow` ajoute un effet d’ombre au texte. Cette propriété accepte quatre valeurs :

```css
text-shadow: "X set" | "Y set" | "blur radius" | "color"
```
- `X set` : décalage horizontal ;
- `Y set` : décalage vertical ;
- `blur radius` : intensité du flou de l’ombre (0 = net) ;
- `color` : toute couleur valide, par défaut la couleur du texte actuel.

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>Lueur subtile</h3>
          <p class="quote">Croyez en vous et vous avez déjà fait la moitié du chemin.</p>
        </div>
      </li>
      <li>
        <div class="container shadow-soft-depth">
          <h3>Profondeur douce</h3>
          <p class="quote">Le courage, c'est la grâce sous pression.</p>
        </div>
      </li>
      <li>
        <div class="container shadow-strong-contrast">
          <h3>Contraste fort</h3>
          <p class="quote">Transformez vos blessures en sagesse.</p>
        </div>
      </li>
      <li>
        <div class="container shadow-colored">
          <h3>Lueur colorée</h3>
          <p class="quote">
            Tout ce que vous avez toujours voulu se trouve de l'autre côté de la peur.
          </p>
        </div>
      </li>
    </ul>
  </body>
</html>


En matière de mise en forme du texte, il n'existe pas de règles strictes imposant l'utilisation de certaines valeurs dans des situations spécifiques. Le choix des propriétés et des valeurs de mise en forme du texte dépend des besoins uniques de chaque projet et de la vision du design.

Remarque

Quelle propriété CSS est utilisée pour créer un effet visuel qui ajoute une ombre au texte ?

Quelle propriété CSS ajuste la distance entre les mots dans un texte ?

Maîtrisez les bases de CSS, le langage de style qui transforme l’apparence des pages web. Explorez les concepts fondamentaux tels que les styles de texte, les couleurs, l’espacement, le modèle de boîte, Flexbox et les effets décoratifs. Développez les compétences nécessaires pour créer des pages web visuellement attrayantes et bien structurées.

Comprendre comment CSS se connecte à HTML et comment les styles sont appliqués via les sélecteurs. Appliquer des couleurs, des styles de texte et des effets au survol pour contrôler la présentation visuelle.

Amélioration de la typographie à l'aide de la hauteur de ligne, de l'espacement, des propriétés de police et des polices personnalisées. Contrôle des familles de polices, du poids, du style et de la taille pour une meilleure lisibilité.

Contrôle de la structure de la mise en page à l'aide des propriétés de marge, de remplissage, de bordure et de largeur. Compréhension du comportement de dimensionnement des boîtes et des types d'affichage des éléments tels que bloc, en ligne et en ligne-bloc.

Contrôle des mises en page horizontales et verticales à l'aide des propriétés Flexbox. Ajustement de la direction, de l'alignement et de l'espacement pour structurer les composants de l'interface utilisateur.

Amélioration des mises en page à l'aide de couleurs d'arrière-plan, d'images, de pseudo-éléments et d'ombres. Mise en forme des composants visuels pour la profondeur et le contraste.

Mise en Forme du Texte pour une Meilleure Lisibilité

line-height

Résultat

letter-spacing

Résultat

word-spacing

Résultat

text-shadow

Résultat

1. Quelle propriété CSS est utilisée pour créer un effet visuel qui ajoute une ombre au texte ?

2. Quelle propriété CSS ajuste la distance entre les mots dans un texte ?