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 Customizing Colors and Fonts Resize Text

Sophia Gr
Sophia Gr
1,361 Points
Posted by Sophia Gr
Sophia Gr
1,361 Points

Footer not changing

Hi, I made the CSS modifications to change the footer but it is not changing the font size and color to light gray. I tried changing the order in the CSS file but it's no working. Does anyone know what might be going on? I also tried adding footer p and making it more specific to the text but it's not working. Thanks!

main.css file

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

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

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

a {
  text-decoration: none;
}



/****************/
HEADING
****************/

#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: white;
    color: #999;
}

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

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

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

/* links */
a {
  color: #6ab47b;
}

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

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

index.html file

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sophia</title>
    <link rel="stylesheet" href="css/normalize.css">
        <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700italic,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Sophia</h1>
        <h2>Developer</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>
             </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 repetition.</p>
             </a>
          </li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/sophmoji"><img src="img/twitter-wrap.png" alt="Twitter logo"></a>
        <a href="http://facebook.com/sophmoji"><img src="img/facebook-wrap.png" alt="Facebook logo"></a>
        <p>&copy; Sophia 2016.</p>
      </footer>
    </div>
  </body>
</html>

4 Answers

Ryan Dudley
Ryan Dudley
Treehouse Project Reviewer
Ryan Dudley
Ryan Dudley
Treehouse Project Reviewer

It might be caused by the way you are doing your comments, you need to be careful because the way you have them set up they are being closed before you finish the comment, which could cause some weird errors.

For example, you currently have this:

/****************/  <------ this is closing the comment, leaving the rest of it not commented out.
FOOTER
****************/

So I would try changing your comments to something like this:

/****************
FOOTER
****************/  <------ this now closes the comment, encapsulating the entire comment.
Mark Pryce
Mark Pryce
8,804 Points
Mark Pryce
Mark Pryce
8,804 Points

I missed that welll spotted ^^

Mark Pryce
Mark Pryce
8,804 Points
Mark Pryce
Mark Pryce
8,804 Points

Could you use the cheatsheet to post code? Makes it easy to read, you can find it under the text area.

Try targeting your paragraph within your footer. 

footer p {
 font-size: 1em ;
 color: purple ;
}

Hope it helps, Happy coding.

Sophia Gr
Sophia Gr
1,361 Points
Sophia Gr
Sophia Gr
1,361 Points

Hi Mark, Thanks for the tip! I re-formatted it and I think it should look okay now. I tried your suggestion but it's still ignoring the entire footer css portion. Sophia

Mark Pryce
Mark Pryce
8,804 Points
Mark Pryce
Mark Pryce
8,804 Points

Well from what I can see is you need to move your footer color declaration into your " site colors" section and place it below the body tag as this might overwrite it.

Also try targeting the footers paragraph to change font-size.

Is it just the color and font-size that's not working?

Sorry on my phone.

Sophia Gr
Sophia Gr
1,361 Points
Sophia Gr
Sophia Gr
1,361 Points

Thanks for your help! Moving the footer css below body and rewriting the comments did it :-)