HTML: Changing colors of specific words in a string of text
HtmlCssTextColorsInlineHtml Problem Overview
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?
Html Solutions
Solution 1 - Html
<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>
Solution 2 - Html
You could use the HTML5 Tag <mark>:
<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 <mark> has a default background color... at least in Chrome.
Solution 3 - Html
<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.
Solution 4 - Html
use spans. ex) <span style='color: #FF0000;'>January 30, 2011</span>
Solution 5 - Html
<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.
Solution 6 - Html
You can also make a class:
<span class="mychangecolor"> I am in yellow color!!!!!!</span>
then in a css file do:
.mychangecolor{ color:#ff5 /* it changes to yellow */ }
Solution 7 - Html
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>
Solution 8 - Html
h1 {
font-size: 72px;
background-image: linear-gradient(to left, red 50%, black 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Update red and black and percentages as required.
Solution 9 - Html
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