CODEWITHSUNDEEP
htmltext
tintincutes
tintincutes

Reputation: 5796

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>

Upvotes: 22

Views: 177074

Answers (6)

PYK
PYK

Reputation: 4331

I know it's kinda clunky but it does the work

if you have, for example:

<a>Color1 Color2</a>

You can just style part of the text inside

<a>Color1 <a style=color:yellow>Color2</a></a>

output

enter image description here

Upvotes: 1

Bachask8
Bachask8

Reputation: 428

<p style="font-weight:bold"> ¿ is this color   
                <span style="color:red; font-weight:bold"> red? </span> 
                <span style="font-weight:bold"> ? </span>   
            </p>

Upvotes: 0

Aashish Kumar
Aashish Kumar

Reputation: 2887

.rainbow {
  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) );
  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) );
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
<h2><span class="rainbow">Rainbows are colorful and scalable and lovely</span></h2>

Upvotes: 2

JSiren
JSiren

Reputation: 59

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.

Upvotes: 5

Phil
Phil

Reputation: 3756

You could use CSS for this and create classes for the elements. So you'd have something like this 

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 }

Then your HTML would read:

<p class="detail">My Name is: <span class="name">Tintinecute</span> </p>

It's a lot neater then inline stylesheets, is easier to maintain and provides greater reuse.

Here's the complete HTML to demonstrate what I mean:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <style type="text/css">
    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 }
    </style>
</head>
<body>
    <p class="detail">My Name is: <span class="name">Tintinecute</span> </p>
</body>
</html>

You'll see that I have the stylesheet classes in a style tag in the header, and then I only apply those classes in the code such as <p class="detail"> ... </p>. Go through the w3schools tutorial, it will only take a couple of hours and will really turn you around when it comes to styling your HTML elements. If you cut and paste that into an HTML document you can edit the styles and see what effect they have when you open the file in a browser. Experimenting like this is a great way to learn.

Upvotes: 34

James Hill
James Hill

Reputation: 61862

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.

Upvotes: 19

Related Questions