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 Customizing Colors and Fonts Use Color in CSS

DIEGO RODRIGUEZ VIDAL
DIEGO RODRIGUEZ VIDAL
2,850 Points
Posted by DIEGO RODRIGUEZ VIDAL
DIEGO RODRIGUEZ VIDAL
2,850 Points

use color in css

Hi,

Sorry to bother you, while I was watching the video of "Use Color in CSS" i tried to see the changes that I applied in my workspace but I don´t get the same result that Nick in the video, Can you have a look to my code? I think that everything is alright...

Thank You

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

nvcxnvkldsjaklfds
nvcxnvkldsjaklfds
Courses Plus Student 5,041 Points

Are you using #(hash) in front of wrapper and logo IDs in your CSS file?

8 Answers

banu babanu
banu babanu
8,152 Points

I tested your code and everything works fine.

Don't forget to change 

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}
nvcxnvkldsjaklfds
PLUS
nvcxnvkldsjaklfds
Courses Plus Student 5,041 Points
nvcxnvkldsjaklfds
nvcxnvkldsjaklfds
Courses Plus Student 5,041 Points

Check your wrapper ID selector

In Nick's video, padding is 0 for top and bottom and 5% is for left and right.

But in your code, padding is 0 for top and bottom and 5 is for left and right.

Check the code below for correction.

#wrapper {

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

 }

I hope it helps

banu babanu
banu babanu
8,152 Points
banu babanu
banu babanu
8,152 Points

For the logo and wrapper You must use #

DIEGO RODRIGUEZ VIDAL
DIEGO RODRIGUEZ VIDAL
2,850 Points
DIEGO RODRIGUEZ VIDAL
DIEGO RODRIGUEZ VIDAL
2,850 Points

Hi guys,

thanks for the answers. I am using # before the wrapper and logo, but when I copied and pasted it the # didn´t appear. I tried change the values of the padding but it didn´t work, any other tip?

nvcxnvkldsjaklfds
nvcxnvkldsjaklfds
Courses Plus Student 5,041 Points

Can you post your code here both(HTML & CSS)?

banu babanu
banu babanu
8,152 Points
banu babanu
banu babanu
8,152 Points

can you paste the main.css file?

DIEGO RODRIGUEZ VIDAL
DIEGO RODRIGUEZ VIDAL
2,850 Points
DIEGO RODRIGUEZ VIDAL
DIEGO RODRIGUEZ VIDAL
2,850 Points 
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Diego Rodr&iacute;guez |Designer</title>
        <link rel="stylesheet" href="css/normalize.css"> 
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
        <header>
          <a href="index.html" id="logo">
            <h1>Diego Rodr&iacute;guez</h1>
            <h2>Designer</h2>
          </a>
          <nav>
            <ul>
              <li><a href="index.html">Portfolio</a></li>
              <li><a href="index.html">About</a></li>
              <li><a href="index.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/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
          <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook                 Logo"></a>
          <p>&copy; 2014 Diego Rodr&iacute;guez.</p>

        </footer>
        </div>
    </body>
</html>       
            ```
DIEGO RODRIGUEZ VIDAL
DIEGO RODRIGUEZ VIDAL
2,850 Points
DIEGO RODRIGUEZ VIDAL
DIEGO RODRIGUEZ VIDAL
2,850 Points 
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;
}