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
A propriedade `text-decoration` pode ser aplicada a qualquer conteúdo de texto, incluindo links, títulos, parágrafos e listas. Ela adiciona efeitos de linha, como sublinhado. Valores comuns:

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


Veja o exemplo a seguir para observar a diferença entre todos os valores da propriedade.

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>Nenhum</h3>
          <p class="text-none">
            "A simplicidade é o auge da sofisticação." <br>
            - Leonardo da Vinci
          </p>
        </div>
      </li>
      <li>
        <div class="container">
          <h3>Tachado</h3>
          <p class="text-lined-through">
            "As oportunidades se multiplicam à medida que são aproveitadas." <br>
            - Sun Tzu
          </p>
        </div>
      </li>
      <li>
        <div class="container">
          <h3>Sublinhado</h3>
          <p class="text-underlined">
            "A única maneira de fazer um excelente trabalho é amar o que você faz." <br>
            - Steve Jobs
          </p>
        </div>
      </li>
      <li>
        <div class="container">
          <h3>Sobrelinha</h3>
          <p class="text-overlined">
            "O sucesso não é final, o fracasso não é fatal: o que conta é a coragem de continuar." <br>
            - Winston Churchill
          </p>
        </div>
      </li>
    </ul>
  </body>
</html>


## text-transform
A propriedade `text-transform` permite alterar a capitalização do conteúdo de texto em elementos HTML.

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

Vamos analisar a diferença entre todos os valores da propriedade:

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>Capitalizado</h3>
          <p class="capitalized-text">
            "A vida é o que acontece enquanto você está ocupado fazendo outros planos." <br>
            - John Lennon
          </p>
        </div>
      </li>
      <li>
        <div class="container">
          <h3>Maiúsculas</h3>
          <p class="uppercased-text">
            "O sucesso não é final, o fracasso não é fatal: é a coragem de continuar que conta." <br>
            - Winston Churchill
          </p>
        </div>
      </li>
      <li>
        <div class="container">
          <h3>Minúsculas</h3>
          <p class="lowercased-text">
            "O ÚNICO LIMITE PARA A NOSSA REALIZAÇÃO DO AMANHÃ SÃO AS NOSSAS DÚVIDAS DE HOJE." <br>
            - Franklin D. Roosevelt
          </p>
        </div>
      </li>
      <li>
        <div class="container">
          <h3>Sem Modificação</h3>
          <p class="not-modified-text">
            "Faça o que puder, com o que você tem, onde você está." <br>
            - Theodore Roosevelt
          </p>
        </div>
      </li>
    </ul>
  </body>
</html>


## text-align
A propriedade `text-align` permite alinhar horizontalmente o conteúdo do texto.

```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>Início</h3>
          <p>
            "A melhor maneira de prever o futuro é criá-lo." <br>
            <span>- Peter Drucker</span>
          </p>
        </div>
      </li>
      <li>
        <div class="container text-end">
          <h3>Fim</h3>
          <p>
            "Sonhe grande e ouse falhar." <br>
            <span>- Norman Vaughan</span>
          </p>
        </div>
      </li>
      <li>
        <div class="container text-center">
          <h3>Centralizar</h3>
          <p>
            "Aja como se o que você faz fizesse diferença. Faz sim." <br>
            <span>- William James</span>
          </p>
        </div>
      </li>
      <li>
        <div class="container text-justify">
          <h3>Justificar</h3>
          <p>
            "A perfeição não é alcançável, mas se perseguirmos a perfeição podemos
            alcançar a excelência." <br>
            <span>- Vince Lombardi</span>
          </p>
        </div>
      </li>
    </ul>
  </body>
</html>

Qual propriedade CSS permite alterar a capitalização do conteúdo do texto?

Qual propriedade CSS permite alinhar horizontalmente o conteúdo do texto?

Qual propriedade CSS permite adicionar efeitos visuais ao conteúdo do texto, como sublinhado ou tachado?

Domine os conceitos essenciais de CSS (Cascading Style Sheets), a linguagem de estilização que transforma a aparência das páginas web. Explore conceitos fundamentais como estilos de texto, cores, espaçamento, modelo de caixa, Flexbox e efeitos decorativos. Desenvolva habilidades para criar páginas web visualmente atraentes e bem estruturadas. Ideal para iniciantes que desejam estabelecer uma base sólida em CSS.

Aprenda o que é CSS, como conectá-lo ao HTML e como estilizar elementos HTML utilizando seletores. Explore conceitos fundamentais como cores de texto, pseudo-classes de ação do usuário e variáveis em CSS.

Descubra como estilizar e formatar texto em suas páginas web. Aprenda a aplicar fontes personalizadas e explore diversas propriedades de fonte para aprimorar a aparência do texto.

Aprenda os fundamentos do modelo de caixa, que define o layout e o espaçamento dos elementos em uma página web. Explore conceitos como dimensionamento de caixas, adição de espaço aos elementos, trabalho com elementos de bloco e em linha, e utilização de pseudo-classes estruturais e funcionais para estilização avançada.

Descubra o Flexbox, um método avançado de layout em CSS para organizar elementos em linhas e colunas. Aprenda a controlar a direção, o alinhamento e o espaçamento dos elementos horizontal e verticalmente, além de personalizar itens individuais para layouts precisos.

Aprenda a aprimorar o apelo visual de suas páginas web com CSS. Explore técnicas para aplicar cores e imagens de fundo, estilizar imagens, utilizar pseudo-elementos decorativos e adicionar sombras para criar designs impressionantes.

Dominando a Estilização de Texto em CSS

text-decoration

Saída

text-transform

Saída

text-align

Saída

1. Qual propriedade CSS permite alterar a capitalização do conteúdo do texto?

2. Qual propriedade CSS permite alinhar horizontalmente o conteúdo do texto?

3. Qual propriedade CSS permite adicionar efeitos visuais ao conteúdo do texto, como sublinhado ou tachado?

Awesome!

Dominando a Estilização de Texto em CSS

text-decoration

Saída

text-transform

Saída

text-align

Saída

1. Qual propriedade CSS permite alterar a capitalização do conteúdo do texto?

2. Qual propriedade CSS permite alinhar horizontalmente o conteúdo do texto?

3. Qual propriedade CSS permite adicionar efeitos visuais ao conteúdo do texto, como sublinhado ou tachado?