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 Sakar Michel
Sakar Michel
568 Points

Web development. Linking normalize.css to index.html problem.

Dear Teamtreehouse members

I am on the Web Design Track; How To Make a Website; Creating HTML Content; Include External CSS Video. There are some inconsistencies with the "normalize.css" file. When Nick Pettit links the normalize.css file to his html file saves it and click preview, the changes takes affect. When I link the "normalize.css" to the html file and click preview the change do not take affect, even after I reload the page several times. My html code is exactly identical to Nick html code. Can you please assists me with this matter so I can move on? Thank You

Sinceraly

Sakar Michel

6 Answers

kevin jordan
kevin jordan
11,353 Points
kevin jordan
kevin jordan
11,353 Points

Sakar -

If you want to post your code - I'm sure we can help you out.

Normally in cases such as those you described, the problem is related to the path that you are defining in your html link tag. Double check the location of your css folder and make sure your path is correct.

Hope this helps and if not post your code and we'll take a look ! Best.

Sakar Michel
Sakar Michel
568 Points
Sakar Michel
Sakar Michel
568 Points

Good Afternoon Kevin.

I double check my code as requested and click on the preview button, to find out to my surprise, that some of the changes took affect. However, my website is still not identical to Nick's website. The bullet where remove when he link the index.html to the normalize.css file. The bullet points still remain for my website despite my code being exactly identical to Nick's. The code is post below: Thank You

Sinceraly

Sakar Michel.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sakar Michel | Designer</title>\
    <link rel="stylesheet" href="css/normalize.css">
  </head>
  <body>
    <header>
      <a href="index.html">
        <h1>Sakar Michel</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <u1>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </u1>
      </nav>
    </header>
    <section>
     <u1>
        <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 repetiton.</p>
         </a>   
       </li>
     </u1>
    </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 Sakar Michel.</p>
    </footer>
  </body>
</html>
kevin jordan
kevin jordan
11,353 Points
kevin jordan
kevin jordan
11,353 Points

Sakar - Thanks for posting up your code. It seems that all looks good here with you html link tag. However, you are only linking to the normalize.css which only takes care of resetting your browser, and does not apply any of the styling changes that you are making in your main.css - which is where you should be adding your styling.

I'm not positive what step you're on in the course, but you will need to link to your main.css file from within your HTML page. It should look something like this:

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

If you are making your styling changes in main.css (and you should be), then this will allow your HTML page to pick those changes up. Also note that you need to place this particular link tag underneath your original link tag which is linking to your normalize.css file - order is important in this case !

Let me know how it goes !

Sakar Michel
Sakar Michel
568 Points
Sakar Michel
Sakar Michel
568 Points

Good evening Kevin.

In the video title:Include External CSS. Nick Pettit link the index.html file to the normalize.css file. When he done this, the browser default style was reset and the bullet points where remove from the unorder list. Please click on the link below to watch the video for further understanding.

http://teamtreehouse.com/library/how-to-make-a-website/creating-html-content/include-external-css

Thank You.

Sinceraly

Sakar Michel

kevin jordan
kevin jordan
11,353 Points
kevin jordan
kevin jordan
11,353 Points

Sakar -

I guess my advice was predicated on you being a bit further along in the course than you in fact are - sorry about that ! Your html code does look fine. The only thing that I can think of is that there must be some problem in your normalize.css file, which could only result from an error in the download for some reason. Somehow that file is not correct and is leaving you stuck. I was really hoping to help you out. My apologies for leading you down any wrong paths I may have set you on ! To remove bullet points from the list elements it should be as simple as applying the text-decoration:none declaration to them - so hopefully you can check and make sure this is in fact in your normalize stylesheet.

Best of luck in finding your solution and remember that it's all a part of the process. Sometimes working through these little bugs can result in some great advancements in your learning.

Sakar Michel
Sakar Michel
568 Points
Sakar Michel
Sakar Michel
568 Points

Good Afternoon Kevin.

I been away from sometime due to college class. Apology accepted and Thank You for all your help so far. I have learned alot through this on going process. I am going to report the normalize.css file as bug and hopefully a teamtreehouse members will resolve this issue. I will keep you post on the results.

Sinceraly

Sakar Michel