Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

William Goff
William Goff
2,155 Points

Normalize.css link wont connect to my stylesheet

The video states to unzip the normalize.css file from the "project files" associated with the class. I did so with WinRar and dragged the unzipped normalize.css file into the drag/drop field to upload it.....and it wouldn't upload, even after a few hours. SO. I went online to get the newest normalize.css file, copied and pasted it into a new file that I created in workspaces that I entitled "normalize.css". From there, I drug that file into my css folder in workspaces and thought that it would work. The link in my html looks like: <link rel="stylesheet" href="css/normalize.css"> which is exactly what the video states to type. Neither way is working for me because when I preview my website it hasn't stripped away any of the bullet points or changed any of the default browser settings as far as I can tell. In the video however, the font has changed and the bullet points are gone. I'm not sure if the new file has changed some things or if something is just wrong all together. Any help is appreciated!

William Goff
William Goff
2,155 Points

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

This is a link to the video. And the normalize.css file to upload to workspaces is in the downloads at the bottom.

https://necolas.github.io/normalize.css/

However, this is the link to the normalize.css file that I copied and pasted into the document I created and nested in my css folder in workspaces.

2 Answers

Kevin Korte
Kevin Korte
28,135 Points

Normalize no longer removes bullet points. It just smooths out many inconsistencies in padding and margins with different elements. In earlier versions of normalize, it did however remove bulltet points, so you may be seeing that in a video, but as far as I remember they were using V1 of normaalize, when it was more verbose.

The best way to check this is to use your browsers inspector tool, reload your page, and look in the network section, where it will show every asset it loaded. Normalize will be there. If it got a 200 OK, you know normalize was included. Otherwise, it will show the file was not found, and than you'll have to check your link path again.

Hope that helps.

William Goff
William Goff
2,155 Points

I'll definitely go check it out. Thanks for the help!

Simon Coates
Simon Coates
28,693 Points

William, if you post a snapshot of your workspace, it would take about a minute for me to check if normalize.css is included.

William Goff
William Goff
2,155 Points

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Will Goff | Photographer</title> <link rel"stylesheet" href="css/normalize.css"> </head> <body> <header> <a href="index.html"> <h1>Will Goff</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/bike.jpg"> <img src="img/bike.jpg" alt=""> <p>blur of a bike rider in front of store</p> </a> </li> <li> <a href="img/converse.jpg"> <img src="img/converse.jpg" alt=""> <p>an old shoe that reminds me of my childhood</p> </a> </li> <li> <a href="img/fence.jpg"> <img src="img/fence.jpg" alt=""> <p>the tip of a regal fencepost</p> </a> </li> <li> <a href="img/flower.jpg"> <img src="img/flower.jpg" alt=""> <p>central radius firework burst</p> </a> </li> <li> <a href="img/sunset.jpg"> <img src="img/sunset.jpg" alt=""> <p>a serene sunset overlooking a city horizon</p> </a> </li> </ul> </section> <footer> <p>© Will Goff 2016.</p> </footer>

</body> </html>

was having trouble posting the screenshot of my laptop but this is all of the text inside of my html document

Simon Coates
Simon Coates
28,693 Points

Kevin's suggestion works. If you can access the chrome developer tools, reload that page, then normalize should be listed in the network tab (it may require refreshing the page with the network tab open). If listed with a 200 or a 304 status code, you're fine.

Workspaces has a snapshot feature. At the top right corner, there's a camera icon. If you take a snapshot, you can post the URL to the snapshot so people can create a duplicate of your workspace for debugging.

William Goff
William Goff
2,155 Points

Status code under Network section says: 200 OK so I think we're good. Thanks for all the help!

Simon Coates
Simon Coates
28,693 Points

you want want to post a URL to the video, so people know what this is about. I'm not sure normalize.css is meant to strip away bullet points. I took a look inside normalize.css at github and i couldn't see any styles related to li, ul, or ol elements. (the effects of normalize are probably subtle - my first thought was to confirm what you were thinking of related to normalize.css and not some other stylesheet)