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 How to Make a Website CSS: Cascading Style Sheets Use ID Selectors

damirdautovic
damirdautovic
746 Points

I believe i'm having a path error, I think my code is correct but not understanding fully how the paths go.

My code is <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Frank Blog | Contruction</title> <link rel="stylesheet" href="Development/normalize.css"> <link rel="stylesheet" href="Development/main.css"> </head>

I am using sublime text 2 to edit my website. I have a folder called Development, in that folder I have the sublime text which is "this is my first web page" I have the normalize.css file and the main.css file

screenshot http://imgur.com/6OS3HyK

3 Answers

John Gasior
John Gasior
7,811 Points

Because your css pages (normalize.css and main.css) are actually in the same directory (folder) as your html pages, the "Development" part of the path is not needed.

In your HTML link tags, for the href attribute you would put: "normalize.css" for the first tag, and "main.css" as the value of the href in the second tag. Like this:

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

This is telling the browser, "In the same directory this html file is located, include "normalize.css" and "main.css".

What you had before was telling the browser "In the same directory this html file is located, find the directory "Development" and include "normalize.css" and "main.css" from that directory. But you that would mean the file path would like "Development>Development>normalize.css"!

Let's say you have a file tree that looks like this:

+---Animals
|   |   myfile.html
|   |
|   +---Mammals
|   |       cat.jpg
|   |       cow.jpg
|   |       monkey.jpg
|   |
|   \---Reptiles
|           alligator.jpg
|           lizard.jpg
|
+---Plants
|   \---Vegetables
|           lettuce.jpg
|
\---Unknown
        platypus.jpg

Let's say we're putting in img tags with paths in the src attributes in "myfile.html".

When you specify just a file name in the path, it is telling the browser to look in the same directory:

<img src="jellyfish.jpg">

If you add some text and then a slash, it is telling the browser to find a child of the current directory, and look in there:

<img src="Mammals/cat.jpg">

If you add two dots and then continue the path, it will tell the browser to go up a directory, and then across (and sometimes down):

<img src="../Plants/Vegetables/lettuce.jpg">

If you add a forward slash at the beginning of the path, it will tell the browser to begin at the root of the site. This is a bit more advanced and less often used:

<img src="/Unknown/platypus.jpg">

Hope this helps.

damirdautovic
damirdautovic
746 Points

This helped somewhat, i'm still trying to figure it out. do I put the CSS folder into the main folder titled index? or is it two separate folders.

[img]http://i.imgur.com/kvF8QXN.png?1[/img]

Khaleel Hamid
Khaleel Hamid
5,258 Points

Basically you have a folder, lets saw firstWebPage, in there you have your HTML, then you create folders for css and imgs were you put your css and images, thats all.

firstWebPage folder: index.html css folder: main.css normalize.css image folder: image.jpg

You don't have to put the name folder at the end its just letting you know those are folders.

John Gasior
John Gasior
7,811 Points

To illustrate what Khaleel said here's an image:

Link to imgur

"index.html" is what you name the HTML file of your home page. This tells the browser that this is the main page of the website, and to load this first if no page is specified. The page you see when you type in "google.com" is their "index.html" page. Otherwise, if they named it something like "home.html", you would need to navigate to "http://google.com/home.html" to see the same page.

damirdautovic
damirdautovic
746 Points

Hey guys! thx so much for the feedback and information! I really do appreciate it! this has thought me a think or two and makes more sense! I really liked the visual aspect of your answer. thx!

Wayne Priestley
Wayne Priestley
19,579 Points

Hi,

Your file that contains your html should be called index.html, its good peactice to put your css files in a folder called css.
Your file path would then be

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

Your file and folder structure should look something like this

index.html
css folder / main.css normalize.css
img folder / image1.jpg image2.jpg image3.jpg
icon folder / icon1.svg icon2.svg icon3.svg
js folder / main.js

damirdautovic
damirdautovic
746 Points

I've done what you've said and still am not seeing any changes.

Khaleel Hamid
Khaleel Hamid
5,258 Points

You don't need to call development since your css and html both are in there

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

This should work.

As Wayne said make separate folders, except for your html files and store your stuff in there and then use the path like css/main.css