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 CSS: Cascading Style Sheets What is CSS?

Posted by joelynempleo
joelynempleo
4,659 Points

My footer color didnt change

how come the footer wont change?

10 Answers

joelynempleo
joelynempleo
4,659 Points

the nav text worked using nav a... hmmm I'm on a quest to change the footer! :) thanks for your help!

joelynempleo
joelynempleo
4,659 Points
joelynempleo
joelynempleo
4,659 Points

<link rel=stylesheet" href="css/normalize.css> <style> footer { color:red; } </style>

joelynempleo
joelynempleo
4,659 Points

<link rel=stylesheet" href="css/normalize.css> <style> footer { color:red; } </style>

Stone Preston
Stone Preston
42,016 Points
Stone Preston
Stone Preston
42,016 Points

that looks correct assuming you have <footer></footer> tags in your html document. Are your other styles being applied, just not this one?

joelynempleo
joelynempleo
4,659 Points

<link rel=stylesheet" href="css/normalize.css> this is correct right?

Stone Preston
Stone Preston
42,016 Points
Stone Preston
Stone Preston
42,016 Points

if you want code to show up correctly in the forum you have to format it using markdown. Check out the tips for asking questions video linked on the right side of this page for info on how to do that. Ive edited your comment for you so its marked down correctly. normalize.css is probably what you are using as your CSS reset. Are you putting this footer selector in that file or in another file? (it probably belongs in another file) If its in a separate file you will need a separate link in addition to the normalize link

joelynempleo
joelynempleo
4,659 Points

I see. Well, the footer selector is in the index.html file, just following the video :(

Stone Preston
Stone Preston
42,016 Points
Stone Preston
Stone Preston
42,016 Points

oh it may be the case that you are using inline styles using <style> tags which is fine. can you post the code for your entire index.html file? be sure you format it with markdown

joelynempleo
joelynempleo
4,659 Points

can i copy and paste them here?

Stone Preston
Stone Preston
42,016 Points
Stone Preston
Stone Preston
42,016 Points

yes but you will have to format the code using markdown

Stone Preston
Stone Preston
42,016 Points
Stone Preston
Stone Preston
42,016 Points

can you post your code? also make sure you are saving the file after you modify it

joelynempleo
joelynempleo
4,659 Points
joelynempleo
joelynempleo
4,659 Points

<link rel=stylesheet" href="css/normalize.css> this is correct right? when linking with css? then <style> </style>

joelynempleo
joelynempleo
4,659 Points
joelynempleo
joelynempleo
4,659 Points

i don't know how and it seems like a lot of work. Anyway, i followed everything on the video, my footer still won't change color!

Stone Preston
Stone Preston
42,016 Points
Stone Preston
Stone Preston
42,016 Points

I cant really help you unless I see the code you are using. its really not not that much work. look at this forum post if you dont want to watch the video

joelynempleo
joelynempleo
4,659 Points

it's changed! i used footer p {color}

joelynempleo
joelynempleo
4,659 Points
joelynempleo
joelynempleo
4,659 Points

it seems like the normalize.css is not link to my index.html file, all codes are correct

Stone Preston
Stone Preston
42,016 Points
Stone Preston
Stone Preston
42,016 Points

normalize .css probably wont affect your inline styles but double check and make sure normalize.css is in a folder called css. that css folder should be in the same folder as your index.html file

joelynempleo
joelynempleo
4,659 Points

Yes the .css is in a folder called css.

Stone Preston
Stone Preston
42,016 Points
Stone Preston
Stone Preston
42,016 Points

hmm ok. can you post your code from index.html?

joelynempleo
joelynempleo
4,659 Points

<title>Joelyn Empleo | Style Creator</title> <link rel="stylesheet" href="css/normalize.css"> <style> footer { color:green; }

</style>
joelynempleo
joelynempleo
4,659 Points
joelynempleo
joelynempleo
4,659 Points 
<!DOCTYPE html>
<html>
  <head>
    <meta charset= "utf-8">
    <title>Joelyn Empleo | Style Creator</title>
    <link rel="stylesheet" href="css/normalize.css">


  </head>
  <body>
    <header>
      <a href="index.html"
        <h1>Joelyn Empleo</h1>
        <h2> Style Creator</h2>
        </a>
    <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>
    </nav>

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

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

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

          <li>
          <a href="img/numbers-09.jpg">
           <img src="img/numbers-09.jpg" alt="">
            <p>Drips created using Photoshop brushes.</p>
            </a>
          </li>

          <li>
          <a href="img/numbers-12.jpg">
           <img src="img/numbers-12.jpg" alt="">
            <p>Creating shapes using repitition.</p>
            </a>
          </li>


      </ul>
  </section>

  <footer>

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

       <p>&copy; 2014 Joelyn Empleo</p>

  </footer>



</body>
</html>
joelynempleo
joelynempleo
4,659 Points
joelynempleo
joelynempleo
4,659 Points

<title>Joelyn Empleo | Style Creator</title> <link rel="stylesheet" href="css/normalize.css"> <style> footer { color:green; }

</style>
Stone Preston
Stone Preston
42,016 Points
Stone Preston
Stone Preston
42,016 Points

try using this code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset= "utf-8">
    <title>Joelyn Empleo | Style Creator</title>
    <link rel="stylesheet" href="css/normalize.css">
    <style>
        footer { color: green; }
    </style>
  </head>
  <body>
    <header>
      <a href="index.html"
        <h1>Joelyn Empleo</h1>
        <h2> Style Creator</h2>
        </a>
    <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>
    </nav>

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

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

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

          <li>
          <a href="img/numbers-09.jpg">
           <img src="img/numbers-09.jpg" alt="">
            <p>Drips created using Photoshop brushes.</p>
            </a>
          </li>

          <li>
          <a href="img/numbers-12.jpg">
           <img src="img/numbers-12.jpg" alt="">
            <p>Creating shapes using repitition.</p>
            </a>
          </li>


      </ul>
  </section>

  <footer>

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

       <p>&copy; 2014 Joelyn Empleo</p>

  </footer>



</body>
</html>

and see if your footer text color changes to green. the color property changes text color. If you wanted the whole footer to change its color you would need to use the background-color property like this:

footer {
background-color: green;
}
joelynempleo
joelynempleo
4,659 Points

thanks. But was there any wrong with my codes? also i wanted to change the texts color of the footer.

Stone Preston
Stone Preston
42,016 Points
Stone Preston
Stone Preston
42,016 Points

it didnt look like anything was wrong (except for in the first code block you posted the style tags were missing from the head. but it looks like you posted another one which had it included). you can add multiple css rules to one selector

footer {
color: red;
background-color: green;
}
joelynempleo
joelynempleo
4,659 Points

I tried the background-color and it worked only the text didn't

joelynempleo
joelynempleo
4,659 Points

Even on the nav the color of the texts did not apply but the background color did :(

joelynempleo
joelynempleo
4,659 Points
joelynempleo
joelynempleo
4,659 Points

i copied your codes but it still dint work. Perhaps the normalize.css isn't connected with my html files.. OY!