Introduction
In web development, presenting text content effectively is crucial. Sometimes, you need to highlight specific parts of a string within your HTML document by changing their color. This tutorial covers how to change the colors of specific words in a text using both inline CSS and external CSS techniques.
Understanding Inline Styling with <span>
One common method for altering text styles is using the <span> element combined with inline CSS. The <span> element is an inline container that does not inherently affect content but allows you to apply styles directly within your HTML.
Example
Consider a paragraph where you want to change "January 30, 2011" to red and "summer" to blue:
<p style="font-size:14px; color:#538b01; font-weight:bold; font-style:italic;">
Enter the competition by
<span style="color:#FF0000;">January 30, 2011</span>
and you could win up to $$$$ — including amazing
<span style="color:#0000A0;">summer</span> trips!
</p>
Using CSS Classes
While inline styles are quick for small changes, using CSS classes is more scalable and maintainable. This approach separates structure from styling and keeps your HTML cleaner.
Example with CSS Classes
Define styles in the <head> of your document:
<html>
<head>
<style type="text/css">
p {
font-size:14px;
color:#538b01;
font-weight:bold;
font-style:italic;
}
.date {
color: #ff0000;
}
.season {
color: #0000a0;
}
</style>
</head>
<body>
<p>
Enter the competition by
<span class="date">January 30, 2011</span>
and you could win up to $$$$ — including amazing
<span class="season">summer</span> trips!
</p>
</body>
</html>
Leveraging HTML5 <mark> Tag
The <mark> element is semantically designed for highlighting text. It can be used similarly to a span with additional styling flexibility.
Example Using <mark>
This example highlights specific words while overriding the default background color:
<style>
p {
font-size:14px;
color:#538b01;
font-weight:bold;
font-style:italic;
}
mark.red {
color: #ff0000;
background: none;
}
mark.blue {
color: #0000A0;
background: none;
}
</style>
<p>Enter the competition by
<mark class="red">January 30, 2011</mark> and you could win up to $$$$ — including amazing
<mark class="blue">summer</mark> trips!
</p>
Deprecated Method: <font> Tag
While it’s possible to use the <font> tag for changing text color, this method is deprecated in modern HTML. It should be avoided in favor of CSS styling.
Example Using <font>
<p>Enter the competition by
<font color="red">January 30, 2011</font> and you could win up to $$$$ — including amazing
<font color="blue">summer</font> trips!
</p>
Best Practices
- Use CSS for Scalability: CSS classes allow styling multiple elements with the same style, reducing code duplication.
- Maintain Separation of Concerns: Keep HTML structure separate from styling by using external or internal stylesheets.
- Avoid Deprecated Elements: Stick to modern practices by using CSS and semantic HTML tags like
<mark>. - Semantic Meaning: Use
<mark>for emphasis where semantically appropriate, as it suggests highlighting.
Conclusion
By understanding and applying these techniques, you can effectively manage text styling in your web projects. Whether through inline styles or external CSS, each method has its place depending on the project’s requirements and scale.