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> 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?
9 Answers
<p> Enter the competition by <span>January 30, 2011</span> and you could win up to $$$$ — including amazing <span>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>January 30, 2011</span> and you could win up to $$$$ — including amazing <span>summer</span> trips! </p> </body> </html> You could use the HTML5 Tag <mark>:
<p>Enter the competition by <mark>January 30, 2011</mark> and you could win up to $$$$ — including amazing <mark>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.
<p> Enter the competition by <span>January 30, 2011</span> and you could win up to $$$$ — including amazing <span>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.
use spans. ex) <span style='color: #FF0000;'>January 30, 2011</span>
<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.
3You can also make a class:
<span> I am in yellow color!!!!!!</span>
then in a css file do:
.mychangecolor{ color:#ff5 /* it changes to yellow */ } 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> 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.
You could use the longer boringer way
<p>Enter the competition by</p><p>summer</p> you get the point for the rest
