Html: Changing colors of specific words in a string of text

html

css-classes

inline-styles

accessibility

byAlex Kataev·Aug 14, 2024

To quickly change colors of specific words in a text, wrap them in a <span> tag and apply an inline CSS style for color. Here's a mini demo:

<p>
  Normal text <span style="color: #F00;">red word</span> normal text.
</p>

In this example, #F00; denotes the color red. Flexibly substitute with any hexadecimal code or color name of your preference.

Embracing CSS classes over inline styles

While inline styles offer a quick solution, they generally lead to repetitive code. It's recommended to define CSS classes either in dedicated stylesheets or in the <head> section of your HTML. This greatly improves maintainability and promotes reusability, keeping your code squeaky clean.

<head>
  <style>
    /* "Red" by Rihanna's CSS cousin */
    .red-text { color: #FF0000;}
    
    /* "Blue" by Eiffel 65's stylist */
    .blue-text { color: #0000A0; }
  </style>
</head>
<body>
  <p>
    Normal text <span class="red-text">red word</span> normal text <span class="blue-text">blue word</span>.
  </p>
</body>

Managing specificity conflicts

If you're using external stylesheets or <style> blocks, be aware of the cascading nature of CSS and its specificity hierarchy. Inline styles trump external styles for the same element due to their higher style specificity -- remember, they're the stubborn ones in the family.

Semantic semantics are semantic

When highlighting text, consider using <mark>. It offers semantic value and comes with its own default color, although you can override it:

<p>
  Normal text <mark style="background-color: #FF0;">highlighted text</mark> normal text.
</p>

Avoiding "<" confusion with special characters

Ensure to escape HTML special characters in code samples to prevent them from being misjudged as actual HTML tags. We don't want to play hide-and-seek with those < and >!

<!-- Bad idea: Will render a bold text -->
My paragraph with <b>bold text</b>.

<!-- Good idea: Rendered as a text -->
My paragraph with &lt;b&gt;bold text&lt;/b&gt;.

Styling meets readability: Keeping it classy

Although quick and easy, extensive use of inline styles can turn your code into spaghetti faster than you can say "Mamma mia!". Transitioning to CSS classes is like moving from hand-written letters to emails -- it's more effective and manageable, and won't give your future self a headache.

Universal color perception: The phantom of the browsers

While choosing colors, ensure they are consistent across different browsers and devices. Your chosen hues might differ due to color profiles or display technologies. Test thoroughly -- believe me, inconsistency haunts developers more than syntax errors!

Channeling the power of CSS over outdated tags

You may find the <font> tag in older code, but it's deprecated and less flexible than CSS options. It's 2022, let's embrace modern CSS techniques for superior flexibility and future-proofing our web pages.

The quest for optimal performance

Overuse of inline CSS can impact performance negatively on large websites. External stylesheets are cached by the browser, leading to better performance and speedier subsequent page loads. Remember, efficiency is to programming what power chords are to rock music!

Inter-device consistency and accessibility

Ensure to test color contrasts on various devices and do consider accessibility. Colors that appear sharp and vivid on a desktop might not have the same impact on mobile devices, affecting user experience. Don't be that person who ignores the mobile user.

explain-codes / Html / Html: Changing colors of specific words in a string of text

Linked

Changing the color of an hr element



How do I make text bold in HTML?



Css strikethrough different color from text?



Render a string in HTML and preserve spaces and linebreaks



Span inside anchor or anchor inside span or doesn't matter?

