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 Kenny Parewijck
Kenny Parewijck
4,602 Points

Question about an id="logo" with wraps an anker element wich wraps a header. Background color not possible. why?

Hello

i was trying some stuff and I hit a wall.. I was searching online for an explanation but without succes. here we go:

HTML:

<header> <a href="index.html" id="logo"> <h1>Kenny Parewijck</h1> <h2>Ondernemer</h2> </a> </header>

CSS:

logo {

background-color: orange; border: 3px solid red; }

Problem:

The background-color does not change. I can see a strange thing with the border though.. (only border in at the start). Can someone help me and tell me why the background color doesn't turn orange?

Thanks!

*** EDIT: This is my css code I used. ***

'#logo {

background-color: orange; border: 3px solid red;

}'

( I have put the ' before the # in this post here because else way it doesn't show the # here in the post)

12 Answers

Kenny Parewijck
Kenny Parewijck
4,602 Points

apparently the problem lies within the a element. i wrap the h elements with an a element.

because the a element is an inline element and the h elements are block elements the width from the wrapping a element collapses. Therefore there are only two options to fix this.

  1. use a div to wrap everything inn stead of an anker.
  2. use display:block on the css from the logo id.

Note: when holding on to the second option and still wrap the h elements with an a element you could still set up some inline css options for the logo id like color or font-size, but no block css options like background or width.

Stéphane Diez
Stéphane Diez
19,350 Points
Stéphane Diez
Stéphane Diez
19,350 Points

When you use an ID in HTML, you must add a # to the CSS name like this:

#logo{ }
Kenny Parewijck
Kenny Parewijck
4,602 Points
Kenny Parewijck
Kenny Parewijck
4,602 Points

'#logo {

background-color: orange; border: 3px solid red;

}'

( I have put the ' before the # because else way it doesn't show the # here in the post)

Kenny Parewijck
Kenny Parewijck
4,602 Points
Kenny Parewijck
Kenny Parewijck
4,602 Points

Hello.

The # isn't the problem. I have selected my ID correct in my css file. It showed wrong in the post here.

Stuart McPherson
Stuart McPherson
15,939 Points
Stuart McPherson
Stuart McPherson
15,939 Points

Hi Kenny,

you've used the tag which is for creating links, but haven't put in link destination for example

index.html 
<a href="www.google.com">google</a>

To style the links I would have html like this

index.html 
<div id="logo">
  <a href="www.google.com">Kenny Parewijck</a>
<div>

If you just wanted text with as background, I'd just haveyour h1 & h2 in a div with the id="logo". Then use your css above

Kenny Parewijck
Kenny Parewijck
4,602 Points
Kenny Parewijck
Kenny Parewijck
4,602 Points

Thanks stuart. I'v tried this.

The code is now:

<header> <a href="index.html" id="logo"> <h1>Kenny Parewijck</h1> <h2>Ondernemer</h2> </a> </header>

if you try the css underneath you will find that the background is still not orange..

'#logo { background-color: orange; border: 3px solid red; }'

( I have put the ' before the # in this post here because else way it doesn't show the # here in the post)

Stuart McPherson
Stuart McPherson
15,939 Points
Stuart McPherson
Stuart McPherson
15,939 Points

I would change it too

index.html 
<a href="index.html">
  <div id="logo">
    <h1>Kenny Parewijck</h1>
    <h2>Ondernemer</h2>
  </div>
</a>
Kenny Parewijck
Kenny Parewijck
4,602 Points
Kenny Parewijck
Kenny Parewijck
4,602 Points

Yes it appears to work this way. Do you have an explanation why the former code won't allow me to change the background color?

Stuart McPherson
Stuart McPherson
15,939 Points
Stuart McPherson
Stuart McPherson
15,939 Points

You used the link tag, but if you want to style a specific link in the css you have to declare it like this

link.css 
a {
  color: orange;
}

if you had a link within a div (with id="logo") or a list you would style it like this.

link.css 
#logo a{
  color: orange
}

li a {
  color: orange;
}

good site here on styling links: http://www.w3schools.com/css/css_link.asp

Kenny Parewijck
Kenny Parewijck
4,602 Points
Kenny Parewijck
Kenny Parewijck
4,602 Points

If I try this:

CSS

'#logo { display: block; background-color: orange }'

Then it shows right..

It should have to do something with the properties of an ID or something.

Kenny Parewijck
Kenny Parewijck
4,602 Points
Kenny Parewijck
Kenny Parewijck
4,602 Points

If I try this:

CSS

'#logo { display: block; background-color: orange }'

Then it shows right..

It should have to do something with the properties of an ID or something.

Stuart McPherson
Stuart McPherson
15,939 Points

It should show

Stuart McPherson
Stuart McPherson
15,939 Points
Stuart McPherson
Stuart McPherson
15,939 Points

To be honest im not too sure, but if you want to style links up, I would have a parent container around them such as divs, lists, sections, header. so you can target the specific links within them over the general link styling with

link.css 
a {
  color: orange;
}