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 Use Classes in CSS

Kazira von miaow
Kazira von miaow
355 Points

My copyright part at the bottom of the page isn't turning grey. Thank you for your help!

I've read the other Q&As, saved& refreshed, cleared the cache. I'm trying to follow along with the videos as I go along, I wonder is it something to do with the <style></style> I'm using in the HTML that makes my CSS not work? (In the videos as far as I'm aware we haven't deleted the <style> ) Thank you for your help, heres my code

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title> Miaow Mail </title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
    <style>
  footer a {
        color: pink;
      }
      </a>
    </style>
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Miaow Mail</h1>
        <h2>A comprehensive email service for cats</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 80s 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="https://twitter.com/mariposa4444"><img src="img/twitter.png" alt="Twitter Logo"></a>
        <a href="https://www.facebook.com/monifa.alfayed"><img src="img/facebook.png" alt="Facebook Logo"</a>  

       <a><p>&copy; 2015 MiaowMail, a student of Nick Pettit.</p></a>
        </footer>
      </div>
  </body>
</html> 
main.css
a { 
  text-decoration: none;
}
#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}
#logo {
  text-align: center;
  margin: 0:
}

a {
  color: #6ab47b;
}

header {
  background: #6ab47b;
  border-color: #599a68;
}
h1, h2 {
  color: #fff;
}

nav {
  background: #599a68;
}

nav a, nav a:visited {
  color: #fff;
}

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

body {
  background-color: #fff;
  color: #999
} 
Kazira von miaow
Kazira von miaow
355 Points

I tried to ask above is it something to do with the style elements I'm using? But as far as I can remember we haven't deleted the style elements in the HTML

Roy Penrod
Roy Penrod
19,810 Points

Kazira, what color is the copyright info at the bottom of the page? I'm guessing it's pink. Is that correct?

Kazira von miaow
Kazira von miaow
355 Points

Yes its pink at the moment

3 Answers

Roy Penrod
Roy Penrod
19,810 Points

It's showing pink because the CSS selector 'footer a' in the embedded style is more specific than the general 'a' selector in your CSS file.

It's not considered a good practice to mix the CSS in your stylesheet with embedded CSS in the page. I would recommend you move all of your CSS to the external stylesheet.

Also, I'm not sure why you wrapped the copyright notice paragraph in an 'a' tag. Any reason why that's there?

In your CSS file, you can target the copyright notice paragraph with this code:

footer p {
   color: #888888;
} 

Just change the #888888 to whatever hex color code you want the copyright notice paragraph to be.

Kazira von miaow
Kazira von miaow
355 Points

Thank you! that worked! Yes basically the copyright bit kept linking to the facebook profile, it was suggested to me to wrap it in a elements to prevent that. Thank you!

Roy Penrod
Roy Penrod
19,810 Points

If you have something linking that shouldn't, make sure you closed the a tag. That's usually the culprit.

It looks like the copyright kept linking to the facebook profile because there isn't a closing anchor bracket after the Facebook Logo alt. As far as the copyright not turning GRAY, it could be due to not having a semicolon after the body color.

FYI:

Grey= #D3D3D3 Gray= #808080

Kazira von miaow
Kazira von miaow
355 Points

I'm British so I use British spelling unless I'm writing code ;) When writing code of course I use American spellings . Thanks for your comment!

Rick Gessner
Rick Gessner
43 Points

It doesn't look like you have a style set for that element. Try adding this to your css:

footer a p:last-child {color:#888}

Kazira von miaow
Kazira von miaow
355 Points

Thank you! Sorry to be asking again, but where exactly should I put this in my CSS (thanks again!)