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:
csstext-decoration: none | line-through | underline | overline
Let's run the following example and see the difference between all the property values.
index.html
index.css
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!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!
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.link {
text-decoration: none;
}
.text-lined-through {
text-decoration: line-through;
}
.text-underlined {
text-decoration: underline;
}
.text-over-lined {
text-decoration: overline;
}
/* This part is not the focus of the current chapter. We will consider it further. */
ul {
display: flex;
justify-content: space-around;
list-style: none;
padding-left: 0;
}
.container {
width: 160px;
border: 1px dashed darksalmon;
}
h3 {
text-align: center;
}
text-transform
The text-transform property allows us to change the capitalization of text content in HTML elements.
csstext-transform: capitalize | lowercase | uppercase | none
Let's consider the difference between all the property values:
index.html
index.css
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!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>
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.capitalized-text {
text-transform: capitalize;
}
.uppercased-text {
text-transform: uppercase;
}
.lowercased-text {
text-transform: lowercase;
}
.not-modified-text {
text-transform: none;
}
/* This part is not the focus of the current chapter. We will consider it further. */
ul {
display: flex;
justify-content: space-around;
list-style: none;
padding-left: 0;
}
.container {
width: 160px;
border: 1px dashed darksalmon;
}
h3 {
text-align: center;
}
text-align
The text-align property allows you to horizontally align text content.
csstext-align: start | end | center | justify
index.html
index.css
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!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>
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
h3 {
text-align: center;
}
.text-start {
text-align: start;
}
.text-end {
text-align: end;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}
/* This part is not the focus of the current chapter. We will consider it further. */
ul {
display: flex;
justify-content: space-around;
list-style: none;
padding-left: 0;
}
.container {
width: 160px;
border: 1px dashed darksalmon;
}
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?
Tudo estava claro?
Obrigado pelo seu feedback!
Seção 2. Capítulo 1
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
