Menu
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?
888
To set the font color in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <p> tag, with the CSS property color. HTML5 do not support the <font> tag, so the CSS style is used to add font color.
Make separate elements Another way is creating a text with separate elements by using the HTML <span> tag, which is an empty container. This means that you create a multicolor text by putting each letter in a separate element to define a different color for each letter of your text.
<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> 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.
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
