different colored letters in one word ??? [Archive]

free thinker

Sat 18th Jun '05, 8:55am

OK.

I just made the switch to:
--- XHTML 1.0 TRANSITIONAL
--- CSS 1 and 2

On my front page, I have the title of my store, and I want the first letter in each word to be a different color... how do I set it up so I can do this using either "class" or different "selectors"???

Here is my CSS page in question:

body
{
font-family: Enviro, Verdana, Arial, "Times New Roman";
color: #ff54ff;
background-color: #000000;
}
h1
{
font-size: 96px;
text-align: center;
}
h2
{
font-size: 36px;
font-style: italic;
text-align: center;
}
h3
{
font-size: 36px;
text-align: center;
}
h4
{
font-size: 14px;
color: #444444;
text-align: left;
}
h5
{
font-size: 12px;
text-align: center;
}
h6
{
font-size: 12px;
text-align: center;
}
a:link
{
text-decoration: none;
font-size: 42px;
color: #ffffff;
}
a:visited
{
text-decoration: none;
font-size: 42px;
color: #ffffff;
}
a:hover
{
text-decoration: none;
font-size: 42px;
font-style: italic;
color: #ff0000;
}
a:active
{
text-decoration: none;
font-size: 42px;
color: #ffffff;
}

Here is the page in question:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<meta name="keywords" content="..." />

<meta name="description" content="..." />

<title>...</title>

<link rel="stylesheet" type="text/css" href="homepagecss.css" title="Default" />

</head>

<body>

<br />
<br />

<h1>Store Title Goes Here (this is where I want to make the first letters a different color</h1>

<h2>...</h2>

<br />
<hr width="100%" size="10" noshade="noshade" />
<br />

<br />

<h3>...</h3>

<h3>...</h3>

<br />
<hr width="100%" size="10" noshade="noshade" />
<br />

<br />

<h4>...</h4>

</body>

</html>

MrNase

Sat 18th Jun '05, 11:07am

Here's a short example of how it can be done:

.red {
color: red;
}
.blue {
color: blue;
}
.yellow {
color: yellow;
}
.green {
color: green;
}

And:

<h1><span class="blue">this</span> <span class="red">is</span> <span class="yellow">a</span> <span class="green">test</span>
</h1>

Or:

<h1><span class="blue">t</span>his <span class="red">i</span>s <span class="yellow">a</span> <span class="green">t</span>est
</h1>

free thinker

Sat 18th Jun '05, 11:20pm

Wow!

That freakin' simple?

Thanks. Now I can see why CSS is great! Maybe the possibilities are endless... :)

deathemperor

Mon 20th Jun '05, 1:21pm

it is just easy, isn't it ? ^^

the possibilities in programming are endless to be exact.