How to Create Highlighted Text in CSS

Introduction

Highlighted text in CSS can be created to draw attention to specific parts of your content. Using the background-color property, you can easily apply a background color to the text, making it stand out.

In this tutorial, you'll learn how to create highlighted text using CSS by applying a background color to specific text elements.

Problem Statement

Create a CSS code that:

Highlights text by applying a background color.
Demonstrates how to apply the background-color property to various text elements.

Example:

Input: A span element with the text "Highlighted Text Example".
Output: The text appears with a highlighted background color.

Solution Steps

Use background-color Property: Apply the background-color property to highlight the text with a specific color.
Wrap Text with a span: Use a span element to target specific parts of the text for highlighting.

HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Highlighted Text Example</title>
    <style>
        /* Step 1: Highlight text with background color */
        .highlight {
            background-color: yellow;
            padding: 2px;
        }
    </style>
</head>
<body>

    <p>This is an example of <span class="highlight">highlighted text</span> using CSS.</p>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Explanation

Step 1: Use `background-color: yellow`

To highlight text with a background color, use this CSS:

.highlight {
    background-color: yellow;
    padding: 2px;
}

The background-color: yellow property adds a yellow highlight to the text, and the padding: 2px ensures the highlight doesn’t touch the text closely.

Step 2: Wrap the Text with a `span`

To highlight only a specific portion of the text, wrap it with a span element and apply the highlight class.

Conclusion

Creating highlighted text in CSS is easy using the background-color property. You can target specific text with a span element and apply a custom background color to make it stand out. This method is useful for emphasizing important information in your content.

Java Guides

Search This Blog