two color text [Archive] - WebDeveloper.com

Click to See Complete Forum and Search --> : two color text

rapid

12-31-2004, 08:13 PM

is there a css technique for coloring a word so that the first half is one color and the last half is a different color?

obviously this can be done with font tags:

<FONT COLOR="#00f">tele</FONT><FONT COLOR="#f00">phone</FONT>

but as close as i can get with my limited css knowledge is:

h1.one {color:#f00;}
h1.two {color:#00f;}

<h1 class="one">tele</h1><h1 class="two">phone</h1>

but this displays the text like this:

tele
phone

is there a way to get the results i want with css?

MstrBob

12-31-2004, 08:32 PM

perhaps:

<h1 class="one">Tele<span class="two">phone</span></h1>

You shouldn't be breaking up your headers. I'd do that if you're just breaking it up for visual purposes. If, however, you are coloring one part a different color to make it stick out, or emphasize it, I'd do something like:

<h1 class="one">Tele<em class="two">phone</em></h1>

with:

h1.one {
color:#f00;
}

h1 em.two {
color:#00f;
font-weight:normal;
}

vinayksh

01-01-2005, 04:48 AM

Hi,Just make a page like what i have shown below and use two classes. Finally you can use the two classes on the text by using the span tag. The two classes have only color attribute different.

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

</style>
</head>

<body>
<span class="style1">Vinay</span><span class="style2">Sharma</span>
</body>
</html>