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 Aaron Ellsworth
Aaron Ellsworth
1,224 Points

Issue with my CSS

For some reason my CSS isn't rendering...well at least most of it. I'm guessing it's a problem with my HTML. Images, formatting, etc. are just not rendering. Can anyone spot where I messed up?

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Aaron Ellsworth | Digital Marketer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Lato:400,700|Oswald' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/Main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Aaron Ellsworth</h1> <h2>Digital Marketer</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>Experimentation with color and texture.</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Playing with blending modes in Photoshop.</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Trying to create an 80's style of glows.</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Drips created using Photoshop brushes.</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/aaronellsworth"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a> <a href="http://facebook.com/aaronellsworth"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a> <p>© 2014 Aaron Ellsworth.</p> </footer> </div> </body> </html>

5 Answers

Henry Moran
Henry Moran
10,516 Points
Henry Moran
Henry Moran
10,516 Points

Try putting the "Main.css" above the Google Link and below the "normalize.css". Hopefully that does it.

Rich Bagley
Rich Bagley
25,869 Points
Rich Bagley
Rich Bagley
25,869 Points

Hi Aaron,

On this line you have a capital 'M' for Main.css.

<link rel="stylesheet" href="css/Main.css">

Check your file name to make sure the case matches. It may be main.css instead.

-Rich

Máté Végh
Máté Végh
25,607 Points
Máté Végh
Máté Végh
25,607 Points

Hey Aaron,

I noticed that you've also missed the html, head and the opening body tags. Not sure if this causes the issue with your CSS, but these mistakes can cause other problems too, so they should be corrected anyway.

Aaron Ellsworth
Aaron Ellsworth
1,224 Points
Aaron Ellsworth
Aaron Ellsworth
1,224 Points

Thanks guys, I fixed the case sensitive issue for main.css as well as moving the CSS link above the google link. However, the problem still persists. As for missing the html, head, and body tags I simply copied and pasted what I had in workspaces...yet those opening tags were not included for some reason. This is what the relevant part of my should have looked like when I posted the question. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Aaron Ellsworth | Digital Marketer</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> <link href='http://fonts.googleapis.com/css?family=Lato:400,700|Oswald' rel='stylesheet' type='text/css'> </head> <body>

However, my CSS is still messed up. Any other thoughts or suggestions? Here is my main.css code: a { text-decoration: none; }

wrapper {

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

a { text-decoration: none; }

img{ max-width: 100% }

header{ float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

logo {

text-align: center; margin: 0; }

h1 { font-family: 'Lato', sans-serif; margin: 15px 0; font-size: 1.75em; font-weight: normal; line-height: .8em; }

a { color: #6ab47b; }

h1, h2 { color: #fff; }

nav { background: #599a68; }

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

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

nav ul { list-style: none; margin: 0 10px; padding: 0; }

nav li { display: inline-block; }

gallery {

margin: 0; padding: 0; list-style: none; }

gallery li{

float: left width: 45%; margin: 2.5%; background-color: #f5f5f5; align-self: color: #bdc3c7; }

gallery li a p {

margin: 0; padding: 5%; font-size: 0.75em; color: #bdc3c7; }

/* This is a test comment */ body: { background-color: #fff; color: #999; }

header { background: #6ab47b; border: #599a68; text-align: center; }

Máté Végh
Máté Végh
25,607 Points
Máté Végh
Máté Végh
25,607 Points

In your CSS, on line 39, there is no semicolon after float: left, and align-self has no value declared. On line 45 there is an unnecessary colon after the body selector. In your HTML, there is no gallery ID assigned to any element.