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 trialnvcxnvkldsjaklfds
Courses Plus Student 5,041 PointsCSS apply rules
One set of code:
<div id="logo">
<a href="index.html">
<h1>Karthikeyan P</h1>
<h2>Pythonista | Tester</h2>
</a>
</div>
#logo{
text-align: center;
background: #6ab47b;
}
h1, h2{
color: #fff;
}
These CSS rules apply background color and text color, centers the text. But below rules does not.
<div>
<a href="index.html" id="logo">
<h1>Karthikeyan P</h1>
<h2>Pythonista | Tester</h2>
</a>
</div>
#logo{
text-align: center;
background: #6ab47b;
}
h1, h2{
color: #fff;
}
What I did is I moved the id to anchor element from div tag. h1 and h2 got disappeared. Meaning background color is not setting up. Anyone here know why this is happening?
Thanks inadvancing
1 Answer
Daniel Veremchuk
31 PointsAnchor elements are not block elements. In order to apply the style to the elements within the anchor, you must make the anchor element display: block; from its initial display: inline;
Hope this helped
In your code it would be:
<div>
<a href="index.html" id="logo">
<h1>Karthikeyan P</h1>
<h2>Pythonista | Tester</h2>
</a>
</div>
#logo{
display: block;
text-align: center;
background: #6ab47b;
}
h1, h2{
color: #fff;
}
nvcxnvkldsjaklfds
Courses Plus Student 5,041 Pointsnvcxnvkldsjaklfds
Courses Plus Student 5,041 PointsThis is just with anchor element or with all other inline elements. Because I just tried span element. Span is an inline element but it does give background color.
Daniel Veremchuk
31 PointsDaniel Veremchuk
31 PointsIt does not. I just checked it across all browsers (Chrome, Safari, and Firefox). You must have inline elements display: block;
Span does not give it a background color. I surrounded your h1 and h2 in a span tag with no display: block; and there is no background color.