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
joshua hooper
2,797 PointsHaving 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
Max Reinsch
5,740 PointsWhichever rule comes last overrides other rules with the same selector.
Can you post your code? I can test it for you.
joshua hooper
2,797 Points/************************************ 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; }
Max Reinsch
5,740 PointsCould you add your HTML too?
joshua hooper
2,797 Pointssure but i'm just wondering if in the project he's doing this on purpose so It can be corrected. idk
Max Reinsch
5,740 PointsIt's possible, I do believe it happens. If I can have your html code I can probably find the problem a lot faster.
joshua hooper
2,797 Points<!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>
joshua hooper
2,797 PointsWhat's that?
Max Reinsch
5,740 PointsThere's a link on the bottom right of this page. Shows you how to display your code on here.
Max Reinsch
5,740 PointsFailing that, send me an email with the html file and I'll check that. Maxflr@outlook.com
Max Reinsch
5,740 PointsTo begin with, your first body selector says "font-family" twice. Just testing the code now.
Max Reinsch
5,740 Pointshttp://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.
joshua hooper
2,797 Points<!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>
Max Reinsch
5,740 PointsHave you tried the markdown cheatsheet? That's probably why your html isn't showing.