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

Posted by stevencooper
stevencooper
5,755 Points

Css Colors & hex

my index.html page looks different than NIck's example while using the same exact css coding. What should be white (#fff) is actually a purple color.

here's the code:

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

wrapper {

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

a { text-decoration: none; }

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

logo {

text-align: center; margin: 0; }

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

/* site body */ body { background-color: #fff; color: #999; }

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

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

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

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

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

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

also, the nav links colors are the purple color, but when I scroll over & hold down my left mouse button, the color of the link changes to red, then purple again when the button is let loose.

The h1 & h2 selectors should be white, but are purple, and turn red when scrolled & left button down. basically the same as above.

Can anyone explain what is going on?

after posting, i noticed that the lines of code are run together. It does not look like the actual main.css page I am working on.

thank you

6 Answers

Ashley Carbone
PLUS
Ashley Carbone
Courses Plus Student 1,307 Points
Ashley Carbone
Ashley Carbone
Courses Plus Student 1,307 Points

I compared your CSS with mine.
The only differences I noticed is:

/* nav background on mobile */ nav { background: #599a68; MISSING } AT THE END TO CLOSE IT

/* logo text */ h1, h2 { color: #ffffff; } I USED #FFF; (I doubt this is related...as it will be white.)

Your normalize.css should be listed BEFORE main.css in your index.html? You may want to check your html as well.

stevencooper
stevencooper
5,755 Points

The header is green as it is supposed to be. All the text in the header, both name & title (h1, h2 respectively) as well as the nav links are purple when they should be white.

When I hold my cursor over any of the text and press the left mouse button, the selected text turns red - h1 would be red if I moused & held down L button, while h2 & the nav text remain purple.

I hope i'm not confusing the issue.

stevencooper
stevencooper
5,755 Points

I've tried to post the html but only part of the coding, the head & footer, show up in the comment window. I remember reading that using the lower script ` symbol (with the ~ key) would allow posting of html, but it doesn't seem to be working for me.

Thomas Seelbinder
PLUS
Thomas Seelbinder
Courses Plus Student 1,223 Points
Thomas Seelbinder
Thomas Seelbinder
Courses Plus Student 1,223 Points

Thanks. I don't see any indication on why the colors are different. Everything looks ok, unless I am missing something. Hopefully, someone can assist you .

stevencooper
stevencooper
5,755 Points
stevencooper
stevencooper
5,755 Points 
<!DOCTYPE html>
 <html>
  <head>
    <meta charset="UTF-8">
    <title> Steven Cooper  | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href=“index.html" id="logo"> 
          <h1>Steven Cooper</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>
              </a>
            </li>              
            <li>
              <a href="img/numbers-02.jpg">
                <img src="img/numbers-02.jpg" alt="">
                <p>Playing with blending modes with 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 made with 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=https://facebook.com/steven.m.cooper.79?v=feed"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
      <a href="https://twitter.com/SMCooper1956"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
         <p>&copy; 2014 Steven M. Cooper.</p>
    </footer>
  </div>
 </body>
</html>```
stevencooper
stevencooper
5,755 Points

IDK what I was doing wrong but i have eventually gotten the colors right. thanks for the help