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

HTML How to Make a Website Creating HTML Content Include External CSS

Eric West
Eric West
218 Points

My page wont link to css

I am unable to link the my normalize.css page. Now all it shows on the website is

Index of

Images/ Index.html css/

I do not understand why it will not link the two together?

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

It would be helpful to see your code. There's a link at the bottom of this page to the markdown cheatsheet which will explain how to post it.

Eric West
Eric West
218 Points

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>English in 6 Months</title> <link rel="stylesheet" href="css/normalize.css">
</head> <body> <header> <a href="index.html"> <h1>English in 6 months</h1> <h2>Language Learning</h2> </a> <nav> <ul> <li><a href="index.html">Course Info</a></li> <li><a href="Contact.html">Contact</a></li> <li><a href="Log in.html">Log in</a></li>

    </ul>
  </nav>
</header>
<section>
  <ul>
    <li>
      <img src="Images/ENGLISH CONVERSATION CLUB PIC.png" alt="">
    </li>
  </ul>
</section>
<footer>
<p>&copy; 2016 Eric West.</p>
</footer>

</body> </html>

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Given that normalize.css is meant to remove browser specific defaults. What specific margin/padding error are you seeing that's not being corrected by the normalize? Or am I missing what you're asking entirely?

Eric West
Eric West
218 Points

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>English in 6 Months</title> <link rel="stylesheet" href="css/normalize.css">
</head> <body> <header> <a href="index.html"> <h1>English in 6 months</h1> </a> <nav> <ul> <li><a href="index.html">Course Info</a></li> <li><a href="contact.html">Contact</a></li> <li><a href="log in.html">Log in</a></li>

    </ul>
   </nav>
</header>
<section>
  <ul>
    <li>
      <img src="Images/ENGLISH CONVERSATION CLUB PIC.png" alt="">
    </li>
  </ul>
</section>
<footer>
<p>&copy; 2016 Eric West.</p>
</footer>

</body> </html>

4 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

What I can say with 100% certainty is that your html is missing the head element. Try this:

<head>
    <meta charset="utf-8">
    <title>English in 6 Months</title>
    <link rel="stylesheet" href="css/normalize.css">    
</head>

Also, try renaming your Index.html to index.html. Yes, these are case-sensitive. It may not understand what it's supposed to be loading by default.

Eric West
Eric West
218 Points

hmmmmm its not copying correctly for whatever reason. But i do have the <head> element and I corrected the capital letters. Still no correction

Gianmarco Mazzoran
Gianmarco Mazzoran
22,076 Points

Hi Eric,

as Jennifer said your missing some html tag.

be sure that the structure of your html file look like this:

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>English in 6 Months</title>
<link rel="stylesheet" href="css/normalize.css">    
</head>
<body>
<header>
  <a href="index.html">
    <h1>English in 6 months</h1>
  </a>
   <nav>
    <ul>
      <li><a href="index.html">Course Info</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="log in.html">Log in</a></li>

    </ul>
   </nav>
</header>
<section>
  <ul>
    <li>
      <img src="Images/ENGLISH CONVERSATION CLUB PIC.png" alt="">
    </li>
  </ul>
</section>
<footer>
<p>&copy; 2016 Eric West.</p>
</footer>
</body>
</html>

and that your normalize.css file is in the css folder.

<!DOCTYPE html>
<html>
<head>

<!-- meta -->
    <title></title>
<!-- links -->
<!-- script -->

</head>
<body>

<!-- header -->
<!-- content -->
<!-- footer -->

</body>
</html>
Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Good point, Moriah. I just sort of assumed Eric wasn't posting the entirety of the html document. There's the possibilty that you're also missing your DOCTYPE declaration and your html tags. Although, if you're seeing the index of page... it's still my opinion that your main page is not named what they want your main page named.

Ok it's not about your CSS. It's about what root directory you are trying to access your site. If you go to your index.html - you can see the image and the style. For example if you have root folder where you have to add your files, and you have placed in that root folder the entire ".www" folder or "public" folder (depends how you named it) - then your browser opens up in that root and then you see the folder. But instead you have to put your index.html as it is and not compiled in any folder. or you have created another index.html outside your site scope your path should be: http://port-80-d4bx4268r8.treehouse-app.com/Index.html and not http://port-80-d4bx4268r8.treehouse-app.com