different colored text in same heading

nophster

02-19-2009, 08:55 AM

Hi...

First off, I am a total newbie when it comes to CSS. That said, here is the code I assume deals with the heading in question.

#header { position: relative; height: 49px; background: #111; border-bottom: 1px solid #1c1c1b; font-family: Arial, Helvetica, sans-serif; }
h1 { font-size: 3em; font-weight: bold; text-transform: lowercase; line-height: 50px; float: left; letter-spacing: -1px; margin-left: 20px; font-family: Arial, Helvetica, sans-serif; }
h1 a { color: #89897c; }
h1 a:hover { text-decoration: none; color: #CDCDBF }
div.subtitle { line-height: 50px; font-size: 1.2em; color: #55554e; margin-left: 1em; float: left; text-transform: lowercase; }

Suppose the heading is "BloggerTotality", how would I achieve the result that the words "Blogger" and "Totality" are both different colors, even though they are part of the same heading?

Majoracle

02-19-2009, 09:17 AM

Yeah, this is possible, and quite simple.
h1 a span { color: #xxxxxx; }
<h1><a href="">Blogger<span>Totality</span></a></h1>

Excavator

02-19-2009, 09:22 AM

Hello nophster,
Have a look at this - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 14px Arial, Helvetica, sans-serif;
background: #FC6;
text-align: center;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrap {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
}
#header {
position: relative;
height: 49px;
background: #111;
border-bottom: 1px solid #1c1c1b;
}
h1 {
font-size: 3em;
font-weight: bold;
text-transform: lowercase;
line-height: 50px;
float: left;
letter-spacing: -1px;
margin-left: 20px;
}
h1 { color: #89897c; }
span {color: #f00;}

</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>Bloggers<span>Totality</span></h1>
</div>
</div>
</body>
</html>

abduraooft

02-19-2009, 09:42 AM

<div id="header">
<a href=""><h1>Bloggers<span>Totality</span></h1></a>
</div>
That markup is invalid!

Excavator

02-19-2009, 10:17 AM

Oops, my mistake.
I saw the :hover in his header CSS...

nophster

02-19-2009, 06:56 PM

Thanks guys, I think I this will do the trick.

Just for my info, if I wanted to do the same thing ONLY now I want to divide the heading into 3 colors, would I use <span> again for the third bit too?

Excavator

02-19-2009, 07:07 PM

Sure, span will work again. Do it with an id or a class though... like this:

<h1>First<span class="red">Second</span><span class="blue">Third</span></h1>

Then your CSS might look like this:
h1 {
color: #000;
}
.red {
color: #f00;
}
.blue {
color: #00f;
}

nophster

02-20-2009, 06:29 AM

Thank you, that helps a lot.