The Project | About Us | Contribute | Donations | License

HOME

In this lesson, we will explore how to style text using CSS properties for decoration and transformation. These properties allow you to add underlines, overlines, and other decorative elements to your text, as well as transform the text to uppercase, lowercase, or capitalize the first letter of each word.

Text Decoration

Key Properties

text-decoration: This property is used to set the decoration of the text, such as underlining, overlining, or striking through the text.
- none: No decoration.
- underline: Underlines the text.
- overline: Adds a line above the text.
- line-through: Strikes through the text.
- blink: Makes the text blink (not widely supported).

Practical Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Decoration Example</title>
    <style>
        .underline {
            text-decoration: underline;
        }
        .overline {
            text-decoration: overline;
        }
        .line-through {
            text-decoration: line-through;
        }
        .no-decoration {
            text-decoration: none;
        }
    </style>
</head>
<body>
    <p class="underline">This text is underlined.</p>
    <p class="overline">This text has an overline.</p>
    <p class="line-through">This text is struck through.</p>
    <p class="no-decoration">This text has no decoration.</p>
</body>
</html>

Explanation

The .underline class applies an underline to the text.
The .overline class adds a line above the text.
The .line-through class strikes through the text.
The .no-decoration class removes any decoration from the text.

Text Transformation

Key Properties

text-transform: This property is used to control the capitalization of text.
- none: No transformation.
- capitalize: Capitalizes the first letter of each word.
- uppercase: Transforms all characters to uppercase.
- lowercase: Transforms all characters to lowercase.

Practical Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Transformation Example</title>
    <style>
        .capitalize {
            text-transform: capitalize;
        }
        .uppercase {
            text-transform: uppercase;
        }
        .lowercase {
            text-transform: lowercase;
        }
        .no-transform {
            text-transform: none;
        }
    </style>
</head>
<body>
    <p class="capitalize">this text is capitalized.</p>
    <p class="uppercase">this text is uppercase.</p>
    <p class="lowercase">THIS TEXT IS LOWERCASE.</p>
    <p class="no-transform">This Text Has No Transformation.</p>
</body>
</html>

Explanation

The .capitalize class capitalizes the first letter of each word.
The .uppercase class transforms all characters to uppercase.
The .lowercase class transforms all characters to lowercase.
The .no-transform class applies no transformation to the text.

Practical Exercises

Exercise 1: Applying Text Decoration

Task: Create a simple HTML page with three paragraphs. Apply different text decorations to each paragraph.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercise 1: Text Decoration</title>
    <style>
        /* Add your CSS here */
    </style>
</head>
<body>
    <p class="underline">This paragraph should be underlined.</p>
    <p class="overline">This paragraph should have an overline.</p>
    <p class="line-through">This paragraph should be struck through.</p>
</body>
</html>

Solution:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercise 1: Text Decoration</title>
    <style>
        .underline {
            text-decoration: underline;
        }
        .overline {
            text-decoration: overline;
        }
        .line-through {
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <p class="underline">This paragraph should be underlined.</p>
    <p class="overline">This paragraph should have an overline.</p>
    <p class="line-through">This paragraph should be struck through.</p>
</body>
</html>

Exercise 2: Applying Text Transformation

Task: Create a simple HTML page with four paragraphs. Apply different text transformations to each paragraph.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercise 2: Text Transformation</title>
    <style>
        /* Add your CSS here */
    </style>
</head>
<body>
    <p class="capitalize">this text should be capitalized.</p>
    <p class="uppercase">this text should be uppercase.</p>
    <p class="lowercase">THIS TEXT SHOULD BE LOWERCASE.</p>
    <p class="no-transform">This Text Should Have No Transformation.</p>
</body>
</html>

Solution:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercise 2: Text Transformation</title>
    <style>
        .capitalize {
            text-transform: capitalize;
        }
        .uppercase {
            text-transform: uppercase;
        }
        .lowercase {
            text-transform: lowercase;
        }
        .no-transform {
            text-transform: none;
        }
    </style>
</head>
<body>
    <p class="capitalize">this text should be capitalized.</p>
    <p class="uppercase">this text should be uppercase.</p>
    <p class="lowercase">THIS TEXT SHOULD BE LOWERCASE.</p>
    <p class="no-transform">This Text Should Have No Transformation.</p>
</body>
</html>

Conclusion

In this lesson, you learned how to use the text-decoration and text-transform properties to style and transform text in various ways. These properties are essential for enhancing the readability and visual appeal of your web pages. Practice using these properties to become more comfortable with text styling in CSS. In the next lesson, we will dive into understanding the box model and layout, which are crucial for structuring your web pages effectively.

Text Decoration and Transformation

Text Decoration

Key Properties

Practical Example

Explanation

Text Transformation

Key Properties

Practical Example

Explanation

Practical Exercises

Exercise 1: Applying Text Decoration

Exercise 2: Applying Text Transformation

Conclusion

CSS Mastery: From Beginner to Advanced

Module 1: Introduction to CSS

Module 2: Text and Font Styling

Module 3: Box Model and Layout

Module 4: Positioning and Floating

Module 5: Flexbox

Module 6: CSS Grid

Module 7: Advanced CSS Techniques

Module 8: Responsive Design

Module 9: Preprocessors and Frameworks

Module 10: Best Practices and Optimization

Module 11: Project: Building a Responsive Website