Sometimes you might want an element to contain more than one colour of text. Take the following paragraph where I specify my favourite colour:
<p>My favourite colour is orange! And what a fine colour orange is.</p>
Wouldn't it be nice to make the actual word orange in the actual colour orange? This can be achieved with the <span> element. Alike a <div>, a span has no default styles. It has no background colour, no borders, no margins, no padding etc. The difference between a <span> and a <div> however, is that a span will not produce a new line when it is used. It will display inline, which means it will just flow within the text or other content where it is placed. So, the first step with the above paragraph would be to wrap the words orange within our lovely span tags.
<p>My favourite colour is <span>orange</span>! And what a fine colour <span>orange</span> is.</p>
Now, all we need to do is apply our previous knowledge to make the text wrapped in span tags display in orange. The best way to do it would be to make a new class, set that class to display orange text, and then apply that class to each of the spans like so:
.fave-colour
{
color: rgb(255,128,32);
}
The above is the best way to do it, because if we change our favourite colour one day, to say... green, we only need to change the colour in the CSS:
.fave-colour
{
color: rgb(0,255,0);
}
We can also however, set the colour using inline styles, which I briefly mentioned before. This would be done like so:
My favourite colour is <span style="color: rgb(255,128,32);">orange</span>! And what a fine colour <span style="color: rgb(255,128,32);">orange</span> is.
Output
My favourite colour is orange! And what a fine colour orange is.
This would work perfectly well, but spoils the point of CSS in that we're merging presentation with the structure of our web-page which is a bad practice. Another disadvantage is that we will have to update our favourite colour twice in the HTML itself! This may not be a big deal now but think when you have hundreds of web-pages which use the same style...
On the other hand however, whether you choose to use inline-styles or not is your choice! No-one is going to drag you out into the street and shoot you (unless some drastic law changes come in) for mixing presentation with structure.
Sho, have a gho if shoo dares, and takeshee quishhz.