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 dp82
dp82
8,051 Points

header { background: #6ab47b; } does not seem to work when used outside of the workspace tool

The following css changes the background color just fine when used in the workspaces tool online:

header { background: #6ab47b; border-color: #599a68; }

However, when I tried this using a simple notepad with ie/chrome/firefox the background was not changed. Even though the syntax was exactly the same.

Has anyone else had this problem?

4 Answers

Miguel Palau
Miguel Palau
24,176 Points
Miguel Palau
Miguel Palau
24,176 Points

I think you could simplify it a bit more

```header { background: #6ab47b; border: 15px solid #599a68; }

Michael Brown
Michael Brown
7,431 Points

Yep, nice edit. :-)

Marcus Parsons
Marcus Parsons
15,719 Points
Marcus Parsons
Marcus Parsons
15,719 Points

Hi Darren,

Workspaces is really just an online editor. It does provide a server for several different backend programming languages. But, when it comes to front end programming, It is quite the same as using Notepad on your local machine or any other plain text editor online/offline, for that matter, which means that the HTML/CSS/JavaScript you write in Workspaces will work on your local machine, as well. The most likely scenario is that something is that your header is not set up correctly in the HTML and/or not setup correctly in the CSS and that is why the background isn't changing.

Here's a very simple Codepen that shows your code working as expected. Note that Codepen is no special tool itself. It's merely a way for people to share code. http://codepen.io/anon/pen/NqaJgM

If you'd like to share the code you have, Codepen.io is a great tool for that. Just paste in the HTML and CSS you have into the corresponding blocks, hit the save button, copy the URL in the address bar (will look similar to the one I posted above), and then paste that here if you're still having trouble.

Michael Brown
Michael Brown
7,431 Points
Michael Brown
Michael Brown
7,431 Points

I tested the declarations you provided . . .

header { 
  background: #6ab47b; 
  border-color: #599a68; 
}

. . . and looked at it in Chrome and see the green background, but no border. Is that your problem? no border?

When I add the border-style and border-width declarations, then the darker green border appears. 

header { 
  background: #6ab47b; 
  border-color: #599a68; 
  border-style: solid;
  border-width: 15px;
}
dp82
dp82
8,051 Points
dp82
dp82
8,051 Points

Hi, thank you for the quick response, and thank you for the Copepen.io recommendation I wasn't aware of that site. I tried my code on the Codepen.io site and the background color was displayed for the header. I believe I have found the problem now though, I noticed that I had an old version of IE installed on my computer which was set as the default browser.