Reputation: 5796
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>
@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
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
Upvotes: 1
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
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
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
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
Reputation: 61862
Use the span
tag
<style>
.redText
{
color:red;
}
.blackText
{
color:black;
font-weight:bold;
}
</style>
<span class="redText">My Name is:</span> <span class="blackText">Tintincute</span>
It's also a good idea to avoid inline styling. Use a custom CSS class instead.
Upvotes: 19