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 CSS: Cascading Style Sheets What is CSS?

Carli Whitfield
Carli Whitfield
288 Points
Posted by Carli Whitfield
Carli Whitfield
288 Points

None of my CSS works!

None of my CSS is working. When I linked to normalize.css nothing changed. Also, neither my footer nor my navigation changed color. I have triple checked everything, and I can't seem to figure out what is going on.

Here is a copy of what I have in workspaces:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Carli Whitfield Hooten | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <style>
      nav a {
        color: white;
        background-color: orange;
      }
    </style>
Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Hi Carli,

I added & fixed markdown to help make the code more readable. If you're curious about how to add markdown like this on your own, checkout this thread on posting code to the forum . Also, there is a link at the bottom called Markdown Cheatsheet that gives a brief overview of how to add markdown to your posts.

Cheers!

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

I realize this is a few days old, but if you're still having issues please post here and I'll do my best to figure it out. With just a cursory glance at your code, nothing seems out of order, so if styles are not working it could be that the css file is not actually inside the css directory?

I'm able to copy / paste your code into a Workspace, and with the css file inside the css directory, the styles are being applied.

Hope this helps,

Cheers

8 Answers

Carli Whitfield
Carli Whitfield
288 Points
Carli Whitfield
Carli Whitfield
288 Points

That's not a dumb question, but I do save every time I preview. Nothing changed color. I don't get what's wrong.

elk6
elk6
22,916 Points

How weird.

I cannot see what's wrong at first glance. Can you post the entire html file instead of the piece you posted above?

Carli Whitfield
Carli Whitfield
288 Points
Carli Whitfield
Carli Whitfield
288 Points

I see I didn't include the last two lines of html.

</body> </html>

elk6
elk6
22,916 Points
elk6
elk6
22,916 Points

Hi Carli,

Maybe a really dumb question, but are you sure you saved your workspace before previewing?

Are the links on your navigation changing color? Because nav a select all the links inside the navigation and not the header itseld.

Carli Whitfield
Carli Whitfield
288 Points
Carli Whitfield
Carli Whitfield
288 Points

Also, 

<a href="index.html" id="logo">

is not working to center my header. ( I also included the CSS file so you can see if I did that right)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Carli Whitfield Hooten | 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>Carli Whitfield Hooten</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">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 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 with 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/carlipwh"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
        <a href="http://facebook.com/carli.hooten"><img src="img/facebook.png" alt="Facebook Logo"></a>
        <p>&copy; 2014 Carli Whitfield Hooten.</p>
      </footer>
      </div>
  </body>
  </html>

Here is my CSS:

a {
  text-decoration: none;
}

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

#logo {
  text-align: center;
  margin: 0;
}
Carli Whitfield
Carli Whitfield
288 Points
Carli Whitfield
Carli Whitfield
288 Points

I see I forgot to copy the last two lines of my html:

</body> </html>

elk6
elk6
22,916 Points

In the first post your CSS is in your HTML, in the second post, you have included an external style sheet. BUt in the external style sheet, i cannot see any of the color declorations you have in the first post ( like: background-color: orange etc. ). This is more for us to know what is going on. ;)

Have you used the ID-selector on the wrapper and the logo? #wrapper and #logo in your css.

Also, make sure that your css files are located in the proper folder. They could be in the top folder instead of in a seperate /css folder.

elk6
elk6
22,916 Points

In the first post your CSS is in your HTML, in the second post, you have included an external style sheet. BUt in the external style sheet, i cannot see any of the color declorations you have in the first post ( like: background-color: orange etc. ). This is more for us to know what is going on. ;)

Have you used the ID-selector on the wrapper and the logo? #wrapper and #logo in your css.

Also, make sure that your css files are located in the proper folder. They could be in the top folder instead of in a seperate /css folder.

Zach Taiji
Zach Taiji
1,449 Points
Zach Taiji
Zach Taiji
1,449 Points

Hey Carli,

Remember that after <!DOCTYPE HTML>, you should have an opening and closing HTML tag, which wraps the rest of your file.

You also need to wrap your Meta, Title and Link tags with the Head tag, like so:

<head>
<meta charset="utf-8">
<title>Carli Whitfield Hooten | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>

Now, onto the CSS. Let's look at this line on your HTML file:

 <a href="index.html" id="logo">

It's referencing the ID selector of your CSS file. In your CSS file though, you just put:

logo {
text-align: center; margin: 0;
 }

.. But ID selectors in the CSS file need to be preceded like a hashtag. So it should look like

#logo {
text-align: center; margin: 0;
 }

The same goes for your Wrapper ID selector of your CSS file - it should look like #wrapper. Note though, that in the HTML file, the ID reference doesn't need a hashtag.

PS - you also need a <Body> opening and closing tag wrapping your Header, Section and Footer tags in the HTML.

Carli Whitfield
Carli Whitfield
288 Points
Carli Whitfield
Carli Whitfield
288 Points

Thanks guys.

Zach, I do have an opening and closing <html> element. It just didn't get copied for some reason to this post. Also, I have a <head> element surrounding <meta charset="utf-8">......<link rel="stylesheet" href="css/main.css">. However, for some reason it didn't get copied either. I do have # before wrapper and logo. Again, it didn't get copied. I took screenshots on my computer of my html and css, but I don't know how to insert them here.

Elian, I have moved on with the lessons, and we were told to delete the css from the html and open a separate style sheet. So far everything is working in the external sheet except for:

#logo {
   text-align: center;
   margin: 0;
}

Here is the corresponding information from the html markup:

<header>
      <a href="index.html" id="logo">
        <h1>Carli Whitfield Hooten</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>

I really hope everything copies right so y'all can see what's wrong. Thank you for your time.

Carli Whitfield
Carli Whitfield
288 Points
Carli Whitfield
Carli Whitfield
288 Points

I am sorry guys, I am typing everything out correctly. Exactly how you have said, and how I have it in my workspace. But for some reason, it translates funny on this forum and leaves out certain html elements and #. But I can assure y'all that everything you have said so far, I have done correctly in my workspace. I'm sorry for the confusion. This is frustrating to me.

With all that in mind, do you think there is any other reason why certain things aren't working?

elk6
elk6
22,916 Points
elk6
elk6
22,916 Points

I've seen it happen before. the copy pasting doesn't always work right. You can best put your code between three backticks when pasting it here. Including css.

If it's just your logo now that isn't centering. See if you missed something before that. For instance, if you miss a colon or a semi-colon in your code just before your #logo selector, that one will not run.

Scan the code carefully. I would love to take a look for you but the easiest way to do that is to post all your code like it is now, before moving on.