I was wondering what is the best way to change the font colour of some text that appears halfway through a paragraph.
For example, I have a paragraph of white text, but I want a couple of words in the middle of the paragraph to be orange so that they stand out, but then carry on with white text after that, what would be the best way of achieving this?
Thanks in advance!
<span> will allow you to style text, but it adds no semantic content.
As you're emphasizing some text, it sounds like you'd be better served by wrapping the text in <em></em> and using CSS to change the color of the <em> element. For example:
.description {
color: #fff;
}
.description em {
color: #ffa500;
}
<p class="description">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Sed hendrerit mollis varius. Etiam ornare placerat
massa, <em>eget vulputate tellus fermentum.</em></p>
In fact, I'd go to great pains to avoid the <span> element, as it's completely meaningless to everything that doesn't render your style sheet (bots, screen readers, luddites who disable styles, parsers, etc.) or renders it in unexpected ways (personal style sheets). In many ways, it's no better than using the <font> element.
.description {_x000D_
color: #000;_x000D_
}_x000D_
_x000D_
.description em {_x000D_
color: #ffa500;_x000D_
}<p class="description">Lorem ipsum dolor sit amet, consectetur _x000D_
adipiscing elit. Sed hendrerit mollis varius. Etiam ornare placerat _x000D_
massa, <em>eget vulputate tellus fermentum.</em></p>wrap a <span> around those words and style with the appropriate color
now is the time for <span style='color:orange'>all good men</span> to come to the
You can also simply add the font tag inside the p tag.
CSS sheet:
<style type="text/css">
p { font:15px Arial; color:white; }
</style>
and in HTML page:
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
<font color="red">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</font>
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
It works for me. But, in case you need modification, see w3schools for more usage :)
<span style="color:orange;">orange text</span>
Is the only way I know of barring the font tag.
Nornally the tag is used for that, with a change in style.
Like
<p>This is my text <span class="highlight"> and these words are different</span></p>,
You set the css in the header (or rather, in a separate css file) to make your "highlight" text assume the color you wish.
(e.g.: with
<style type="text/css">
.highlight {color: orange}
</style>
in the header. Avoid using the tag <font /> for that at all costs. :-)
Source: Stackoverflow.com