Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Text Styling | Text Styles
CSS Fundamentals

book
Text Styling

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.

index.html

index.html

index.css

index.css

copy
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<ul>
<li>
<div class="container">
<h3>none</h3>
<a class="link">Links are underlined by default. We fix it</a>
</div>
</li>
<li>
<div class="container">
<h3>line-through</h3>
<p class="text-lined-through">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut, sequi.
</p>
</div>
</li>
<li>
<div class="container">
<h3>underline</h3>
<p class="text-underlined">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis,
optio!
</p>
</div>
</li>
<li>
<div class="container">
<h3>overline</h3>
<p class="text-over-lined">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Commodi,
similique!

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:

index.html

index.html

index.css

index.css

copy
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<ul>
<li>
<div class="container">
<h3>capitalized</h3>
<p class="capitalized-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime,
ullam?
</p>
</div>
</li>
<li>
<div class="container">
<h3>uppercase</h3>
<p class="uppercased-text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut, sequi.
</p>
</div>
</li>
<li>
<div class="container">
<h3>lowercase</h3>
<p class="lowercased-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis,
optio!
</p>
</div>
</li>
<li>
<div class="container">
<h3>none</h3>

text-align

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

css
text-align: start | end | center | justify
index.html

index.html

index.css

index.css

copy
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<ul>
<li>
<div class="container">
<h3>start</h3>
<p class="text-start">Lorem, ipsum.</p>
</div>
</li>
<li>
<div class="container">
<h3>end</h3>
<p class="text-end">Lorem, ipsum.</p>
</div>
</li>
<li>
<div class="container">
<h3>center</h3>
<p class="text-center">Lorem, ipsum.</p>
</div>
</li>
<li>
<div class="container">
<h3>justify</h3>
<p class="text-justify">Lorem, ipsum.</p>
<p class="text-justify">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi,
voluptates.
</p>
</div>
</li>
</ul>

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?

question mark

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

Select the correct answer

question mark

What CSS property allows to horizontally align text content?

Select the correct answer

question mark

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

Select the correct answer

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 2. Kapitel 1

Spørg AI

expand

Spørg AI

ChatGPT

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

We use cookies to make your experience better!
some-alt