Menu
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>
344
Steps to add multicolor into text: Add a simple text inside the <div> tag with the required selector. Apply the linear gradient property with any colors of your choice. Apply webkit properties that will fill the text with the gradient background and declare the color property with transparent background.
To set the font color in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <p> tag, with the CSS property color. HTML5 do not support the <font> tag, so the CSS style is used to add font color.
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.
185
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.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
