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
Egenskaben `text-decoration` kan anvendes på alt tekstindhold, herunder links, overskrifter, afsnit og lister. Den tilføjer linjeeffekter såsom understregning. Almindelige værdier:

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


Se følgende eksempel for at observere forskellen mellem de forskellige egenskabsværdier.

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">
            "Enkelhed er den ultimative sofistikering." <br>
            - Leonardo da Vinci
          </p>
        </div>
      </li>
      <li>
        <div class="container">
          <h3>Gennemstreget</h3>
          <p class="text-lined-through">
            "Muligheder formerer sig, når de gribes." <br>
            - Sun Tzu
          </p>
        </div>
      </li>
      <li>
        <div class="container">
          <h3>Understreget</h3>
          <p class="text-underlined">
            "Den eneste måde at gøre et fantastisk stykke arbejde på er at elske det, du laver." <br>
            - Steve Jobs
          </p>
        </div>
      </li>
      <li>
        <div class="container">
          <h3>Overstreget</h3>
          <p class="text-overlined">
            "Succes er ikke endelig, fiasko er ikke fatal: det er modet til at
            fortsætte, der tæller." <br>
            - Winston Churchill
          </p>
        </div>
      </li>
    </ul>
  </body>
</html>


## text-transform
Egenskaben `text-transform` giver mulighed for at ændre store og små bogstaver i tekstindholdet i HTML-elementer.

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

Overvej forskellen mellem alle egenskabsværdierne:

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>Med stort begyndelsesbogstav</h3>
          <p class="capitalized-text">
            "Livet er det, der sker, mens du har travlt med at lægge andre planer." <br>
            - John Lennon
          </p>
        </div>
      </li>
      <li>
        <div class="container">
          <h3>Med store bogstaver</h3>
          <p class="uppercased-text">
            "Succes er ikke endelig, fiasko er ikke fatal: det er modet til
            at fortsætte, der tæller." <br>
            - Winston Churchill
          </p>
        </div>
      </li>
      <li>
        <div class="container">
          <h3>Med små bogstaver</h3>
          <p class="lowercased-text">
            "DEN ENESTE BEGRÆNSNING FOR VORES REALISERING AF I MORGEN ER VORES TVIVL OM
            I DAG." <br>
            - Franklin D. Roosevelt
          </p>
        </div>
      </li>
      <li>
        <div class="container">
          <h3>Ikke ændret</h3>
          <p class="not-modified-text">
            "Gør hvad du kan, med det du har, hvor du er." <br>
            - Theodore Roosevelt
          </p>
        </div>
      </li>
    </ul>
  </body>
</html>


## text-align
Egenskaben `text-align` giver mulighed for at justere tekstindhold vandret.

```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>
            "Den bedste måde at forudsige fremtiden på er at skabe den." <br>
            <span>- Peter Drucker</span>
          </p>
        </div>
      </li>
      <li>
        <div class="container text-end">
          <h3>Slut</h3>
          <p>
            "Drøm stort og tur at fejle." <br>
            <span>- Norman Vaughan</span>
          </p>
        </div>
      </li>
      <li>
        <div class="container text-center">
          <h3>Centrer</h3>
          <p>
            "Opfør dig som om det, du gør, gør en forskel. Det gør det." <br>
            <span>- William James</span>
          </p>
        </div>
      </li>
      <li>
        <div class="container text-justify">
          <h3>Justér</h3>
          <p>
            "Perfektion er ikke opnåelig, men hvis vi jagter perfektion,
            kan vi opnå fremragende resultater." <br>
            <span>- Vince Lombardi</span>
          </p>
        </div>
      </li>
    </ul>
  </body>
</html>

Hvilken CSS-egenskab gør det muligt at ændre store og små bogstaver i tekstindhold?

Hvilken CSS-egenskab gør det muligt at justere tekstindholdet vandret?

Hvilken CSS-egenskab gør det muligt at tilføje visuelle effekter til tekstindholdet, såsom understregning eller gennemstregning?

Behersk det grundlæggende i CSS (Cascading Style Sheets), sproget til at style og ændre udseendet af websider. Udforsk kernekoncepter som tekstformatering, farver, afstande, box-modellen, Flexbox og dekorative effekter. Opbyg kompetencer til at skabe visuelt tiltalende og velstrukturerede websider. Ideel for begyndere, der ønsker et solidt fundament i CSS.

Lær hvad CSS er, hvordan det forbindes med HTML, og hvordan HTML-elementer styles ved hjælp af selektorer. Udforsk grundlæggende begreber som tekstfarver, brugerhandlings-pseudoklasser og variabler i CSS.

Opdag, hvordan du kan formatere og style tekst på dine websider. Lær at anvende brugerdefinerede skrifttyper og udforsk forskellige skrifttypeegenskaber for at forbedre tekstens udseende.

Lær det grundlæggende om boksmodellen, som definerer layout og afstand for elementer på en webside. Udforsk begreber som boksstørrelse, tilføjelse af afstand til elementer, arbejde med blok- og inline-elementer samt anvendelse af strukturelle og funktionelle pseudoklasser til avanceret styling.

Opdag Flexbox, en effektiv CSS-layoutmetode til at arrangere elementer i rækker og kolonner. Lær at kontrollere retning, justering og afstand af elementer horisontalt og vertikalt samt tilpasse individuelle flex-elementer for præcise layouts.

Lær, hvordan du forbedrer det visuelle udtryk på dine websider med CSS. Udforsk teknikker til anvendelse af baggrundsfarver og -billeder, billedstyling, brug af dekorative pseudo-elementer samt tilføjelse af skygger for at skabe imponerende designs.

Mestring af Tekstformatering i CSS

text-decoration

Output

text-transform

Output

text-align

Output

1. Hvilken CSS-egenskab gør det muligt at ændre store og små bogstaver i tekstindhold?

2. Hvilken CSS-egenskab gør det muligt at justere tekstindholdet vandret?

3. Hvilken CSS-egenskab gør det muligt at tilføje visuelle effekter til tekstindholdet, såsom understregning eller gennemstregning?