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 Paul MOREAU-GAUDRY
Paul MOREAU-GAUDRY
2,069 Points

my CSS Styling sheet does not work. Could you help me please?

Hello everyone,

I am doing the "how to make a website course and I am stuck with the CSS styling sheet. I have typed in the code as explained but it does not make changes to the website.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Paul | Amateur photograph</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/mainpage.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Paul</h1>
        <h2>Amateur Photograph</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>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 using 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/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
        <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
        <p>&copy; 2014 Paul Moreau-gaudry.</p>
      </footer>
    </div>
 </body>
</html>

CSS

mainpage.css

body {
  background-color: orange;
}

Thank you in advance.

Regards,

Paul

10 Answers

Taras Metelskii
seal-mask
.a{fill-rule:evenodd;}techdegree
Taras Metelskii
Front End Web Development Techdegree Student 9,028 Points
Taras Metelskii
.a{fill-rule:evenodd;}techdegree
Taras Metelskii
Front End Web Development Techdegree Student 9,028 Points

I don't see html head body tags in your index.html, i think css rule to body can't change something not available. Add this tags and all be working.

Jonathon Lumpkin
Jonathon Lumpkin
3,806 Points
Jonathon Lumpkin
Jonathon Lumpkin
3,806 Points

Forgive me if I'm missing something, but did you intend to leave the body element out of your HTML?

Paul MOREAU-GAUDRY
Paul MOREAU-GAUDRY
2,069 Points
Paul MOREAU-GAUDRY
Paul MOREAU-GAUDRY
2,069 Points

Dear Taras,

Thanks for your fast reply. I actually have the body tags in the file. I do not know why when I paste it here it did not show. Here the full index.html file:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Paul | Amateur photograph</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/mainpage.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Paul</h1> <h2>Amateur Photograph</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>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 using 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/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a> <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a> <p>© 2014 Paul Moreau-gaudry.</p> </footer> </div> </body> </html>

Paul MOREAU-GAUDRY
Paul MOREAU-GAUDRY
2,069 Points
Paul MOREAU-GAUDRY
Paul MOREAU-GAUDRY
2,069 Points

well i pasted it again and the body tag does not seem to appear but it is on my workspace console.

Taras Metelskii
seal-mask
.a{fill-rule:evenodd;}techdegree
Taras Metelskii
Front End Web Development Techdegree Student 9,028 Points
Taras Metelskii
.a{fill-rule:evenodd;}techdegree
Taras Metelskii
Front End Web Development Techdegree Student 9,028 Points

i thiink there is maybe few problems:

  1. Check your css title.
  2. Do you have html tag?
  3. Do you have head tag?
  4. Try to add some rules to link elements.
Paul MOREAU-GAUDRY
Paul MOREAU-GAUDRY
2,069 Points

I do have the html tag and head tag. But I dont know for why it does not appear when I paste it in the forum. The name of the file is also correct.

Taras Metelskii
seal-mask
.a{fill-rule:evenodd;}techdegree
Taras Metelskii
Front End Web Development Techdegree Student 9,028 Points
Taras Metelskii
.a{fill-rule:evenodd;}techdegree
Taras Metelskii
Front End Web Development Techdegree Student 9,028 Points

try to add type attribute link rel="stylesheet" type="text/css" href="normalize.css"

Paul MOREAU-GAUDRY
Paul MOREAU-GAUDRY
2,069 Points
Paul MOREAU-GAUDRY
Paul MOREAU-GAUDRY
2,069 Points 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Paul | Amateur photograph</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/mainpage.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Paul</h1>
        <h2>Amateur Photograph</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>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 using 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/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
        <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
        <p>&copy; 2014 Paul Moreau-gaudry.</p>
      </footer>
    </div>
 </body>
</html>
kimberly Liu
kimberly Liu
5,316 Points

I am unable to view your css file as you've provided one element that you are styling...if there is more coding in that css file, perhaps you should make sure if body is styled/called more than once and if you may have overriden some of "background-color" styling with other body styling codes...

maybe that helps?

Paul MOREAU-GAUDRY
Paul MOREAU-GAUDRY
2,069 Points
Paul MOREAU-GAUDRY
Paul MOREAU-GAUDRY
2,069 Points

Dear Kimberly,

Thank you for your answer. I have only one code in my css file. I am trying to do the background color change to orange as suggested in the video lecture.

body {
  background-color: orange;
}
kimberly Liu
kimberly Liu
5,316 Points

I can't find a bug in your html nor css files... this may seem obvious, but have you tried refreshing your preview page...I see that you're using the giving images...in your preview, are you looking for just the orange colored background as you've tested is your css file or are you expecting to see what is shown in the example in the video (with the gallery image, etc.)?...if so, make sure the image files are in the images folder... And also make sure your css file is in the css folder, while the html file stands alone (not in a folder)....hope that helps...

Gina Scalpone
Gina Scalpone
21,330 Points
Gina Scalpone
Gina Scalpone
21,330 Points

The problem doesn't seem to be with your code, as I ran it without a problem. Is mainpage.css in the css folder?

Paul MOREAU-GAUDRY
Paul MOREAU-GAUDRY
2,069 Points
Paul MOREAU-GAUDRY
Paul MOREAU-GAUDRY
2,069 Points

Yes my mainpage.css is in the CSS folder. And i did saved and refreshed the page. I think I will send an email to support. This is maybe linked to the console. I hope they will fix it as I really want to continue this course.

Thank you

Paul