HTML: changing the color of specific words in a line of text

Question

HTML: changing the color of specific words in a line of text

I have the following message (slightly modified):

"Enter the contest by January 30, 2011 and you can win $$$$ - including amazing summer trips!"

I currently have:

<p style="font-size:14px; color:#538b01; font-weight:bold; font-style:italic;">

formatting the text string, but want to change the color “January 30, 2011” to # FF0000 and “summer” to # 0000A0.

How to do this strictly with HTML or inline CSS?

+65

html css text colors inline

Mitch Jan 07 2018-11-11T00:

source share

10 answers

Jacob · Answer 1 · 2011-01-07 05:41

 <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>

Or you can use CSS classes instead:

 <html> <head> <style type="text/css"> p { font-size:14px; color:#538b01; font-weight:bold; font-style:italic; } .date { color: #ff0000; } .season { /* OK, a bit contrived... */ 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>

Juan Pablo Pinedo · Answer 2 · 2012-12-14 23:58

You can use the HTML5  :

 <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>

And use this in CSS:

 p { font-size:14px; color:#538b01; font-weight:bold; font-style:italic; } mark.red { color:#ff0000; background: none; } mark.blue { color:#0000A0; background: none; }

The  has a default background color ... at least in Chrome.

Damien-Wright · Answer 3 · 2011-01-07 05:41

 <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>

Span inline a elements, thus, do not break the flow of the paragraph, but only the style between the tags.

brian_d · Answer 4 · 2011-01-07 05:41

use spaces. ex) January 30, 2011

user8588011 · Answer 5 · 2017-09-10 15:01

 <font color="red">This is some text!</font>

This worked better for me when I just wanted to change one word to red in a sentence.

Trevor Lee · Answer 6 · 2016-06-19 11:23

Think of this code as you like, according to your needs, can you choose the text? the paragraph will have the font or style that you need !:

 <head> <style> p{ color:#ff0000;font-family: "Times New Roman", Times, serif;} font{color:#000fff;background:#000000;font-size:225%;} b{color:green;} </style> </head> <body> <p>This is your <b>text. <font>Type</font></strong></b>what you like</p> </body>

otis answer · Answer 7 · 2015-11-17 19:51

You can use a longer boringer path

 <p style="font-size:14px; color:#538b01; font-weight:bold; font-style:italic;">Enter the competition by</p><p style="font-size:14px; color:#ff00; font-weight:bold; font-style:italic;">summer</p>

you get meaning for the rest

JayMcpeZ_ · Answer 8 · 2015-11-20 15:34

You can also create a class:

 I am in yellow color!!!!!!

then in the css file do:

 .mychangecolor{ color:#ff5 /* it changes to yellow */ }

VanAres · Answer 9 · 2018-12-10 11:08

I want to change the color to:

Biznesmen - Przedsiębiorca

Biznesmen - Przedsiębiorca -wanna red ..

Cybernetic · Answer 10 · 2019-01-19 19:59

If you are ready to use the library, Azle will make it easy. Just aim at the class and class instance of your text element. For example, if my block of text is inside an element with class "my_text" and this is the first instance of this class:

 az.style_word('my_text', 1, { "this_class" : "colored_word", "word" : "deploy", "color" : "red", "word_instance" : 2 })

The following shows how we can color each instance of a word, or target the 1st, 2nd, or 3rd instance of a word specifically:

Here is the fiddle

HTML: changing the color of specific words in a line of text

More articles: