## text-decoration
The `text-decoration` property can be applied to any text content, including links, headings, paragraphs, and lists. It adds line effects such as underlining. Common values:

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


Let's run the following example and see the difference between all the property values.

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>None</h3>
          <p class="text-none">
            "Simplicity is the ultimate sophistication." <br />
            - Leonardo da Vinci
          </p>
        </div>
      </li>
      <li>
        <div class="container">
          <h3>Line-Through</h3>
          <p class="text-lined-through">
            "Opportunities multiply as they are seized." <br />
            - Sun Tzu
          </p>
        </div>
      </li>
      <li>
        <div class="container">
          <h3>Underline</h3>
          <p class="text-underlined">
            "The only way to do great work is to love what you do." <br />
            - Steve Jobs
          </p>
        </div>
      </li>
      <li>
        <div class="container">
          <h3>Overline</h3>
          <p class="text-overlined">
            "Success is not final, failure is not fatal: it is the courage to
            continue that counts." <br />
            - Winston Churchill
          </p>
        </div>
      </li>
    </ul>
  </body>
</html>


## text-transform
The `text-transform` property allows us to change the capitalization of text content in HTML elements.

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

Let's consider the difference between all the property values:

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>Capitalized</h3>
          <p class="capitalized-text">
            "Life is what happens when you're busy making other plans." <br />
            - John Lennon
          </p>
        </div>
      </li>
      <li>
        <div class="container">
          <h3>Uppercased</h3>
          <p class="uppercased-text">
            "Success is not final, failure is not fatal: it is the courage to
            continue that counts." <br />
            - Winston Churchill
          </p>
        </div>
      </li>
      <li>
        <div class="container">
          <h3>Lowercased</h3>
          <p class="lowercased-text">
            "THE ONLY LIMIT TO OUR REALIZATION OF TOMORROW IS OUR DOUBTS OF
            TODAY." <br />
            - Franklin D. Roosevelt
          </p>
        </div>
      </li>
      <li>
        <div class="container">
          <h3>Not Modified</h3>
          <p class="not-modified-text">
            "Do what you can, with what you have, where you are." <br />
            - Theodore Roosevelt
          </p>
        </div>
      </li>
    </ul>
  </body>
</html>


## text-align
The `text-align` property allows you to horizontally align text content.

```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>Start</h3>
          <p>
            "The best way to predict the future is to create it." <br />
            <span>- Peter Drucker</span>
          </p>
        </div>
      </li>
      <li>
        <div class="container text-end">
          <h3>End</h3>
          <p>
            "Dream big and dare to fail." <br />
            <span>- Norman Vaughan</span>
          </p>
        </div>
      </li>
      <li>
        <div class="container text-center">
          <h3>Center</h3>
          <p>
            "Act as if what you do makes a difference. It does." <br />
            <span>- William James</span>
          </p>
        </div>
      </li>
      <li>
        <div class="container text-justify">
          <h3>Justify</h3>
          <p>
            "Perfection is not attainable, but if we chase perfection we can
            catch excellence." <br />
            <span>- Vince Lombardi</span>
          </p>
        </div>
      </li>
    </ul>
  </body>
</html>

What CSS property allows to change the capitalization of text content?

What CSS property allows to horizontally align text content?

What CSS property allows you to add visual effects to the text content, such as underline or strike-through?

Master the essentials of CSS (Cascading Style Sheets), the styling language that transforms the look and feel of web pages. Explore core concepts such as text styles, colors, spacing, the box model, Flexbox, and decorative effects. Build the skills to create visually engaging and well-structured web pages. Perfect for beginners looking to establish a solid foundation in CSS.

Learn what CSS is, how to connect it with HTML, and how to style HTML elements using selectors. Explore foundational concepts like text colors, user action pseudo-classes, and variables in CSS.

Discover how to style and format text on your web pages. Learn to apply custom fonts and explore various font properties to enhance the appearance of text.

Learn the fundamentals of the box model, which defines the layout and spacing of elements on a web page. Explore concepts such as box sizing, adding space to elements, working with block-level and inline elements, and utilizing structural and functional pseudo-classes for advanced styling.

Discover Flexbox, a powerful CSS layout method for arranging elements in rows and columns. Learn how to control the direction, alignment, and spacing of elements horizontally and vertically, as well as customize individual flex items for precise layouts.

Learn how to enhance the visual appeal of your web pages with CSS. Explore techniques for applying background colors and images, styling images, using decorative pseudo-elements, and adding shadows to create stunning designs.

CSS Fundamentals

Text Styling

text-decoration

Output

text-transform

Output

text-align

Output

1. What CSS property allows to change the capitalization of text content?

2. What CSS property allows to horizontally align text content?

3. What CSS property allows you to add visual effects to the text content, such as underline or strike-through?