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 nvcxnvkldsjaklfds
nvcxnvkldsjaklfds
Courses Plus Student 5,041 Points

Anchor element

 <a href="http://anh.cs.luc.edu/python/hands-on/3.1/handsonHtml/loops.html#basic-for-loops">

<h3 id="p1heading">For Loop</h3>

</a>

a{
    color: green;
    background-color: green;}

Background styling does not apply to anchor element. But color styling does apply to html code.

Anyone here know why?

3 Answers

nvcxnvkldsjaklfds
nvcxnvkldsjaklfds
Courses Plus Student 5,041 Points

Thanks I found the answer myself. 

<a href="http://anh.cs.luc.edu/python/hands-on/3.1/handsonHtml/loops.html#basic-for-loops">

<h3 id="p1heading">For Loop</h3>

</a>

In the above code snippet, I nested <h1> tag inside anchor element. It made anchor element's content empty. Anchor element is a inline level element and <h1> is a block level element.

So when you apply background-color style from CSS file it does not get applied. It is because browser is in dilemma that whether background-color has to apply to inline level or block level element.

It is bad semantic. So not nest HTML element inside anchor element to style. If you like to style you can style using CSS file.

Anna Dadej
Anna Dadej
10,707 Points
Anna Dadej
Anna Dadej
10,707 Points

In my browser it does apply...

nvcxnvkldsjaklfds
nvcxnvkldsjaklfds
Courses Plus Student 5,041 Points

Which browser do you use? I use Chrome 36.0.

Anna Dadej
Anna Dadej
10,707 Points
Anna Dadej
Anna Dadej
10,707 Points

"a" tag is inline element, change dispay to block or inline-block and you will be able to change the background color.

nvcxnvkldsjaklfds
nvcxnvkldsjaklfds
Courses Plus Student 5,041 Points

Yes I do know anchor is an inline element. But I can apply background-color property to 

<a href="www.example.com">Example</a>

But not to this code snippet

<a href="http://anh.cs.luc.edu/python/hands-on/3.1/handsonHtml/loops.html#basic-for-loops">

<h3 id="p1heading">For Loop</h3>

</a>

I do not understand why?

Anna Dadej
Anna Dadej
10,707 Points
Anna Dadej
Anna Dadej
10,707 Points

As I said before - I can see background applied to both links :)

nvcxnvkldsjaklfds
nvcxnvkldsjaklfds
Courses Plus Student 5,041 Points

Really? I do not. I tried in different browser. None of them does.