Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS How to Make a Website CSS: Cascading Style Sheets What is CSS?

My footer color didnt change

how come the footer wont change?

10 Answers

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

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

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

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?

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

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

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

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

can i copy and paste them here?

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

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

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

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

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

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

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

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

Yes the .css is in a folder called css.

Stone Preston
Stone Preston
42,016 Points

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

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

</style>
<!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>

<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

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;
}

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

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;
}

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

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

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