How to Create Highlighted Text in CSS

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

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.

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Spring Boot + RabbitMQ Course - The Practical Guide

Java Guides

Search This Blog