Web · Text and Font Styles
Text alignment and decoration
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — Introduction to Text Alignment
Text alignment is one of the most basic and important aspects of text styling. In CSS, we use the
text-align
property to control how text is aligned within its containing element.
The
text-align
property can have the following values:
-
left
- Aligns text to the left (default)
-
center
- Centers the text
-
right
- Aligns text to the right
-
justify
- Stretches lines so that each line has equal width (like in newspapers)
<!DOCTYPE html>
<html>
<head>
<style>
.left-align { text-align: left; }
.center-align { text-align: center; }
.right-align { text-align: right; }
.justify-align { text-align: justify; }
div {
background-color: #f0f0f0;
margin: 10px;
padding: 10px;
width: 300px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="left-align">
<h3>Left Aligned (default)</h3>
This text is aligned to the left. This is the default text alignment in most browsers.
</div>
<div class="center-align">
<h3>Center Aligned</h3>
This text is centered. It's often used for headings or important information.
</div>
<div class="right-align">
<h3>Right Aligned</h3>
This text is aligned to the right. It can be useful for specific design elements.
</div>
<div class="justify-align">
<h3>Justified</h3>
This text is justified. It creates even spacing between words so that each line has the same width. This is commonly used in newspapers and books.
</div>
</body>
</html>
The
text-align
property is inherited, meaning that if you set it on a parent element, all child elements will inherit that alignment unless they have their own
text-align
property specified.
When to Use Each Alignment
-
left
: Best for most body text as it's easiest to read in left-to-right languages
-
center
: Good for headings, titles, and short pieces of text
-
right
: Useful for specific design elements or RTL languages
-
justify
: Works well for dense text in columns, but can create uneven spacing between words
Exercise 2 — Correct Text Alignment Syntax
Which CSS rule would you use to center text inside a paragraph?
Options
• ```p { text-align: center; }```
• ```p { align: center; }```
• ```p { text-center: true; }```
• ```p { align-text: center; }```
Hint : Remember that the correct CSS property for text alignment is 'text-align' - not 'align', 'text-center', or 'align-text'.
Exercise 3 — Text Decoration Basics
The
text-decoration
property lets you add or remove decorative lines on text. It's commonly used to style links, create headings, or emphasize text.
Basic values for
text-decoration
include:
-
none
- No decoration (often used to remove underlines from links)
-
underline
- Adds a line below the text
-
overline
- Adds a line above the text
-
line-through
- Adds a line through the text (strikethrough)
<!DOCTYPE html>
<html>
<head>
<style>
body { background: #fff; }
div {
margin: 10px;
padding: 5px;
font-size: 18px;
background: #fff;
}
.no-decoration { text-decoration: none; }
.underline { text-decoration: underline; }
.overline { text-decoration: overline; }
.line-through { text-decoration: line-through; }
/* By default, links have underline decoration */
a.no-underline { text-decoration: none; }
</style>
</head>
<body style="background: #fff;">
<div class="no-decoration">This text has no decoration</div>
<div class="underline">This text is underlined</div>
<div class="overline">This text has an overline</div>
<div class="line-through">This text has a line through it</div>
<div>
<a href="#">This is a normal link (with default underline)</a><br>
<a href="#" class="no-underline">This is a link with no underline</a>
</div>
</body>
</html>
Text Decoration Shorthand
text-decoration
is actually a shorthand property for:
-
text-decoration-line
(none, underline, etc.)
-
text-decoration-color
(the color of the line)
-
text-decoration-style
(solid, dashed, wavy, etc.)
-
text-decoration-thickness
(the thickness of the line)
Exercise 4 — Complete the Text Decoration
Complete the CSS to create a crossed-out (strikethrough) effect on the "old-price" class and remove the underline from links inside the navigation.
.old-price {
____ line-through;
}
nav a {
____ none;
}
Options: text-decoration: text-decoration: line-decoration: text-style:
Hint : The property for adding decorative lines to text is 'text-decoration', not 'line-decoration' or 'text-style'.
Exercise 5 — Advanced Text Decoration Properties
Complete the CSS rule to create a custom text decoration with a red wavy underline that is 2px thick.
.fancy-link {
text-decoration-line: ____;
text-decoration-____ red;
text-decoration-____ wavy;
text-decoration-____ 2px;
}
Options: underline color: style: thickness: weight: type: width:
Hint : Advanced text decoration uses specific properties: text-decoration-line for the type of line, text-decoration-color for the color, text-decoration-style for the style (solid, wavy, etc.), and text-decoration-thickness for the line thickness.
Exercise 6 — Match Text Decoration Properties
Match each text-decoration property with its correct purpose:
Items to match
• text-decoration-line
• text-decoration-color
• text-decoration-style
• text-decoration-thickness
Definitions
• Sets the type of line (underline, overline, etc.)
• Sets the color of the decoration
• Sets whether the line is solid, dashed, wavy, etc.
• Controls how thick the decoration line appears
Exercise 7 — Text Transformation
The
text-transform
property changes the capitalization of text without modifying the original text content. This is useful for styling without changing the actual HTML content.
Common values for
text-transform
include:
-
none
- No transformation (default)
-
uppercase
- Transforms all characters to UPPERCASE
-
lowercase
- Transforms all characters to lowercase
-
capitalize
- Transforms the first letter of each word to uppercase
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 10px;
padding: 5px;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
</style>
</head>
<body>
<div>Original text: Hello World! This is a Sample Text.</div>
<div class="uppercase">Uppercase: Hello World! This is a Sample Text.</div>
<div class="lowercase">Lowercase: Hello World! This is a Sample Text.</div>
<div class="capitalize">Capitalize: Hello World! This is a Sample Text.</div>
</body>
</html>
The
text-transform
property is especially useful for:
- Creating consistent capitalization in headings and navigation
- Ensuring proper display of acronyms (like "CSS" or "HTML")
- Making text sections stand out without changing the underlying HTML
- Supporting internationalization (as it follows language-specific rules)
CSS vs. HTML Content
Using text-transform in CSS instead of manually writing uppercase/lowercase text in HTML makes your content more maintainable. If you need to change the capitalization style later, you only need to update the CSS rather than editing the actual content.
Exercise 8 — Choosing the Right Text Transform
You want to create a header where each word starts with a capital letter, regardless of how the text is entered in the HTML. Which CSS property and value should you use?
Options
• ```text-transform: capitalize;```
• ```text-transform: uppercase;```
• ```text-case: title;```
• ```font-case: capital;```
Hint : Remember that 'capitalize' transforms the first letter of each word to uppercase, which is ideal for title-style text. 'uppercase' would make ALL letters uppercase.
Exercise 9 — Combining Text Properties
You can combine the text styling properties we've learned (
text-align
,
text-decoration
, and
text-transform
) to create more sophisticated text styles.
<!DOCTYPE html>
<html>
<head>
<style>
.fancy-title {
text-align: center;
text-transform: uppercase;
text-decoration: underline;
color: #0066cc;
font-size: 24px;
padding: 10px;
}
.subtitle {
text-align: center;
text-transform: capitalize;
font-style: italic;
color: #666666;
}
.price {
text-align: right;
font-weight: bold;
}
.discount {
text-decoration: line-through;
color: #999999;
}
.section {
background-color: #f5f5f5;
padding: 15px;
margin: 10px 0;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="section">
<div class="fancy-title">Codémon Shop</div>
<div class="subtitle">find your perfect partner</div>
<p>Welcome to our Codémon shop where you can find all kinds of Codémon supplies!</p>
<p>Special offers this week:</p>
<ul>
<li>Codéball: <span class="discount">$25.99</span> <span class="price">$19.99</span></li>
<li>Super Potion: <span class="price">$12.50</span></li>
</ul>
</div>
</body>
</html>
Notice how we combined different text properties in this example:
- The title uses centered alignment, uppercase transformation, and underline decoration
- The subtitle is centered and capitalized
- The discounted price uses line-through decoration
- The actual prices are right-aligned
By combining these properties, you can create visually appealing and well-structured text layouts.
Exercise 10 — Create a Special Heading
Complete the CSS to create a special heading that is centered, all uppercase, and has a wavy underline decoration in red.
.special-heading {
____ center;
____ uppercase;
text-decoration: underline ____ wavy;
}
Options: text-align: text-transform: red text-style: align: transform:
Hint : The property for text alignment is 'text-align', the property for changing capitalization is 'text-transform', and for text-decoration you can specify both the color and style.
Exercise 11 — Match CSS Properties and Values
Match each CSS property with the value that would achieve the described effect:
Items to match
• Make text centered
• Create strikethrough text
• Convert text to all uppercase
• Remove underline from links
Definitions
• text-align: center;
• text-decoration: line-through;
• text-transform: uppercase;
• text-decoration: none;