[html] How to set different colors in HTML in one statement?

I'm thinking of having different color of text in one line. How could that be possible?

<p style="color:#4C4C4C;font-weight:bold;font-family:Calibri;font-size:20"> My Name is: 

 <"color:#FF0000;font-weight:bold;font-family:Tahoma;font-size:20"> Tintincute </p>

I would like to have a different color for Tintincute but in one line the problem with this, the name went down one space.

This is the code example:

<p style="color:#4C4C4C;font-weight:bold">All fields marked with   <style="color:#FF0000;font-weight:bold">*</color> <style="color:#4C4C4C;font-weight:bold">are required</p>

Update

@Phil: I tried using the code, but it didn't work. The code itself was shown on the page. This is how I did it:

<div style="color:red">[+validationmessage+]</div>
p.detail {color:#4C4C4C;font-weight:bold;font-family:Calibri;font-size:20 }
span.name {color:#FF0000;font-weight:bold;font-family:Tahoma;font-size:20 }
<p class="detail">My Name is: <span class="name">Tintincute</span> </p>

This question is related to html text

The answer is


Use the span tag

<style>
    .redText
    {
        color:red;
    }
    .blackText
    {
        color:black;
        font-weight:bold;
    }
</style>

<span class="redText">My Name is:</span>&nbsp;<span class="blackText">Tintincute</span>

It's also a good idea to avoid inline styling. Use a custom CSS class instead.


_x000D_
_x000D_
.rainbow {_x000D_
  background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );_x000D_
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );_x000D_
  color:transparent;_x000D_
  -webkit-background-clip: text;_x000D_
  background-clip: text;_x000D_
}
_x000D_
<h2><span class="rainbow">Rainbows are colorful and scalable and lovely</span></h2>
_x000D_
_x000D_
_x000D_


How about using FONT tag?

Like:

H<font color="red">E</font>LLO.

Can't show example here, because this site doesn't allow font tag use.

Span style is fast and easy too.