Tutorial: Applying Text Colors and Decorations

1. Introduction

In this tutorial, our goal is to understand and apply colors and decorations to the text on your webpage. These features help to emphasize and differentiate your content, thereby enhancing the user experience.

By the end of this tutorial, you will learn:

• How to change the color of your text.
• How to apply decorations like underline, overline, and strikethrough to your text.

Prerequisites:

• A basic understanding of HTML
• A basic understanding of CSS

2. Step-by-Step Guide

Text Color

In CSS, the color property is used to define the color of the text.

Here is an example:

<p style="color:blue;">This is a blue text.</p>

Text Decoration

In CSS, the text-decoration property is used to add decorations to text. It has four values:

• none: Produces no text decoration.
• underline: Underlines the text.
• overline: Places a line above the text.
• line-through: Strikes a line through the text.

Here is an example:

<p style="text-decoration:underline;">This is an underlined text.</p>

3. Code Examples

Let's look at some practical examples.

Example 1: Changing text color

<!-- The color of the paragraph text is red -->
<p style="color:red;">This is a red text.</p>

In this example, the color property is used to change the text color to red.

Example 2: Applying text decorations

<!-- The paragraph text is underlined -->
<p style="text-decoration:underline;">This is an underlined text.</p>

<!-- The paragraph text is struck through -->
<p style="text-decoration:line-through;">This is a strikethrough text.</p>

In the first paragraph, the text-decoration property is set to underline, which underlines the text. In the second paragraph, it is set to line-through which strikes a line through the text.

4. Summary

In this tutorial, we have covered how to change the color of your text and how to apply different text decorations like underline, overline, and strikethrough using CSS.

To further enhance your skills, you can:

• Experiment with different color and text decoration combinations.
• Learn about other CSS properties that can help you style your text.

You can find more information on these topics at Mozilla Developer Network.

5. Practice Exercises

Now, it's time to practice what you've learned.

Exercise 1: Create a paragraph with green text.

Solution:

<p style="color:green;">This is a green text.</p>

Exercise 2: Create a paragraph with blue text and an overline.

Solution:

<p style="color:blue; text-decoration:overline;">This is a blue overlined text.</p>

Exercise 3: Create a paragraph with red text and a strikethrough.

Solution:

<p style="color:red; text-decoration:line-through;">This is a red strikethrough text.</p>

Keep practicing and experimenting with different combinations to get a better understanding of how text colors and decorations work in CSS.