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 How to Make a Website Customizing Colors and Fonts Use Color in CSS

Posted by nvcxnvkldsjaklfds
nvcxnvkldsjaklfds
Courses Plus Student 5,041 Points

CSS 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
Daniel Veremchuk
31 Points
Daniel Veremchuk
Daniel Veremchuk
31 Points

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

This 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
Daniel Veremchuk
31 Points

It 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.