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
Egenskapen `text-decoration` kan tillämpas på all textinnehåll, inklusive länkar, rubriker, stycken och listor. Den lägger till linjeeffekter såsom understrykning. Vanliga värden:

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


Låt oss köra följande exempel och se skillnaden mellan alla egenskapens värden.

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>Ingen</h3>
          <p class="text-none">
            "Enkelhet är den yttersta sofistikeringen." <br>
            - Leonardo da Vinci
          </p>
        </div>
      </li>
      <li>
        <div class="container">
          <h3>Genomstruken</h3>
          <p class="text-lined-through">
            "Möjligheter mångfaldigas när de tas till vara." <br>
            - Sun Tzu
          </p>
        </div>
      </li>
      <li>
        <div class="container">
          <h3>Understruken</h3>
          <p class="text-underlined">
            "Det enda sättet att göra ett riktigt bra jobb är att älska det du gör." <br>
            - Steve Jobs
          </p>
        </div>
      </li>
      <li>
        <div class="container">
          <h3>Överstruken</h3>
          <p class="text-overlined">
            "Framgång är inte slutgiltig, misslyckande är inte ödesdigert: det är modet att fortsätta som räknas." <br>
            - Winston Churchill
          </p>
        </div>
      </li>
    </ul>
  </body>
</html>


## text-transform
Egenskapen `text-transform` gör det möjligt att ändra versaliseringen av textinnehåll i HTML-element.

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

Här är skillnaden mellan de olika värdena för egenskapen:

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>Versaliserad</h3>
          <p class="capitalized-text">
            "Livet är det som händer medan du är upptagen med att göra andra planer." <br>
            - John Lennon
          </p>
        </div>
      </li>
      <li>
        <div class="container">
          <h3>Versaler</h3>
          <p class="uppercased-text">
            "Framgång är inte slutgiltig, misslyckande är inte ödesdigert: det är modet att
            fortsätta som räknas." <br>
            - Winston Churchill
          </p>
        </div>
      </li>
      <li>
        <div class="container">
          <h3>Gemener</h3>
          <p class="lowercased-text">
            "DEN ENDA BEGRÄNSNINGEN FÖR VÅR FÖRVERKLIGANDE AV MORGONDAGEN ÄR VÅRA TVIVEL PÅ
            IDAG." <br>
            - Franklin D. Roosevelt
          </p>
        </div>
      </li>
      <li>
        <div class="container">
          <h3>Ej modifierad</h3>
          <p class="not-modified-text">
            "Gör vad du kan, med det du har, där du är." <br>
            - Theodore Roosevelt
          </p>
        </div>
      </li>
    </ul>
  </body>
</html>


## text-align
Egenskapen `text-align` används för att horisontellt justera textinnehåll.

```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>
            "Det bästa sättet att förutsäga framtiden är att skapa den." <br>
            <span>- Peter Drucker</span>
          </p>
        </div>
      </li>
      <li>
        <div class="container text-end">
          <h3>Slut</h3>
          <p>
            "Dröm stort och våga misslyckas." <br>
            <span>- Norman Vaughan</span>
          </p>
        </div>
      </li>
      <li>
        <div class="container text-center">
          <h3>Centrera</h3>
          <p>
            "Agera som om det du gör gör skillnad. Det gör det." <br>
            <span>- William James</span>
          </p>
        </div>
      </li>
      <li>
        <div class="container text-justify">
          <h3>Justera</h3>
          <p>
            "Perfektion är inte uppnåeligt, men om vi jagar perfektion kan vi
            nå framgång." <br>
            <span>- Vince Lombardi</span>
          </p>
        </div>
      </li>
    </ul>
  </body>
</html>

Vilken CSS-egenskap gör det möjligt att ändra versaliseringen av textinnehåll?

Vilken CSS-egenskap används för att horisontellt justera textinnehåll?

Vilken CSS-egenskap används för att lägga till visuella effekter på textinnehåll, såsom understrykning eller genomstrykning?

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.

Bemästra Textformatering i CSS

text-decoration

Utdata

text-transform

Utdata

text-align

Utdata

1. Vilken CSS-egenskap gör det möjligt att ändra versaliseringen av textinnehåll?

2. Vilken CSS-egenskap används för att horisontellt justera textinnehåll?

3. Vilken CSS-egenskap används för att lägga till visuella effekter på textinnehåll, såsom understrykning eller genomstrykning?

Awesome!

Bemästra Textformatering i CSS

text-decoration

Utdata

text-transform

Utdata

text-align

Utdata

1. Vilken CSS-egenskap gör det möjligt att ändra versaliseringen av textinnehåll?

2. Vilken CSS-egenskap används för att horisontellt justera textinnehåll?

3. Vilken CSS-egenskap används för att lägga till visuella effekter på textinnehåll, såsom understrykning eller genomstrykning?