Summary
This chapter explains how to use CSS text styling properties—text-decoration, text-transform, and text-align—to control underlines/overlines, letter casing, and horizontal alignment on HTML text elements.

General domain of usage
Front-end web development

## text-decoration
Властивість `text-decoration` може застосовуватися до будь-якого текстового вмісту, включаючи посилання, заголовки, абзаци та списки. Вона додає лінійні ефекти, такі як підкреслення. Поширені значення:

```css
text-decoration: none | line-through | underline | overline
```


Розгляньмо наступний приклад і перегляньмо різницю між усіма значеннями властивості.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8dWw+CiAgICAgIDxsaT4KICAgICAgICA8ZGl2IGNsYXNzPSJjb250YWluZXIiPgogICAgICAgICAgPGgzPk5vbmU8L2gzPgogICAgICAgICAgPHAgY2xhc3M9InRleHQtbm9uZSI+CiAgICAgICAgICAgICJTaW1wbGljaXR5IGlzIHRoZSB1bHRpbWF0ZSBzb3BoaXN0aWNhdGlvbi4iIDxiciAvPgogICAgICAgICAgICAtIExlb25hcmRvIGRhIFZpbmNpCiAgICAgICAgICA8L3A+CiAgICAgICAgPC9kaXY+CiAgICAgIDwvbGk+CiAgICAgIDxsaT4KICAgICAgICA8ZGl2IGNsYXNzPSJjb250YWluZXIiPgogICAgICAgICAgPGgzPkxpbmUtVGhyb3VnaDwvaDM+CiAgICAgICAgICA8cCBjbGFzcz0idGV4dC1saW5lZC10aHJvdWdoIj4KICAgICAgICAgICAgIk9wcG9ydHVuaXRpZXMgbXVsdGlwbHkgYXMgdGhleSBhcmUgc2VpemVkLiIgPGJyIC8+CiAgICAgICAgICAgIC0gU3VuIFR6dQogICAgICAgICAgPC9wPgogICAgICAgIDwvZGl2PgogICAgICA8L2xpPgogICAgICA8bGk+CiAgICAgICAgPGRpdiBjbGFzcz0iY29udGFpbmVyIj4KICAgICAgICAgIDxoMz5VbmRlcmxpbmU8L2gzPgogICAgICAgICAgPHAgY2xhc3M9InRleHQtdW5kZXJsaW5lZCI+CiAgICAgICAgICAgICJUaGUgb25seSB3YXkgdG8gZG8gZ3JlYXQgd29yayBpcyB0byBsb3ZlIHdoYXQgeW91IGRvLiIgPGJyIC8+CiAgICAgICAgICAgIC0gU3RldmUgSm9icwogICAgICAgICAgPC9wPgogICAgICAgIDwvZGl2PgogICAgICA8L2xpPgogICAgICA8bGk+CiAgICAgICAgPGRpdiBjbGFzcz0iY29udGFpbmVyIj4KICAgICAgICAgIDxoMz5PdmVybGluZTwvaDM+CiAgICAgICAgICA8cCBjbGFzcz0idGV4dC1vdmVybGluZWQiPgogICAgICAgICAgICAiU3VjY2VzcyBpcyBub3QgZmluYWwsIGZhaWx1cmUgaXMgbm90IGZhdGFsOiBpdCBpcyB0aGUgY291cmFnZSB0bwogICAgICAgICAgICBjb250aW51ZSB0aGF0IGNvdW50cy4iIDxiciAvPgogICAgICAgICAgICAtIFdpbnN0b24gQ2h1cmNoaWxsCiAgICAgICAgICA8L3A+CiAgICAgICAgPC9kaXY+CiAgICAgIDwvbGk+CiAgICA8L3VsPgogIDwvYm9keT4KPC9odG1sPg==

LyogQ3VycmVudCBmb2N1cyAqLwoudGV4dC1ub25lIHsKICB0ZXh0LWRlY29yYXRpb246IG5vbmU7Cn0KCi50ZXh0LWxpbmVkLXRocm91Z2ggewogIHRleHQtZGVjb3JhdGlvbjogbGluZS10aHJvdWdoOwp9CgoudGV4dC11bmRlcmxpbmVkIHsKICB0ZXh0LWRlY29yYXRpb246IHVuZGVybGluZTsKfQoKLnRleHQtb3ZlcmxpbmVkIHsKICB0ZXh0LWRlY29yYXRpb246IG92ZXJsaW5lOwp9CgovKiBBZGRpdGlvbmFsIHN0eWxlcyBmb3IgYmV0dGVyIGFwcGVhcmFuY2UgKG5vdCB0aGUgY3VycmVudCBmb2N1cykgKi8KYm9keSB7CiAgZm9udC1mYW1pbHk6ICdNb250c2VycmF0Jywgc2Fucy1zZXJpZjsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAgYmFja2dyb3VuZC1jb2xvcjogI2Y0ZjRmNDsKICBtYXJnaW46IDA7CiAgdGV4dC1hbGlnbjogY2VudGVyOwp9Cgp1bCB7CiAgZGlzcGxheTogZmxleDsKICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWFyb3VuZDsKICBsaXN0LXN0eWxlOiBub25lOwogIHBhZGRpbmctbGVmdDogMDsKICBmbGV4LXdyYXA6IHdyYXA7CiAgZ2FwOiAxMHB4Owp9CgouY29udGFpbmVyIHsKICB3aWR0aDogMjgwcHg7CiAgYm9yZGVyOiAxcHggZGFzaGVkIGRhcmtzYWxtb247CiAgcGFkZGluZzogMTBweDsKICBib3JkZXItcmFkaXVzOiA4cHg7CiAgYmFja2dyb3VuZC1jb2xvcjogd2hpdGU7CiAgYm94LXNoYWRvdzogMnB4IDJweCA4cHggcmdiYSgwLCAwLCAwLCAwLjEpOwp9CgpoMyB7CiAgdGV4dC1hbGlnbjogY2VudGVyOwogIG1hcmdpbi1ib3R0b206IDEwcHg7Cn0KCi50ZXh0LWxpbmVkLXRocm91Z2ggewogIGNvbG9yOiBncmF5Owp9CgoudGV4dC11bmRlcmxpbmVkIHsKICBjb2xvcjogZGFya2JsdWU7CiAgZm9udC13ZWlnaHQ6IGJvbGQ7Cn0KCi50ZXh0LW92ZXJsaW5lZCB7CiAgY29sb3I6IGRhcmtncmVlbjsKICBmb250LXN0eWxlOiBpdGFsaWM7Cn0=

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      /* Current focus */
      .text-none {
        text-decoration: none;
      }

      .text-lined-through {
        text-decoration: line-through;
      }

      .text-underlined {
        text-decoration: underline;
      }

      .text-overlined {
        text-decoration: overline;
      }

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

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

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

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

      .text-lined-through {
        color: gray;
      }

      .text-underlined {
        color: darkblue;
        font-weight: bold;
      }

      .text-overlined {
        color: darkgreen;
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <div class="container">
          <h3>Без оформлення</h3>
          <p class="text-none">
            "Простота — це найвища форма витонченості." <br>
            - Леонардо да Вінчі
          </p>
        </div>
      </li>
      <li>
        <div class="container">
          <h3>Закреслення</h3>
          <p class="text-lined-through">
            "Можливості примножуються, коли їх використовують." <br>
            - Сунь-цзи
          </p>
        </div>
      </li>
      <li>
        <div class="container">
          <h3>Підкреслення</h3>
          <p class="text-underlined">
            "Єдиний спосіб робити велику справу — це любити те, що ти робиш." <br>
            - Стів Джобс
          </p>
        </div>
      </li>
      <li>
        <div class="container">
          <h3>Надрядкове оформлення</h3>
          <p class="text-overlined">
            "Успіх — не остаточний, невдача — не фатальна: значення має лише
            мужність продовжувати." <br>
            - Вінстон Черчилль
          </p>
        </div>
      </li>
    </ul>
  </body>
</html>


## text-transform
Властивість `text-transform` дозволяє змінювати регістр текстового вмісту в HTML-елементах.

```css
text-transform: capitalize | lowercase | uppercase | none
```

Розглянемо різницю між усіма значеннями цієї властивості:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8dWw+CiAgICAgIDxsaT4KICAgICAgICA8ZGl2IGNsYXNzPSJjb250YWluZXIiPgogICAgICAgICAgPGgzPkNhcGl0YWxpemVkPC9oMz4KICAgICAgICAgIDxwIGNsYXNzPSJjYXBpdGFsaXplZC10ZXh0Ij4KICAgICAgICAgICAgIkxpZmUgaXMgd2hhdCBoYXBwZW5zIHdoZW4geW91J3JlIGJ1c3kgbWFraW5nIG90aGVyIHBsYW5zLiIgPGJyIC8+CiAgICAgICAgICAgIC0gSm9obiBMZW5ub24KICAgICAgICAgIDwvcD4KICAgICAgICA8L2Rpdj4KICAgICAgPC9saT4KICAgICAgPGxpPgogICAgICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgICAgICA8aDM+VXBwZXJjYXNlZDwvaDM+CiAgICAgICAgICA8cCBjbGFzcz0idXBwZXJjYXNlZC10ZXh0Ij4KICAgICAgICAgICAgIlN1Y2Nlc3MgaXMgbm90IGZpbmFsLCBmYWlsdXJlIGlzIG5vdCBmYXRhbDogaXQgaXMgdGhlIGNvdXJhZ2UgdG8KICAgICAgICAgICAgY29udGludWUgdGhhdCBjb3VudHMuIiA8YnIgLz4KICAgICAgICAgICAgLSBXaW5zdG9uIENodXJjaGlsbAogICAgICAgICAgPC9wPgogICAgICAgIDwvZGl2PgogICAgICA8L2xpPgogICAgICA8bGk+CiAgICAgICAgPGRpdiBjbGFzcz0iY29udGFpbmVyIj4KICAgICAgICAgIDxoMz5Mb3dlcmNhc2VkPC9oMz4KICAgICAgICAgIDxwIGNsYXNzPSJsb3dlcmNhc2VkLXRleHQiPgogICAgICAgICAgICAiVEhFIE9OTFkgTElNSVQgVE8gT1VSIFJFQUxJWkFUSU9OIE9GIFRPTU9SUk9XIElTIE9VUiBET1VCVFMgT0YKICAgICAgICAgICAgVE9EQVkuIiA8YnIgLz4KICAgICAgICAgICAgLSBGcmFua2xpbiBELiBSb29zZXZlbHQKICAgICAgICAgIDwvcD4KICAgICAgICA8L2Rpdj4KICAgICAgPC9saT4KICAgICAgPGxpPgogICAgICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgICAgICA8aDM+Tm90IE1vZGlmaWVkPC9oMz4KICAgICAgICAgIDxwIGNsYXNzPSJub3QtbW9kaWZpZWQtdGV4dCI+CiAgICAgICAgICAgICJEbyB3aGF0IHlvdSBjYW4sIHdpdGggd2hhdCB5b3UgaGF2ZSwgd2hlcmUgeW91IGFyZS4iIDxiciAvPgogICAgICAgICAgICAtIFRoZW9kb3JlIFJvb3NldmVsdAogICAgICAgICAgPC9wPgogICAgICAgIDwvZGl2PgogICAgICA8L2xpPgogICAgPC91bD4KICA8L2JvZHk+CjwvaHRtbD4=

LyogQ3VycmVudCBmb2N1cyAqLwouY2FwaXRhbGl6ZWQtdGV4dCB7CiAgdGV4dC10cmFuc2Zvcm06IGNhcGl0YWxpemU7Cn0KCi51cHBlcmNhc2VkLXRleHQgewogIHRleHQtdHJhbnNmb3JtOiB1cHBlcmNhc2U7Cn0KCi5sb3dlcmNhc2VkLXRleHQgewogIHRleHQtdHJhbnNmb3JtOiBsb3dlcmNhc2U7Cn0KCi5ub3QtbW9kaWZpZWQtdGV4dCB7CiAgdGV4dC10cmFuc2Zvcm06IG5vbmU7Cn0KCi8qIEFkZGl0aW9uYWwgc3R5bGVzIGZvciBiZXR0ZXIgYXBwZWFyYW5jZSAobm90IHRoZSBjdXJyZW50IGZvY3VzKSAqLwpib2R5IHsKICBmb250LWZhbWlseTogJ1JvYm90bycsIHNhbnMtc2VyaWY7CiAgZGlzcGxheTogZmxleDsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGJhY2tncm91bmQtY29sb3I6ICNmOWY5Zjk7CiAgbWFyZ2luOiAwOwogIHRleHQtYWxpZ246IGNlbnRlcjsKfQoKdWwgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7CiAgbGlzdC1zdHlsZTogbm9uZTsKICBwYWRkaW5nLWxlZnQ6IDA7CiAgZmxleC13cmFwOiB3cmFwOwogIGdhcDogMTBweDsKfQoKLmNvbnRhaW5lciB7CiAgd2lkdGg6IDI4MHB4OwogIGJvcmRlcjogMXB4IGRhc2hlZCBkYXJrc2FsbW9uOwogIHBhZGRpbmc6IDEwcHg7CiAgYm9yZGVyLXJhZGl1czogOHB4OwogIGJhY2tncm91bmQtY29sb3I6IHdoaXRlOwogIGJveC1zaGFkb3c6IDJweCAycHggOHB4IHJnYmEoMCwgMCwgMCwgMC4xKTsKfQoKaDMgewogIHRleHQtYWxpZ246IGNlbnRlcjsKICBtYXJnaW4tYm90dG9tOiAxMHB4Owp9

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      /* Current focus */
      .capitalized-text {
        text-transform: capitalize;
      }

      .uppercased-text {
        text-transform: uppercase;
      }

      .lowercased-text {
        text-transform: lowercase;
      }

      .not-modified-text {
        text-transform: none;
      }

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

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

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

      h3 {
        text-align: center;
        margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <div class="container">
          <h3>З великої літери</h3>
          <p class="capitalized-text">
            "Життя — це те, що відбувається, поки ти будуєш інші плани." <br>
            - Джон Леннон
          </p>
        </div>
      </li>
      <li>
        <div class="container">
          <h3>Верхній регістр</h3>
          <p class="uppercased-text">
            "Успіх — не остаточний, невдача — не фатальна: значення має лише
            мужність продовжувати." <br>
            - Вінстон Черчилль
          </p>
        </div>
      </li>
      <li>
        <div class="container">
          <h3>Нижній регістр</h3>
          <p class="lowercased-text">
            "ЄДИНЕ ОБМЕЖЕННЯ НАШОГО ЗАВТРА — ЦЕ НАШІ СУМНІВИ СЬОГОДНІ." <br>
            - Франклін Д. Рузвельт
          </p>
        </div>
      </li>
      <li>
        <div class="container">
          <h3>Без змін</h3>
          <p class="not-modified-text">
            "Роби те, що можеш, з тим, що маєш, там, де ти є." <br>
            - Теодор Рузвельт
          </p>
        </div>
      </li>
    </ul>
  </body>
</html>


## text-align
Властивість `text-align` дозволяє горизонтально вирівнювати текстовий вміст.

```css
text-align: start | end | center | justify
``` 

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8dWw+CiAgICAgIDxsaT4KICAgICAgICA8ZGl2IGNsYXNzPSJjb250YWluZXIgdGV4dC1zdGFydCI+CiAgICAgICAgICA8aDM+U3RhcnQ8L2gzPgogICAgICAgICAgPHA+CiAgICAgICAgICAgICJUaGUgYmVzdCB3YXkgdG8gcHJlZGljdCB0aGUgZnV0dXJlIGlzIHRvIGNyZWF0ZSBpdC4iIDxiciAvPgogICAgICAgICAgICA8c3Bhbj4tIFBldGVyIERydWNrZXI8L3NwYW4+CiAgICAgICAgICA8L3A+CiAgICAgICAgPC9kaXY+CiAgICAgIDwvbGk+CiAgICAgIDxsaT4KICAgICAgICA8ZGl2IGNsYXNzPSJjb250YWluZXIgdGV4dC1lbmQiPgogICAgICAgICAgPGgzPkVuZDwvaDM+CiAgICAgICAgICA8cD4KICAgICAgICAgICAgIkRyZWFtIGJpZyBhbmQgZGFyZSB0byBmYWlsLiIgPGJyIC8+CiAgICAgICAgICAgIDxzcGFuPi0gTm9ybWFuIFZhdWdoYW48L3NwYW4+CiAgICAgICAgICA8L3A+CiAgICAgICAgPC9kaXY+CiAgICAgIDwvbGk+CiAgICAgIDxsaT4KICAgICAgICA8ZGl2IGNsYXNzPSJjb250YWluZXIgdGV4dC1jZW50ZXIiPgogICAgICAgICAgPGgzPkNlbnRlcjwvaDM+CiAgICAgICAgICA8cD4KICAgICAgICAgICAgIkFjdCBhcyBpZiB3aGF0IHlvdSBkbyBtYWtlcyBhIGRpZmZlcmVuY2UuIEl0IGRvZXMuIiA8YnIgLz4KICAgICAgICAgICAgPHNwYW4+LSBXaWxsaWFtIEphbWVzPC9zcGFuPgogICAgICAgICAgPC9wPgogICAgICAgIDwvZGl2PgogICAgICA8L2xpPgogICAgICA8bGk+CiAgICAgICAgPGRpdiBjbGFzcz0iY29udGFpbmVyIHRleHQtanVzdGlmeSI+CiAgICAgICAgICA8aDM+SnVzdGlmeTwvaDM+CiAgICAgICAgICA8cD4KICAgICAgICAgICAgIlBlcmZlY3Rpb24gaXMgbm90IGF0dGFpbmFibGUsIGJ1dCBpZiB3ZSBjaGFzZSBwZXJmZWN0aW9uIHdlIGNhbgogICAgICAgICAgICBjYXRjaCBleGNlbGxlbmNlLiIgPGJyIC8+CiAgICAgICAgICAgIDxzcGFuPi0gVmluY2UgTG9tYmFyZGk8L3NwYW4+CiAgICAgICAgICA8L3A+CiAgICAgICAgPC9kaXY+CiAgICAgIDwvbGk+CiAgICA8L3VsPgogIDwvYm9keT4KPC9odG1sPg==

LyogQ3VycmVudCBmb2N1cyAqLwoudGV4dC1zdGFydCB7CiAgdGV4dC1hbGlnbjogc3RhcnQ7Cn0KCi50ZXh0LWVuZCB7CiAgdGV4dC1hbGlnbjogZW5kOwp9CgoudGV4dC1jZW50ZXIgewogIHRleHQtYWxpZ246IGNlbnRlcjsKfQoKLnRleHQtanVzdGlmeSB7CiAgdGV4dC1hbGlnbjoganVzdGlmeTsKfQoKLyogQWRkaXRpb25hbCBzdHlsZXMgZm9yIGJldHRlciBhcHBlYXJhbmNlIChub3QgdGhlIGN1cnJlbnQgZm9jdXMpICovCmJvZHkgewogIGZvbnQtZmFtaWx5OiAnTG9yYScsIHNlcmlmOwogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjZjNmM2YzOwogIG1hcmdpbjogMDsKICB0ZXh0LWFsaWduOiBjZW50ZXI7Cn0KCnVsIHsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogc3BhY2UtYXJvdW5kOwogIGxpc3Qtc3R5bGU6IG5vbmU7CiAgcGFkZGluZy1sZWZ0OiAwOwogIGZsZXgtd3JhcDogd3JhcDsKICBnYXA6IDEwcHg7Cn0KCi5jb250YWluZXIgewogIHdpZHRoOiAyODBweDsKICBib3JkZXI6IDFweCBkYXNoZWQgZGFya3NhbG1vbjsKICBwYWRkaW5nOiAxMHB4OwogIGJvcmRlci1yYWRpdXM6IDhweDsKICBiYWNrZ3JvdW5kLWNvbG9yOiB3aGl0ZTsKICBib3gtc2hhZG93OiAycHggMnB4IDhweCByZ2JhKDAsIDAsIDAsIDAuMSk7Cn0KCmgzIHsKICB0ZXh0LWFsaWduOiBjZW50ZXI7CiAgbWFyZ2luLXRvcDogMDsKICBtYXJnaW4tYm90dG9tOiAxMHB4Owp9CgpzcGFuIHsKICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7CiAgbWFyZ2luLXRvcDogMTBweDsKfQ==

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      /* Current focus */
      .text-start {
        text-align: start;
      }

      .text-end {
        text-align: end;
      }

      .text-center {
        text-align: center;
      }

      .text-justify {
        text-align: justify;
      }

      /* Additional styles for better appearance (not the current focus) */
      body {
        font-family: 'Lora', serif;
        display: flex;
        justify-content: center;
        align-items: center;
        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: 10px;
      }

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

      h3 {
        text-align: center;
        margin-top: 0;
        margin-bottom: 10px;
      }

      span {
        display: inline-block;
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <div class="container text-start">
          <h3>Зліва</h3>
          <p>
            "Найкращий спосіб передбачити майбутнє — створити його." <br>
            <span>- Пітер Друкер</span>
          </p>
        </div>
      </li>
      <li>
        <div class="container text-end">
          <h3>Справа</h3>
          <p>
            "Мрій масштабно та наважуйся на невдачі." <br>
            <span>- Норман Вон</span>
          </p>
        </div>
      </li>
      <li>
        <div class="container text-center">
          <h3>По центру</h3>
          <p>
            "Дій так, ніби твої вчинки мають значення. Вони дійсно мають." <br>
            <span>- Вільям Джеймс</span>
          </p>
        </div>
      </li>
      <li>
        <div class="container text-justify">
          <h3>По ширині</h3>
          <p>
            "Досконалість недосяжна, але якщо ми будемо прагнути до неї,
            ми зможемо досягти відмінних результатів." <br>
            <span>- Вінс Ломбарді</span>
          </p>
        </div>
      </li>
    </ul>
  </body>
</html>

Яка CSS властивість дозволяє змінювати регістр текстового вмісту?

Яка CSS-властивість дозволяє горизонтально вирівнювати текстовий вміст?

Яка CSS-властивість дозволяє додавати візуальні ефекти до текстового вмісту, такі як підкреслення або закреслення?

Опануйте основи CSS (Cascading Style Sheets) — мови стилізації, що визначає зовнішній вигляд вебсторінок. Досліджуйте ключові поняття, такі як стилі тексту, кольори, відступи, модель коробки, Flexbox і декоративні ефекти. Формуйте навички створення візуально привабливих і структурованих вебсторінок. Ідеально підходить для початківців, які прагнуть закласти міцну базу в CSS.

Дізнайтеся, що таке CSS, як підключити його до HTML і як стилізувати елементи HTML за допомогою селекторів. Ознайомтеся з базовими поняттями, такими як кольори тексту, псевдокласи дій користувача та змінні в CSS.

Дізнайтеся, як стилізувати та форматувати текст на вебсторінках. Ознайомтеся із застосуванням користувацьких шрифтів і різноманітних властивостей шрифтів для покращення вигляду тексту.

Вивчення основ моделі коробки, яка визначає розташування та відступи елементів на веб-сторінці. Ознайомлення з поняттями розміру коробки, додаванням простору до елементів, роботою з блочними та рядковими елементами, а також використанням структурних і функціональних псевдокласів для розширеного стилізування.

Ознайомлення з Flexbox — потужним методом розміщення елементів у CSS для організації рядків і стовпців. Вивчення керування напрямком, вирівнюванням і відстанями між елементами по горизонталі та вертикалі, а також налаштування окремих flex-елементів для точного макетування.

Дізнайтеся, як підвищити візуальну привабливість веб-сторінок за допомогою CSS. Ознайомтеся з техніками застосування кольорів і зображень фону, стилізації зображень, використання декоративних псевдоелементів і додавання тіней для створення ефектних дизайнів.

Опанування Стилізацією Тексту в CSS

text-decoration

Вивід

text-transform

Вивід

text-align

Вивід

1. Яка CSS властивість дозволяє змінювати регістр текстового вмісту?

2. Яка CSS-властивість дозволяє горизонтально вирівнювати текстовий вміст?

3. Яка CSS-властивість дозволяє додавати візуальні ефекти до текстового вмісту, такі як підкреслення або закреслення?