Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Clara Nelson
Clara Nelson
1,350 Points

Two color h1 tag

I have a h1 tag with the word Clara-fied I want to change the color on just the Clara part of the word. How would I code this in html/css.

4 Answers

Jeff Everhart
Jeff Everhart
21,732 Points

You could wrap part of the word in a span and then target that in css. 

<style>
 h1 {
color: black; 
}
span{
color: red
}
</style>

<h1><span>First </span>word</h1>
Clara Nelson
Clara Nelson
1,350 Points

Jeff your solution worked great thanks!!!

Clara Nelson
Clara Nelson
1,350 Points

One side question for you Jeff. I wasn't able to wrap the h1 and span colors in the style tag as you showed, when I tried it didn't work. What was the purpose in that and do you think it will effect anything later?

Jeff Everhart
Jeff Everhart
21,732 Points

Hey Clara,

The style tags are there only if I'm including some styles in the head of the HTML document. If you put the styles in an external stylesheet it does the same thing and keeps everything modular and organized, but you don't need the style tags. I only included the style tags here as an example since I formatted the code as HTML. Hope that helps!

Cheers, Jeff

Joe Dayvie
Joe Dayvie
11,956 Points
Joe Dayvie
Joe Dayvie
11,956 Points

Clara,

There are a few ways to solve that problem. One is to not use an h1 at all and simple use a paragraph tag. If you prefer to stay with h1, then use a span tag:

<h1>Hello <span>World</span></h1>

Then you just have to adjust the CSS to give the different colors - Hope this helps =)

Edit: Of course you may want to add a class/id to the span in case you decide to use the span elsewhere in your code.

Joe

Mark Cuda
Mark Cuda
6,428 Points
Mark Cuda
Mark Cuda
6,428 Points

Another good idea was mentioned by Joe, to add class or ID tags to help add more specificity to your selectors, that way the styles don't interfere. Something like:

<h1 class="heading"><span>Clara</span>-fied</h1>

for your HTML and:

.heading h1 {
  color: black; 
}

.heading span {
  color: red
}

That way, those styles only affect that specific H1.

Clara Nelson
Clara Nelson
1,350 Points
Clara Nelson
Clara Nelson
1,350 Points

Thanks guys I'll try these suggestions tomorrow and let you know how they work for me. I really appreciate the help.