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?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;
}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">
<!--
.style1 {
color: #FF0000;
font-family: Arial;
font-size: 24px;
}
.style2 {
font-family: Arial;
color: #0000FF;
font-size: 24px;
}
-->
</style>
</head>
<body>
<span class="style1">Vinay</span><span class="style2">Sharma</span>
</body>
</html>
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?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;
}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">
<!--
.style1 {
color: #FF0000;
font-family: Arial;
font-size: 24px;
}
.style2 {
font-family: Arial;
color: #0000FF;
font-size: 24px;
}
-->
</style>
</head>
<body>
<span class="style1">Vinay</span><span class="style2">Sharma</span>
</body>
</html>