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.

HTML

John Thompson
John Thompson
6,899 Points

Linking my HTML to normalize.css and grid.css

I'm doing the web design track and everything was going well until I got to the section where I link my html to the normalize and grid.css files. I had had some trouble getting my pictures to link, I had to change the file path so they would be found the in the folder on my desktop where they were saved. I tried doing the same with these .css files and I'm having no luck. I've double checked the code multiple times, I've copied and pasted it directly, I've downloaded a new normalize.css file in case the original was somehow corrupt, nothing is working and I'm at a standstill. I'm making all the adjustments to my HTML that utilize the grid.css formatting but none of them are showing up on the site. Help.

7 Answers

William Whitworth
William Whitworth
6,117 Points

Your project folder is the directory that contains your entire website...

So for example it could look something like this:

/my_website/ (Project Folder)
• index.html
• about.html
• contact.html
• css/
   - grid.css
   - normalize.css
   - main.css
• img/
   - logo.jpg
   - another_image.gif
• js/
   - jquery.js
   - a_jquery_plugin.js

To insert your various CSS:
<link rel="stylesheet" type="text/css" src="css/normalize.css">
<link rel="stylesheet" type="text/css" src="css/grid.css">
<link rel="stylesheet" type="text/css" src="css/main.css">

So to insert your img you'd do something like:
<img src="img/logo.jpg">

Your server already knows that /my_website/ is the "root directory" and will fill it in when you have src=""

What text-editor are you using? Some of them let you define the root directory which could also be the problem if it is wrong.

John Thompson
John Thompson
6,899 Points

Thank you William. I'm using Sublime. I usually use notepad++ but am getting acquainted with sublime bc that's what they're using in the videos. I fixed my linking problem, got my stylesheets to catch, but I still don't understand how to organize my project files appropriately. Right now I have two different folders on my desktop that I downloaded from Treehouse for each part of the project. The files are: websitewaters-island01-stage03 and websitewaters-island01-stage02. It confuses me because the stage three folder has new things in it but also has overlap from stage 2, like all the image files. My index.html is on my desktop and when i try moving it into a folder my website crashes. My server is NOT already knowing what the root directory is, likely because I don't have my files organized properly, because the only way I can get images or my css to link properly is to type the whole file path as such:

<link rel="stylesheet" href="websitewaters-island01-stage03/css/normalize.css" type="text/css" media="scren">
  <link rel="stylesheet" href="websitewaters-island01-stage03/css/grid.css" type="text/css" media="scren">

and the same for images:

<img src="websitewaters-island01-stage02/img/you-bake-me-blush.gif" alt="You-Bake-Me-Blush"/>

if i just put img/x or css/x it doesn't work.

I organize my projects this way

project_name -css --.normalize.css --grid.css --styles.css

-fonts --file.eot --file.svg --file.ttf --file.woff

-img --file.png --file.gif --file.svg --file.jpeg

-js --lib ---jquery.js ---libfile.js --myscripts.js // This is inside -js- but not -lib-

these files are inside project_name -index.html -about.html etc

William Whitworth
William Whitworth
6,117 Points

'''html Try doing something like this: • /treehouse_projects/

  • project_1/ • index.html • img/ • js/ • css/
  • project_2/ • index.html • img/ • js/ • css/
  • project_3/ • index.html • img/ • js/ • css/

'''

If you copy an asset from project 2 to project 1 (or vice-versa) make sure that you open the index file from project one and not the one from project 2 (or vice-versa). That will re-route your browser to the correct root directory.

In sublime text you open a new editor window and just drag the current working folder (i.e. project_1) into the sidebar. This will give you quick access to every file in that directory. Just a helpful hint.

Another option that can be a little more confusing but is important to learn as a web developer is how to properly format file paths.

Understand the differences between relative paths (src = img/image.jpg) and absolute paths (http://www.yoursite.com/img/image.jpg).

For relative paths you may want to move up from the current directory that you are in, in which case you would use a ../

For example if you want to link to a file from index.html in project_1 to a img in project_2 in my directory listing above you do something like:

This HTML would be in the project_1 folder....
<a href="../project_2/img/image.jpg">A cool image.</a>

A Guide to File Paths

Hopefully this is a little more clear, at least this is how I do it.

I had this problem with this as well, but I realized that some editors accept this:

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

. This works for Notepad++, which I use.

If you put the normalize.css file inside a folder called CSS in your project folder then in the index.html page add

<link rel="stylesheet" src="css/normalize.css">
<link rel="stylesheet" src="css/grid.css">

see this post here with the same issue see the codepen link i added

John Thompson
John Thompson
6,899 Points

Thanks. What is my project folder? I just downloaded the project files so on my desktop I had a folder called "websitewaters-island01-stage03" and inside of it was a css folder and inside of that were the normalize.css and grid.css. So i put the file path in as such:

<link rel="stylesheet" href="websitewaters-island01-stage03/css/normalize.css" type="text/css" media="scren">
  <link rel="stylesheet" href="websitewaters-island01-stage03/css/grid.css" type="text/css" media="scren">

This was how i got the pictures to work. originally I just put: img/you-bake-me-blush.gif (for example) and the browser did not find the pictures in my project folder until i added the folder name: websitewaters-island01-stage02/img/logo.gif" alt="Smells Like Bakin"/>

I understand why it worked for the pics, i don't understand why it isn't working for the css

Sorry for delay but ditto what William said.

John Thompson
John Thompson
6,899 Points

Okay so I had it working and then I decided to try and clean it up. I did some research and created a more organized project folder that looks like this:

C:/ website_waters // final_web /// about.html //// contact.html //// final.css //// img //// index.html //// source_files ///

I transferred all the image files from the original project download folders on my desktop into the img folder under my final_web. I transferred css files into final.css. I moved my index.html from my desktop into the final_web folder, and i placed it all on the C:// drive. Then i tried changing my image links just to the img/x without using the whole file path, hoping this would work since I had placed it on C:// drive. no luck. So then i tried typing in the whole file path, as I had done before, for both my CSS and images, nothing. I get text from the html but nothing is linking. I am clearly not understanding something here as this seems like it should work to me, and was working before I organized the files. This is what my code looks like now, reference it to my file structure above.

 <img src="website_waters/final_web/img/logo.gif" alt="Smells Like Bakin"/>
<link rel="stylesheet" href="website_waters/final_web/final.css/normalize.css" type="text/css" media="screen">
  <link rel="stylesheet" href="website_waters/final_web/final.css/grid.css" type="text/css" media="screen">
William Whitworth
William Whitworth
6,117 Points
final.css is not a directory so it would be impossible to do something like final.css/normalize.css

<link rel="stylesheet" href="website_waters/final_web/final.css/normalize.css" type="text/css" media="screen">
 <link rel="stylesheet" href="website_waters/final_web/final.css/grid.css" type="text/css" media="screen">
John Thompson
John Thompson
6,899 Points

Never mind, I added C:/ at the beginning of the file path and it worked. Still not sure why i need to be so specific and in the video they just put img/x and it works.

Mike Kohl
Mike Kohl
Courses Plus Student 6,793 Points

If I'm reading this correctly, It looks like you have the files "normalize.css" and "index.html" in the same folder ( directory ).

If that is the case, then you can remove the full path in the href. and just use href="normalize.css".

What I would do is, open the folder that has "index.html" and in that folder create a folder and name it "css". After you create the css folder; place the "normalize.css" in the css folder. Then you can use href="css/normalize.css".

Also, most important, make sure you are makeing changes to the corrrect index.html file. I remember times where I personally had two different versions of a program, the live version and the dev version. After making changes and nothing was working, I noticed I made changes to the wrong file

Finally, If all fells, you can download the project files and see how teamtreehouse did it. Follow the exact structure they have and it should work..

William Whitworth
William Whitworth
6,117 Points

Ugh it won't let me edit my last comment to fix formatting so here is the file structure I use again:

<!-- Treehouse Structure -->
/treehouse_projects/ (Project Folder)
 • project_1/
   - index.html
   - img/
   - js/
   - css/
 • project_2/
   - index.html
   - img/
   - js/
   - css/
 • project_3/
   - index.html
   - img/
   - js/
   - css/

Refer to my comment for the rest...