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

CSS

Posted by nvcxnvkldsjaklfds
nvcxnvkldsjaklfds
Courses Plus Student 5,041 Points

Styling does not apply

<div class="top">
                <p id="name">Karthikeyan Palaniswamy</p>
                <a href="mailto:karthikeyansgexecutives@gmail.com">
                    <p id="email">karthikeyansgexecutives@gmail.com</p>
                </a>
</div>

.top{
    border: 2px solid black;
    border-radius: 5px;
    margin-top: -20px; 
    background-color:#668284;   
    color: #ffffff;
}
a{
    text-decoration: none;
    color: #ffffff;
}
a:hover{
    text-transform: bold;

I am trying to make the anchor element bold when user hovers over the email address. But it does not apply.

Can anyone here help me?

2 Answers

Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

You'll want to use font-weight: bold; instead of text-transform: bold;. Also, make sure to close your a:hover selector with a }.

nvcxnvkldsjaklfds
nvcxnvkldsjaklfds
Courses Plus Student 5,041 Points

Can I know why text-transform does not work? I tried css font-weight: bold; it does work well.

Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

text-transform is just for capitalization...it has nothing to do with the weight of the font. So, for example, you can change your text to ALL CAPITAL LETTERS (uppercase), all lower case letters (lowercase) Or You Can Capitalize The First Letter Of Each Word (capitalize).

There's more info at http://www.w3schools.com/cssref/pr_text_text-transform.asp if you'd like to read more.

Louis Otto
Louis Otto
23,264 Points
Louis Otto
Louis Otto
23,264 Points

Hi Karthikeyan,

Shaun is right about font-weight.

Just as a bit of advice, it's better to style your code as such:

<a href="mailto:karthikeyansgexecutives@gmail.com">karthikeyansgexecutives@gmail.com</a>

That way you can apply global styling to links, or if you need to target a specific link you can just wrap it in a div class and target "classname a"

If you follow that method, your code will be shorter, neater overall and easier to manage.

The reason I mention it is because you're using a lot of classes and IDs and they have different priorities in terms of styling, which may cause you problems in future if your pages have a lot of elements.

All the best, and good luck! Louis