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 Pick Fonts and Set Relative Units

Having a problem with CSS overwriting the other.

I keep following nick, doing as he says, checked over it a few times and
when he moved the body selector to the top. My background color vanished after that change.

10 Answers

Whichever rule comes last overrides other rules with the same selector.

Can you post your code? I can test it for you.

/************************************ general ************************************/

body { font-family: font-family: 'Londrina Outline', cursive; }

wrapper {

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

a { text-decoration: none; }

/************************************ Heading ************************************/

logo {

text-align: center; margin: 0; }

h1 { font-family: 'Londrina Outline', cursive; 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; }

/************************************ Colors ************************************/

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

/* green header */

header {

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

Could you add your HTML too?

sure but i'm just wondering if in the project he's doing this on purpose so It can be corrected. idk

It's possible, I do believe it happens. If I can have your html code I can probably find the problem a lot faster.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Josh hooper | Designer | </title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Revalia|Londrina+Outline|Loved+by+the+King' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="tree.html" id="logo"> <h1>Josh Hooper</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="tree.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 id="gallery"> <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 mode in photoshop</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""/> <p>Trying to create a 80's style that 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 reputition</p> </a> </li> </ul> </section> <footer> <a href="http://www.jager.com"><img src="img/twitter-wrap.png" alt="twitter logo"></a> <a href="http://www.shinner.com"><img src="img/facebook-wrap.png" alt="facebook logo"></a> <p>© 2014 Joshua Hooper</p> </footer> </div> </body> </html>

What's that?

There's a link on the bottom right of this page. Shows you how to display your code on here.

Failing that, send me an email with the html file and I'll check that. Maxflr@outlook.com

To begin with, your first body selector says "font-family" twice. Just testing the code now.

http://s27.photobucket.com/user/MaxReinsch/media/joshattempt.png.html?sort=3&o=0

Once I've removed the additional "font-family", this is what your page looks like to me.

Take into account, the images are missing because I haven't included them in the img folder.

If it still doesn't work, try refreshing your browser and/or deleting the cookies (for some reason this has helped me in the past). Also, try the code in a different browser.

Furthermore, do you use html and css validators? Quite handy if you need to know if your code contains any errors.

html validator- http://html5.validator.nu/

css validator- http://jigsaw.w3.org/css-validator/

Let me know how it goes.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Josh hooper | Designer | </title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Revalia|Londrina+Outline|Loved+by+the+King' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="tree.html" id="logo"> <h1>Josh Hooper</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="tree.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 id="gallery"> <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 mode in photoshop</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""/> <p>Trying to create a 80's style that 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 reputition</p> </a> </li> </ul> </section> <footer> <a href="http://www.jager.com"><img src="img/twitter-wrap.png" alt="twitter logo"></a> <a href="http://www.shinner.com"><img src="img/facebook-wrap.png" alt="facebook logo"></a> <p>© 2014 Joshua Hooper</p> </footer> </div> </body> </html>

Have you tried the markdown cheatsheet? That's probably why your html isn't showing.