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 Use ID Selectors

Posted by Andrew Adams
Andrew Adams
405 Points

main.css not working

Hi, I have coded the webpage exactly as has been done in the videos, but my main.css is not styling anything, the page doesn't change at all, no matter what I do to it.

Everything is correct in the code in terms of referencing the correct location, but nothing is happening.

Please help!

Jeff Busch
Jeff Busch
19,287 Points

We need to see our code.

10 Answers

Trent Burkenpas
Trent Burkenpas
22,388 Points
Trent Burkenpas
Trent Burkenpas
22,388 Points

going to need to see your code. Most likely you didn't link it properly in the html.

Andrew Adams
Andrew Adams
405 Points
Andrew Adams
Andrew Adams
405 Points

Fair point! Please see below:

----------- Begin index.html---------------

<!DOCTYPE html> <html>

<head> <meta charset="utf-8"> <title>Photography | Photography & 3D Design</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css"> </head>

<body> <header> <a href="index.html"> <h1>Joe Soap</h1> <h2>Photographer</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>

  <section>
    <ul>
      <li>
        <a href="img/numbers-01.jpg">
          <img src="img/numbers-01.jpg" alt="">
          <p>Experimentation with colour and texture</p>
        </a>
      </li>
      <li>
        <a href="img/numbers-02.jpg">
          <img src="img/numbers-02.jpg" alt="">
          <p>Playing with blending modes</p>
        </a>
      </li>
      <li>
        <a href="img/numbers-06.jpg">
          <img src="img/numbers-06.jpg" alt="">
          <p>Trying to create an 80's glow style</p>
        </a>
      </li>
      <li>
        <a href="img/numbers-09.jpg">
          <img src="img/numbers-09.jpg" alt="">
          <p>Wet paint with Photoshop brushes</p>
        </a>
      </li>
      <li>
        <a href="img/numbers-12.jpg">
          <img src="img/numbers-12.jpg" alt="">
          <p>Playing with repeating shapes</p>
        </a>
      </li>
    </ul>
  </section>

  <footer>
    <img src="img/twitter-wrap.png" alt="Twitter Logo">
    <img src="img/facebook-wrap.png" alt="Facebook Logo">
    <p>&copy; 2014 Joe Soap.</p>
  </footer>

</body> </html>

----------------- End index.html -----------------------

----------------- Begin main.css ----------------------

body { background-color: orange; }

---------------- End main.css -------------------------

Trent Burkenpas
Trent Burkenpas
22,388 Points
Trent Burkenpas
Trent Burkenpas
22,388 Points

I don't see a body tag in the html. try this in your css

html {
     background-color: orange;
}
Andrew Adams
Andrew Adams
405 Points
Andrew Adams
Andrew Adams
405 Points

Seems the comments here use the formatting. Trying the Header file again....

<meta charset="utf-8"> <title>Photography | Photography & 3D Design</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css">

Andrew Adams
Andrew Adams
405 Points
Andrew Adams
Andrew Adams
405 Points

.... and again.....

    <meta charset="utf-8">
    <title>Photography | Photography & 3D Design</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
Trent Burkenpas
Trent Burkenpas
22,388 Points
Trent Burkenpas
Trent Burkenpas
22,388 Points 
<link rel="stylesheet" href="css/main.css" >

you should have a link that looks like this in your head tag.

Andrew Adams
Andrew Adams
405 Points
Andrew Adams
Andrew Adams
405 Points

Normalize is working fine, no problem.

I copied the code EXACTLY as written in the video. The code you had up there is also in my code straight under the normalize link, just as is in the video. I don't know why normalize is working fine but main.css is not.

Trent Burkenpas
Trent Burkenpas
22,388 Points
Trent Burkenpas
Trent Burkenpas
22,388 Points

maybe you miss spelled the main.css file?

Andrew Adams
Andrew Adams
405 Points
Andrew Adams
Andrew Adams
405 Points

There is a body tag, I think just in the pasting of the code the thread did some formatting. I have also checked, double checked, and triple checked the spelling and everything is fine in that regard.

Workspaces just seems to have a problem then. Dunno how to get that resolved.

Anthony Aslan
Anthony Aslan
2,516 Points
Anthony Aslan
Anthony Aslan
2,516 Points

I've ran into the same problem. Coding has been check several times. Can't seem to get it solved

Anthony Aslan
Anthony Aslan
2,516 Points

My CSS alterations to the page work fine when included directly in the html file, but when I try to link the seperate css file into the html file it doesn't respond

Andrew Adams
Andrew Adams
405 Points
Andrew Adams
Andrew Adams
405 Points

I have been playing with it for a while and have found a temporary but by no means ideal remedy. When the error happens, save your workspace files and close workspaces. Then go in to your internet settings and purge the cache and then go back and launch the workspace. The preview should now update properly.

Only challenge, sometimes the file does not actually save before closing workspace, so you may need to re-type code. Purging the cache every 5 minutes is also irritating, however I have found it to work every time.

I did contact treehouse support and they have acknowledged that they are aware of a problem. They say they are working to fix it in the coming weeks, and that in the meantime people experiencing problems should use a text editor rather than workspaces to do the coding.

Hope this helps you out!