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 How to Make a Website CSS: Cascading Style Sheets What is CSS?

Posted by Bridget O'Shea
Bridget O'Shea
238 Points

Lost in CSS

Can't figured out how to get top footer css to turn green and orange like the work in the project, where and what am I missing in my code? Do I put it at the bottom footer or do I keep code on top like example in video?

<!doctype html>
<html>
<head>
<meta charset="utf-8">  
<title>Name Designer</title>

<style>
footer  {color: green;}
footer  {color: orange;}
</style>
</head>

<body>

<header>
<a href="index.html">
<h1>Name</h1>
<h2>Designer Yo Mama</h2>  

<nav> 

<ul>
<li><a href="index.html">Portfolio</a></li> 
<li><a href="about.html">About</a></li>  
<li><a href="contact.html">Contact</a></li> 
</ul>  

</a>
</nav>  
</header>  
<section>

<ul>
<li>
<a href="Img for school/numbers-01.jpg">
<img src="Img for school/numbers-01.jpg" alt="Truck">
<p>Experimentation with color and texture.</p>
</a>
</li>

<li>
<a href="Img for school/numbers-02.jpg">
<img src="Img for school/numbers-02.jpg" alt="Truck">
<p>Playing with blending modes in Photoshop.</p>
</a>
</li>

<li>
<a href="Img for school/numbers-06.jpg">
<img src="Img for school/numbers-06.jpg" alt="Truck">
<p>Trying to create an 80's style glows.</p>
</a>
</li>

<li>
<a href="Img for school/numbers-09.jpg">
<img src="Img for school/numbers-09.jpg" alt="Truck">
<p>Drips created using Photoshp brushes.</p>
</a>
</li>

<li>
<a href="Img for school/numbers-12.jpg">
<img src="Img for school/numbers-12.jpg" alt="Truck">
<p>Creating shapes using repetition.</p>
</a>
</li> 
</ul>

</section>  

<footer>
<a href="http://www.bjust.oshea@facebook.com"><img src="Img for school/twitter-wrap.png" alt="Twitter Logo"></a>
<a href="http://www.bjust.oshea@facebook.com"><img src="Img for school/facebook-wrap.png" alt="Facebook Logo">
 <p> &copy; Copyright Information to be located at the bottom of the page.</p></a> 

</footer>  
</body>
</html>
Nejc Vukovic
.a{fill-rule:evenodd;}techdegree seal-36
Nejc Vukovic
Full Stack JavaScript Techdegree Graduate 51,574 Points

@Bridget O'Shea

Please repost your code. But this time do it like this:

Type "```html " on the first line

Paste your code in the line under it.

After your code type " ``` "

And then post.

You should check the "Markdown Cheatsheet" to get a bit more details.

4 Answers

Artyom Karapetov
Artyom Karapetov
406 Points
Artyom Karapetov
Artyom Karapetov
406 Points

It has to be:

<style>

   footer {
      color: green;
      background-color: orange;
      }

</style>

You need one rule that has footer as the selector and 2 declarations, enclosed in style element.

Walter Bueso
Walter Bueso
10,654 Points
Walter Bueso
Walter Bueso
10,654 Points

footer { background-color: what ever color you want} ;

Bridget O'Shea
Bridget O'Shea
238 Points
Bridget O'Shea
Bridget O'Shea
238 Points

Copied and pasted code and still does not work. My code is below... <style> footer {color: green;} background-color: orange}; </style> </head>

Artyom Karapetov
Artyom Karapetov
406 Points

Try using the code above from my answer. In this code the curly braces {} have to go around the declarations, so one { should go after that footer selector and the closing } should be after orange. The semicolon ; should go after each value, e.g. green and orange.

Rachelle Wood
Rachelle Wood
15,362 Points
Rachelle Wood
Rachelle Wood
15,362 Points

Hi. So what are you seeing when you type your first bit of code (the one you showed in your original post)? You don't see orange text in the footer? Background-color and color are not the same in css: the former changes the color of the entire element, the latter changes the color only of the text inside the element. What you put in your last post would make the color of your text green and the color of the entire footer element orange if you dropped the curly brace after green;.Let's say you did want to do that, then you should have the following: 

footer {
  color: green; 
  background-color: orange;
}