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

Karthik Nagarajan
Karthik Nagarajan
5,245 Points
Posted by Karthik Nagarajan
Karthik Nagarajan
5,245 Points

main.css file does not reflect changes!

I created a main.css style sheet but the code i write in there does not reflect the changes..what could be the problem? I double checked the part where the style sheet is referenced in the html file. Also i typed the code exactly as what nick says in the video

Stone Preston
Stone Preston
42,016 Points
Stone Preston
Stone Preston
42,016 Points

can you post your code for the css and the html please

Alina Sirbeanu
Alina Sirbeanu
992 Points

Hey there, i have the same problem like Karthik Nagarajan .main.css doesnt reflect changes.Here is my code :

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Sirbeanu Alina | Designer</title> <link ref="stylesheet" href="css/normalize.css"> <link ref="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html"> <h1>Sirbeanu Alina </h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html">Portofolio</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>Experimentations with color and texture.</p> </a> </li> <li> <a href="img/tot eu jpeg.jpg"> <img src="img/tot eu jpeg.jpg" alt=""> <p>Just me.</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Playing in 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 glows.</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Driping created using photoshop brushes.</p> </a> </li> </ul> </section> <footer> <a href="http://facebook.com/sirbeanu.alinamaria"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a> <p>© 2015 Sirbeanu Alina.</p> </footer> </body>

</html>

And here is my main.css code: body { background-color: orange; }

Can anyone help me? Thank you

8 Answers

Karthik Nagarajan
Karthik Nagarajan
5,245 Points
Karthik Nagarajan
Karthik Nagarajan
5,245 Points

HTML:

<!DOCTYPE html> 
<html>
<meta charset="utf-8">   
 <title>Karthik | Utterly Useless</title>
  <link ref="stylesheet" href="css/normalize.css">
  <link ref="stylesheet" href="css/main.css">
  <style>
  nav a {
  color: white;
  background-color: orange;    
    }
  </style>
 <body>
  <header>
    <a href="index.html">
     <h1>Karthik</h1>
     <h2>Venky gave up on me</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>
   <section>
  <p>Gallery comes here</p>
  </section>
  <footer>
  <p>&copy; Karthik 2014.</p>
  </footer>
    </div>
  </body>
  </html>

main.css within the css folder:

body {
  background-color: green;
}

a {
  text-decoration: none;
}
Stone Preston
Stone Preston
42,016 Points
Stone Preston
Stone Preston
42,016 Points

and you saved the stylesheet after making changes correct?

Rebecca Vonada
Rebecca Vonada
5,274 Points
Rebecca Vonada
Rebecca Vonada
5,274 Points

Based on what you posted, it looks like you haven't linked your main.css file to your HTML file - so your HTML doesn't know it exists! You can link it to your page inside the head element like this:

<head>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>

Once you've linked your stylesheet, save the changes and refresh the page to double-check.

Stone Preston
Stone Preston
42,016 Points
Stone Preston
Stone Preston
42,016 Points

he has it in there, I fixed his code formatting so his code displays property. he doesnt have the type attribute but thats not required in HTML5. the problem is its not in the head tag

Rebecca Vonada
Rebecca Vonada
5,274 Points

Ah, sorry! The first time I loaded the page it was missing a big chunk of code. It's displaying properly now. Thanks for the feedback!

Stone Preston
Stone Preston
42,016 Points
Stone Preston
Stone Preston
42,016 Points

yeah if the html code isnt in a markdown code block it doesnt display right

Stone Preston
Stone Preston
42,016 Points
Stone Preston
Stone Preston
42,016 Points

you are missing the 

<head> 
</head>

tag, put your stylesheet charset and style tags in that and it should work:

<head>
<meta charset="utf-8">   
 <title>Karthik | Utterly Useless</title>
  <link ref="stylesheet" href="css/normalize.css">
  <link ref="stylesheet" href="css/main.css">
  <style>
  nav a {
  color: white;
  background-color: orange;    
    }
  </style>
</head>
Alina Sirbeanu
Alina Sirbeanu
992 Points
Alina Sirbeanu
Alina Sirbeanu
992 Points

Now i see that when i copy pasted..dont know from what reason dint copy the <head></head>,because i linked into the head.Ill post again but only the first part of the code:

<html> <head> <meta charset="utf-8"> <title>Sirbeanu Alina | Designer</title> <link ref="stylesheet" href="css/normalize.css"> <link ref="stylesheet" href="css/main.css"> </head>

Alina Sirbeanu
Alina Sirbeanu
992 Points

Again dint take the head tag..which exist in my code.I dont know were is the problem.

Troy Harrington
Troy Harrington
2,065 Points
Troy Harrington
Troy Harrington
2,065 Points

Besides the head you have "link ref=" instead of "link rel=". Also make sure the css folder is in lower case. I had mine in caps and it wouldn't work. Drove me crazy!