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

Watch Video

Posted June 7, 2015 7:56pm by

Connection of CSS to HTML

I think, that CSS which I joined to HTML by writing

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

was not connected well because I have not seen ANY change not even those which Nick had. Is this command well written ? Or how can I correct it ?

Thank you

Jan

8 Answers

June 8, 2015 2:34am

I would check to make sure your html file and the css folder are in the same master folder. If not, then your path is incorrect. Is your CSS file called normalize.css? I bet not, because that is a special set of CSS that is often called to make all browsers start at the same level of styling. The most likely paths are:

(styleSheetName).css = where the style sheet is in the same folder as the html

css/(styleSheetName).css = where the html and css folder are in the same folder

../css/(styleSheetName).css = where the folder containing the css and the folder containing the html are different but in the same master folder

../(styleSheetName).css = when the css file is one level up in the folder scheme.

June 8, 2015 5:34am

I have found the reason why it didn't work.

My folder's name is "CSS" capital. I really didn't know that it can have some effect on it.

So yes It was because a wrong path. Thank you

Once again thanks to all people who helped me here :)

Jan

June 8, 2015 5:38am

Glad to hear you figured it out! Both HTML and CSS are case-sensitive languages (as are many others), but it's easy to make these kinds of mistakes. (Seriously, I've spent loads of time on code thinking, "WHY ISN'T THIS WORKING?!" only to realize the next day it was because of a spelling or capitalization error, lol.)

June 7, 2015 8:13pm

Check if you spelled everything right. Maybe you misslicked a character. Check to see if the file is in the right directory. It will be nice if you could include your code :)

June 7, 2015 8:20pm

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title> Jan Francirek|CEO </title>
    <link rel="stylesheet" href="css/normalize.css">
  </head>
  <body>
    <header>
      <a href="index.html">
       <h1>Jan Francirek</h1>
       <h2>CEO at Innovare s.r.o.</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/numbers-01.jpg">
          <img src="img/numbers-01.jpg" alt="">
          <p>Some text. </p>
        </a>
       </li>
       <li>
        <a href="img/numbers-02.jpg">
          <img src="img/numbers-02.jpg" alt="">
          <p>Some text2 </p>
        </a>
       </li>
       <li>
        <a href="img/numbers-06.jpg">
          <img src="img/numbers-06.jpg" alt="">
          <p>Some text3. </p>
        </a>
       </li>
       <li>
        <a href="img/numbers-09.jpg">
          <img src="img/numbers-09.jpg" alt="">
          <p>Meow. </p>
        </a>
       </li>
       <li>
        <a href="img/numbers-12.jpg">
          <img src="img/numbers-12.jpg" alt="">
          <p>Some text4. </p>
        </a>
       </li>
     </ul>
    </section>
    <footer>       
     <a href=http://twitter.com/janfrancirek alt=""> 
       <img src="img/twitter-wrap.png" alt="Twitter Logo">
     </a>  
     <a href=http://facebook.com/jan.francirek.1996 alt=""> 
       <img src="img/facebook-wrap.png" alt="Facebook Logo">
     </a>
      <p>Enjoy...</p>
      <p>&copy;Jan Francírek 2015</p>
    </footer>
  </body>
</html>

June 7, 2015 8:22pm

If that is your final code, you're still missing the type="text/css". Add it and try again.

June 7, 2015 8:29pm

I have tried that and It did not work. :(

June 7, 2015 8:31pm

Btw Nick in that Video didn´t do it. Or I didnt catch it

June 7, 2015 8:13pm

Is the path to your CSS file written correctly?

June 7, 2015 8:42pm

Jan, I also noticed that you don't have opening and closing <head> tag or <body> tags. Check that the structure of your document is correct.

The global structure of an HTML document http://www.w3.org/TR/html401/struct/global.html

June 7, 2015 8:47pm

I have noticed that as well but If you look at Niks video he does not have that neither.

<meta <link

I dont understand this

June 7, 2015 11:21pm

I've fixed your code so that it appears how it was written. He does, in fact, have those tags, but because he forgot to use the proper forum markup, it appeared as if he didn't.

June 8, 2015 5:34am

Thank you Ryan.

June 7, 2015 8:44pm

only write css/normalise.css if your css file is called normalise.css and is contained in a folder called "css" that is within the same folder as the html document you are editing

June 11, 2015 5:25am

Check your file name, including the case as it is case sensitive. Normialize.css is a special css file. I doubt your css file is named that.

June 11, 2015 5:27am

I messed up and my link rel was "sylesheet". Attention to detail. "stylesheet" cleared it right up. Thank you, Ted! Great community we have here.

June 7, 2015 7:59pm

I believe you forgot the type. Try using

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

June 7, 2015 8:08pm

Thank you but Nick did not write that and it worked for him. How is that possible?

June 7, 2015 8:08pm

Hmm. It's best practice to always write it. Maybe it's editing mistake they made. Does it work for you now?

June 7, 2015 8:11pm

Suddenly no. It is still same :/ Can there be a problem with that normalize.css ? Well, I have downloaded it from Treehouse so It should be fine. No clue why that doesn´t work.

June 7, 2015 11:28pm

The structure of your document needs some attention. Look under the Create the Content Containers video for help. Your webpage cannot be read and rendered properly by the browser if you do not have head and body tags.

Your browser needs to know that there's an external style sheet, which goes into the head section of a document. Right now, there is no head section, because there is no opening/closing head tag and no body tag, so it's not looking for the meta information that it needs.

You may also have to change the path to your css file, but that depends on how it's organized relative to your index.html file.

June 7, 2015 11:30pm

Hi, Allison. He actually did have proper head and body tags, but the forum stripped them because he didn't use the proper markup to display code.

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Jan Francírek

Jan Francírek

Connection of CSS to HTML

8 Answers

Ted Sumner

Ted Sumner

Jan Francírek

Jan Francírek

Ryan Field

Ryan Field

Kristian Terziev

Kristian Terziev

Jan Francírek

Jan Francírek

Kristian Terziev

Kristian Terziev

Jan Francírek

Jan Francírek

Jan Francírek

Jan Francírek

Allison Walker

Allison Walker

Allison Walker

Allison Walker

Jan Francírek

Jan Francírek

Ryan Field

Ryan Field

Jan Francírek

Jan Francírek

Nicholas von Pentz

Nicholas von Pentz

Ted Sumner

Ted Sumner

Dylan Scandalios

Dylan Scandalios

Kristian Terziev

Kristian Terziev

Jan Francírek

Jan Francírek

Kristian Terziev

Kristian Terziev

Jan Francírek

Jan Francírek

Allison Walker

Allison Walker

Ryan Field

Ryan Field