🎓 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-colorproperty 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-colorProperty: Apply thebackground-colorproperty to highlight the text with a specific color. - Wrap Text with a
span: Use aspanelement 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
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: yellowproperty adds a yellow highlight to the text, and thepadding: 2pxensures 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
spanelement and apply thehighlightclass.
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.
Comments
Post a Comment
Leave Comment