## 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+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDx1bD4KICAgICAgPGxpPgogICAgICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgICAgICA8aDM+bm9uZTwvaDM+CiAgICAgICAgICA8YSBjbGFzcz0ibGluayI+TGlua3MgYXJlIHVuZGVybGluZWQgYnkgZGVmYXVsdC4gV2UgZml4IGl0PC9hPgogICAgICAgIDwvZGl2PgogICAgICA8L2xpPgogICAgICA8bGk+CiAgICAgICAgPGRpdiBjbGFzcz0iY29udGFpbmVyIj4KICAgICAgICAgIDxoMz5saW5lLXRocm91Z2g8L2gzPgogICAgICAgICAgPHAgY2xhc3M9InRleHQtbGluZWQtdGhyb3VnaCI+CiAgICAgICAgICAgIExvcmVtLCBpcHN1bSBkb2xvciBzaXQgYW1ldCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBVdCwgc2VxdWkuCiAgICAgICAgICA8L3A+CiAgICAgICAgPC9kaXY+CiAgICAgIDwvbGk+CiAgICAgIDxsaT4KICAgICAgICA8ZGl2IGNsYXNzPSJjb250YWluZXIiPgogICAgICAgICAgPGgzPnVuZGVybGluZTwvaDM+CiAgICAgICAgICA8cCBjbGFzcz0idGV4dC11bmRlcmxpbmVkIj4KICAgICAgICAgICAgTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gUmVpY2llbmRpcywKICAgICAgICAgICAgb3B0aW8hCiAgICAgICAgICA8L3A+CiAgICAgICAgPC9kaXY+CiAgICAgIDwvbGk+CiAgICAgIDxsaT4KICAgICAgICA8ZGl2IGNsYXNzPSJjb250YWluZXIiPgogICAgICAgICAgPGgzPm92ZXJsaW5lPC9oMz4KICAgICAgICAgIDxwIGNsYXNzPSJ0ZXh0LW92ZXItbGluZWQiPgogICAgICAgICAgICBMb3JlbSBpcHN1bSwgZG9sb3Igc2l0IGFtZXQgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gQ29tbW9kaSwKICAgICAgICAgICAgc2ltaWxpcXVlIQogICAgICAgICAgPC9wPgogICAgICAgIDwvZGl2PgogICAgICA8L2xpPgogICAgPC91bD4KICA8L2JvZHk+CjwvaHRtbD4=

LmxpbmsgewogIHRleHQtZGVjb3JhdGlvbjogbm9uZTsKfQoKLnRleHQtbGluZWQtdGhyb3VnaCB7CiAgdGV4dC1kZWNvcmF0aW9uOiBsaW5lLXRocm91Z2g7Cn0KCi50ZXh0LXVuZGVybGluZWQgewogIHRleHQtZGVjb3JhdGlvbjogdW5kZXJsaW5lOwp9CgoudGV4dC1vdmVyLWxpbmVkIHsKICB0ZXh0LWRlY29yYXRpb246IG92ZXJsaW5lOwp9CgovKiBUaGlzIHBhcnQgaXMgbm90IHRoZSBmb2N1cyBvZiB0aGUgY3VycmVudCBjaGFwdGVyLiBXZSB3aWxsIGNvbnNpZGVyIGl0IGZ1cnRoZXIuICovCnVsIHsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogc3BhY2UtYXJvdW5kOwogIGxpc3Qtc3R5bGU6IG5vbmU7CiAgcGFkZGluZy1sZWZ0OiAwOwp9CgouY29udGFpbmVyIHsKICB3aWR0aDogMTYwcHg7CiAgYm9yZGVyOiAxcHggZGFzaGVkIGRhcmtzYWxtb247Cn0KCmgzIHsKICB0ZXh0LWFsaWduOiBjZW50ZXI7Cn0=

## 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+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDx1bD4KICAgICAgPGxpPgogICAgICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgICAgICA8aDM+Y2FwaXRhbGl6ZWQ8L2gzPgogICAgICAgICAgPHAgY2xhc3M9ImNhcGl0YWxpemVkLXRleHQiPgogICAgICAgICAgICBMb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBNYXhpbWUsCiAgICAgICAgICAgIHVsbGFtPwogICAgICAgICAgPC9wPgogICAgICAgIDwvZGl2PgogICAgICA8L2xpPgogICAgICA8bGk+CiAgICAgICAgPGRpdiBjbGFzcz0iY29udGFpbmVyIj4KICAgICAgICAgIDxoMz51cHBlcmNhc2U8L2gzPgogICAgICAgICAgPHAgY2xhc3M9InVwcGVyY2FzZWQtdGV4dCI+CiAgICAgICAgICAgIExvcmVtLCBpcHN1bSBkb2xvciBzaXQgYW1ldCBjb25zZWN0ZXR1ciBhZGlwaXNpY2luZyBlbGl0LiBVdCwgc2VxdWkuCiAgICAgICAgICA8L3A+CiAgICAgICAgPC9kaXY+CiAgICAgIDwvbGk+CiAgICAgIDxsaT4KICAgICAgICA8ZGl2IGNsYXNzPSJjb250YWluZXIiPgogICAgICAgICAgPGgzPmxvd2VyY2FzZTwvaDM+CiAgICAgICAgICA8cCBjbGFzcz0ibG93ZXJjYXNlZC10ZXh0Ij4KICAgICAgICAgICAgTG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gUmVpY2llbmRpcywKICAgICAgICAgICAgb3B0aW8hCiAgICAgICAgICA8L3A+CiAgICAgICAgPC9kaXY+CiAgICAgIDwvbGk+CiAgICAgIDxsaT4KICAgICAgICA8ZGl2IGNsYXNzPSJjb250YWluZXIiPgogICAgICAgICAgPGgzPm5vbmU8L2gzPgogICAgICAgICAgPHAgY2xhc3M9Im5vdC1tb2RpZmllZC10ZXh0Ij4KICAgICAgICAgICAgTG9yZW0gaXBzdW0sIGRvbG9yIHNpdCBhbWV0IGNvbnNlY3RldHVyIGFkaXBpc2ljaW5nIGVsaXQuIENvbW1vZGksCiAgICAgICAgICAgIHNpbWlsaXF1ZSEKICAgICAgICAgIDwvcD4KICAgICAgICA8L2Rpdj4KICAgICAgPC9saT4KICAgIDwvdWw+CiAgPC9ib2R5Pgo8L2h0bWw+

LmNhcGl0YWxpemVkLXRleHQgewogIHRleHQtdHJhbnNmb3JtOiBjYXBpdGFsaXplOwp9CgoudXBwZXJjYXNlZC10ZXh0IHsKICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlOwp9CgoubG93ZXJjYXNlZC10ZXh0IHsKICB0ZXh0LXRyYW5zZm9ybTogbG93ZXJjYXNlOwp9Cgoubm90LW1vZGlmaWVkLXRleHQgewogIHRleHQtdHJhbnNmb3JtOiBub25lOwp9CgovKiBUaGlzIHBhcnQgaXMgbm90IHRoZSBmb2N1cyBvZiB0aGUgY3VycmVudCBjaGFwdGVyLiBXZSB3aWxsIGNvbnNpZGVyIGl0IGZ1cnRoZXIuICovCnVsIHsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogc3BhY2UtYXJvdW5kOwogIGxpc3Qtc3R5bGU6IG5vbmU7CiAgcGFkZGluZy1sZWZ0OiAwOwp9CgouY29udGFpbmVyIHsKICB3aWR0aDogMTYwcHg7CiAgYm9yZGVyOiAxcHggZGFzaGVkIGRhcmtzYWxtb247Cn0KCmgzIHsKICB0ZXh0LWFsaWduOiBjZW50ZXI7Cn0=

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

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

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDx1bD4KICAgICAgPGxpPgogICAgICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgICAgICA8aDM+c3RhcnQ8L2gzPgogICAgICAgICAgPHAgY2xhc3M9InRleHQtc3RhcnQiPkxvcmVtLCBpcHN1bS48L3A+CiAgICAgICAgPC9kaXY+CiAgICAgIDwvbGk+CiAgICAgIDxsaT4KICAgICAgICA8ZGl2IGNsYXNzPSJjb250YWluZXIiPgogICAgICAgICAgPGgzPmVuZDwvaDM+CiAgICAgICAgICA8cCBjbGFzcz0idGV4dC1lbmQiPkxvcmVtLCBpcHN1bS48L3A+CiAgICAgICAgPC9kaXY+CiAgICAgIDwvbGk+CiAgICAgIDxsaT4KICAgICAgICA8ZGl2IGNsYXNzPSJjb250YWluZXIiPgogICAgICAgICAgPGgzPmNlbnRlcjwvaDM+CiAgICAgICAgICA8cCBjbGFzcz0idGV4dC1jZW50ZXIiPkxvcmVtLCBpcHN1bS48L3A+CiAgICAgICAgPC9kaXY+CiAgICAgIDwvbGk+CiAgICAgIDxsaT4KICAgICAgICA8ZGl2IGNsYXNzPSJjb250YWluZXIiPgogICAgICAgICAgPGgzPmp1c3RpZnk8L2gzPgogICAgICAgICAgPHAgY2xhc3M9InRleHQtanVzdGlmeSI+TG9yZW0sIGlwc3VtLjwvcD4KICAgICAgICAgIDxwIGNsYXNzPSJ0ZXh0LWp1c3RpZnkiPgogICAgICAgICAgICBMb3JlbSBpcHN1bSBkb2xvciwgc2l0IGFtZXQgY29uc2VjdGV0dXIgYWRpcGlzaWNpbmcgZWxpdC4gU2VxdWksCiAgICAgICAgICAgIHZvbHVwdGF0ZXMuCiAgICAgICAgICA8L3A+CiAgICAgICAgPC9kaXY+CiAgICAgIDwvbGk+CiAgICA8L3VsPgogIDwvYm9keT4KPC9odG1sPg==

aDMgewogIHRleHQtYWxpZ246IGNlbnRlcjsKfQoKLnRleHQtc3RhcnQgewogIHRleHQtYWxpZ246IHN0YXJ0Owp9CgoudGV4dC1lbmQgewogIHRleHQtYWxpZ246IGVuZDsKfQoKLnRleHQtY2VudGVyIHsKICB0ZXh0LWFsaWduOiBjZW50ZXI7Cn0KCi50ZXh0LWp1c3RpZnkgewogIHRleHQtYWxpZ246IGp1c3RpZnk7Cn0KCi8qIFRoaXMgcGFydCBpcyBub3QgdGhlIGZvY3VzIG9mIHRoZSBjdXJyZW50IGNoYXB0ZXIuIFdlIHdpbGwgY29uc2lkZXIgaXQgZnVydGhlci4gKi8KdWwgewogIGRpc3BsYXk6IGZsZXg7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1hcm91bmQ7CiAgbGlzdC1zdHlsZTogbm9uZTsKICBwYWRkaW5nLWxlZnQ6IDA7Cn0KCi5jb250YWluZXIgewogIHdpZHRoOiAxNjBweDsKICBib3JkZXI6IDFweCBkYXNoZWQgZGFya3NhbG1vbjsKfQ==

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

text-transform

text-align

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?