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 Resize Text

Oliver Sewell
Oliver Sewell
16,425 Points

red error on my /**Colors**/

body { background-color: #fff; color: #999; }

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

/* nav background on mobile */ nav { background-color: #599a68; }

/* logo text */ h1, h2 { color: #fff; }

/* link s */ a { color: #6ab47b; }

/* nav link */ nav a, nav a:visited { color: #fff; }

/* selected nav link */ nav a.selected, nav a:hover{ color: #32673f; }

can someone help?

14 Answers

Tim Knight
Tim Knight
28,888 Points

The issue is that you didn't close the brackets on your footer declaration.

You have:

footer { font-size: 0.75em; text-align: center; padding-top: 50px; color: #ccc;

and it should be:

footer { font-size: 0.75em; text-align: center; padding-top: 50px; color: #ccc; }
Tim Knight
Tim Knight
28,888 Points

Hi Oliver, can you provide me with a little bit more information on the issue you're having? What is showing red? Where is it showing that? Anything that would help me see what you're seeing.

Oliver Sewell
Oliver Sewell
16,425 Points

the body , header , nav , h1 , h2 , a and nav a { are all showing red and no colors are shown on the header background color and border and the link colours are white somethings gone wrong

Tim Knight
Tim Knight
28,888 Points

I copied and pasted your code in a codepen and I'm not seeing red showing up at all.

http://codepen.io/timknight/pen/Kwvmqz

Oliver Sewell
Oliver Sewell
16,425 Points

do you think it could be a problem with my index.html then?

<header>
  <a href="index.html" id="logo">
    <h1>Oliver Sewell</h1>
    <h2>Designer</h2>
    </a>
  <nav>
    <ul>
      <li><a href="index.html" class="selected">Portfolio</a> </li>
      <li><a href="about.html">About</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>
   </header>
Tim Knight
Tim Knight
28,888 Points

I revised the codepen and that still looks fine... see: http://codepen.io/timknight/pen/Kwvmqz

Oliver Sewell
Oliver Sewell
16,425 Points

:/ iv been stuck on this problem for 2 hours should i try delete everything and copy and paste see if that works

Tim Knight
Tim Knight
28,888 Points

You could try. I just want to be clear here... it's all of your text within the rendered HTML that is showing as red?

Alicia Leslie
Alicia Leslie
4,209 Points

You can use your developer tools to try and identify the problem! If you are using chrome, go to view --> developer --> developer tools. You should see all the css that exists on the right side under styles and mess with the css in there to identify the problem.

Oliver Sewell
Oliver Sewell
16,425 Points

its the css thats showing as red the only thing that is red in my html is the bottom part this is my full html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Oliver Sewell | Designer </title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,700,800,400' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Oliver Sewell</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a> </li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header>

<div id"wrapper">
<section>
 <ul>
   <li> 
     <a href="img/numbers-01.jpg">
     <img src="img/numbers-01.jpg" alt=""
     <p>Experimentation with color and texture </p>
</li>

       <li> 
     <a href="img/numbers-02.jpg">
     <img src="img/numbers-02.jpg" alt=""
     <p>blend modes</p>
</li>



   <li> 
     <a href="img/numbers-06.jpg">
     <img src="img/numbers-06.jpg" alt=""
     <p>80's style</p>
</li>

   <li> 
     <a href="img/numbers-09.jpg">
     <img src="img/numbers-09.jpg" alt=""
     <p>drips photoshop brushes</p>
</li>

   <li> 
     <a href="img/numbers-12.jpg">
     <img src="img/numbers-12.jpg" alt=""
     <p>shapes </p>
</li>
  </ul>
</section>

<footer>
  <a href="http://twitter.com"><img src="img/twitter-wrap.png" alt="Twitter"</a>
   <a href="http://facebook.com"> <img src="img/facebook-wrap.png" alt="facebook" </a>


  <p>&copy; 2015 Oliver Sewell</p>
</footer>
    </div>

</body>

</html>

Oliver Sewell
Oliver Sewell
16,425 Points

full css

/******************* GENERAL *******************/

body { font-family: 'Open Sans', sans-serif; }

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; }

a { text-decoration: none; }

/******************* HEADING *******************/ header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo {

text-align: center; margin: 0; }

h1 { font-family: 'Changa One', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }

h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; } /******************* Navigation *******************/

nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }

/******************* FOOTER *******************/

footer { font-size: 0.75em; text-align: center; padding-top: 50px; color: #ccc;

/******************* COLORS *******************/

/* site body */

body { background-color: #fff; color: #999; }

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

/* nav background on mobile */ nav { background-color: #599a68; }

/* logo text */ h1, h2 { color: #fff; }

/* link s */ a { color: #6ab47b; }

/* nav link */ nav a, nav a:visited { color: #fff; }

/* selected nav link */ nav a.selected, nav a:hover{ color: #32673f; }

Tim Knight
Tim Knight
28,888 Points

Oliver make sure you're including opening and closing HTML tags like you see on http://codepen.io/timknight/pen/Kwvmqz.

Also to Alicia's point, check out your dev tools to inspect the text to see where the red might be coming from.

Oliver Sewell
Oliver Sewell
16,425 Points

i think somethings in the wrong order on my .css

/******************* GENERAL *******************/

body { font-family: 'Open Sans', sans-serif; }

wrapper {

max-width: 940px; margin: 0 auto; padding: 0 5%; }

a { text-decoration: none; }

/******************* HEADING *******************/ header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo {

text-align: center; margin: 0; }

h1 { font-family: 'Changa One', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }

h2 { font-size: 0.75em; margin: -5px 0 0; font-weight: normal; } /******************* Navigation *******************/

nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }

/******************* FOOTER *******************/

footer { font-size: 0.75em; text-align: center; padding-top: 50px; color: #ccc;

/******************* COLORS *******************/

/* site body */

body { background-color: #fff; color: #999; }

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

/* nav background on mobile */ nav { background-color: #599a68; }

/* logo text */ h1, h2 { color: #fff; }

/* link s */ a { color: #6ab47b; }

/* nav link */ nav a, nav a:visited { color: #fff; }

/* selected nav link */ nav a.selected, nav a:hover{ color: #32673f; }

Tim Knight
Tim Knight
28,888 Points

I think you might be right, I'm digging into it for you right now.

Oliver Sewell
Oliver Sewell
16,425 Points

omg i missed out one bracket and it caused all those problems! , thankyou dude i was stuck on that for 2 hours trying to figure out what i did wrong , its working now thankyou!

Tim Knight
Tim Knight
28,888 Points

Glad I could help Oliver, best of luck in your continued learning.