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

D

8

149

I have the below message (slightly changed):

"Enter the competition by January 30, 2011 and you could win up to $$$$ — 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 of "January 30, 2011" to #FF0000 and "summer" to #0000A0.

How do I do this strictly with HTML or inline CSS?

Drabbet answered 7/1, 2011 at 5:38 Comment(0)

S

196

<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 may want to 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>

Southernly answered 7/1, 2011 at 5:41 Comment(3)

This is a great answer! Easily demonstrates that the dots represent tags inside the paragraph tags. It really clarifies this information for anyone working with <style>. – Retrieval 19/3, 2019 at 20:41

Can this be done based on the index of the string? I mean like from character x to character y, how can I color it? – Fluidics 17/11, 2021 at 11:54

@DebjyotiBanerjee you cannot style text nodes with CSS, only elements. The only way to modify each character's color is to wrap each character in its own element, like with . – Southernly 17/11, 2021 at 17:34

O

71

You could use the HTML5 Tag :

<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 the 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 tag  has a default background color... at least in Chrome.

Ozalid answered 14/12, 2012 at 23:58 Comment(4)

A pity that the answer was not awarded. I would have awarded it to this (and fie upon those who use browsers that don't support HTML (are there still any?)) – Impassioned 10/7, 2015 at 10:33

A simple and effective solution that does no more, and no less, than the OP requested. – Onomastics 25/11, 2016 at 22:54

The mark tag is not meant to be used for formatting. – Amaya 20/8, 2018 at 14:52

The mark tag adds some padding at the beginning and end of the text, so the class needs to have margin:0; in it. This is evidence that it's for highlighing, not general formatting, for which the span tag is better-suited. – Ganger 6/4, 2023 at 18:44

S

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>

The span elements are inline an thus don't break the flow of the paragraph, only style in between the tags.

Stereophonic answered 7/1, 2011 at 5:41 Comment(0)

S

31

use spans. ex) January 30, 2011

Seleneselenious answered 7/1, 2011 at 5:41 Comment(0)

C

27

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

This worked the best for me when I only wanted to change one word into the color red in a sentence.

Cornall answered 10/9, 2017 at 15:1 Comment(3)

This is some text! – Cornall 10/9, 2017 at 15:2

This is not supported in HTML 5. – Calculable 1/4, 2019 at 23:55

Deprecated: This feature is no longer recommended. developer.mozilla.org/en-US/docs/Web/HTML/Element/font – Syllabus 14/4, 2022 at 14:50

R

6

You can also make a class:

 I am in yellow color!!!!!!

then in a css file do:

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

Rimola answered 20/11, 2015 at 15:34 Comment(0)

B

6

Tailor this code however you like to fit your needs, you can select text? in the paragraph to be what font or style 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>

Bogan answered 19/6, 2016 at 11:23 Comment(0)

T

-2

You could use the longer boringer way

<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 the point for the rest

Truscott answered 17/11, 2015 at 19:51 Comment(0)

Recommended topics

Hot tags