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
Sean Flanagan
33,235 PointsProblem with style.css
Hi.
I copied the style.css syntax exactly as Guil Hernandez instructed but all I get is a white screen saying
"Index of /
css/"
Here's my index.html syntax:
<!DOCTYPE html>
<html>
<head>
<title>Lake Tahoe</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<span>Journey through the Sierra Nevada Mountains</span>
<h1>Lake Tahoe, California</h1>
</header>
<p>
Lake Tahoe is one of the most breathtaking attractions located in California. It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions. Snow and skiing are a significant part of the area's reputation.
</p>
<a href="#">Find out more</a>
</body>
</html>
Next, my style.css syntax:
body {
text-align: center;
}
h1 {
font-size: 72px;
color: white;
}
header {
background-color: orange;
}
p {
font-size: 20px;
}
I'd appreciate any help.
Thanks
Sean :-)
7 Answers
Ted Sumner
Courses Plus Student 17,967 PointsYour problem is that the html file is in the css folder. Move it up one level.
Sean Flanagan
33,235 PointsHi Theodore.
So ../ moves up one folder and / moves down one folder? Have I got that right? I don't have any trouble with absolute paths but relative paths have taken longer for me to understand. So you're right, I still need to work on relative paths.
As for your previous post, I pulled my index.html file out of the folder and then previewed the page and hey presto, it worked! Silly me, fancy putting an html file in a css folder!
I'll remember this for the future.
Thank you Theodore :-)
Sean
Ted Sumner
Courses Plus Student 17,967 PointsYou understand my post correctly. Please marked this answered.
Sean Ford
9,581 PointsHello, is your style.css file in a folder called css? If your code is to work, the directory that contains your index.html file should also contain a seperate folder called "css" which will hold your style.css file.
Ted Sumner
Courses Plus Student 17,967 PointsCheck the path as to where you put the css file. It should be in a folder called css located in the same folder as the html file.
Sean Flanagan
33,235 PointsHi Theodore. Thanks for your quick reply.
As I said to Sean, I created a file called style.css but now it's inexplicably gone. Maybe I should watch the video again and see where I screwed up.
Thank you Theodore :-)
Sean
Sean Flanagan
33,235 PointsHi Sean. Thanks for your prompt reply. :-)
For some reason the style.css file seems to have vanished altogether, even though I did create a new file and name it style.css. And I put it in the css folder.
Sean Ford
9,581 PointsYikes, missing files can definitely be a problem! Good luck moving forward!
Sean Flanagan
33,235 PointsThanks :-)
Sean Flanagan
33,235 PointsI've run the video again. I've followed Guil Hernandez's instructions to the letter. And I checked that both index.html and style.css were in the css folder. Still nothing.
Here's my index.html:
<!DOCTYPE html>
<html>
<head>
<title>Lake Tahoe</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<span>Journey through the Sierra Nevada Mountains</span>
<h1>Lake Tahoe, California</h1>
</header>
<p>
Lake Tahoe is one of the most breathtaking attractions located in California. It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions. Snow and skiing are a significant part of the area's reputation.
</p>
<a href="#">Find out more</a>
</body>
</html>
And now my style.css:
body {
text-align: center;
}
h1 {
font-size: 72px;
color: white;
}
header {
background-color: orange;
}
p {
font-size: 20px;
}
And it still won't work in the browser. I've downloaded the project files so I might use them instead.
Thanks.
Sean
Ted Sumner
Courses Plus Student 17,967 PointsTed Sumner
Courses Plus Student 17,967 PointsYour problem is in understanding relative paths. The starting point is always the location of the file you are coding in. You have to add ../ to move up one folder. You add /css to move from the current folder to the folder named css in the folder containing your file. If both the html and css files are in the same folder, the path is just the file name without the /css.
Justo Montoya
3,799 PointsJusto Montoya
3,799 Pointshey I'm having a similar problem. I've tried the same thing but I still can't get the html file with the applied stylesheet.
Ted Sumner
Courses Plus Student 17,967 PointsTed Sumner
Courses Plus Student 17,967 PointsJusto,
Please create a new post with a fork snapshot. Go to your workspace and click the camera icon in the upper right corner. Create and open the snapshot and paste the url in the new post regarding this problem. Then put my name in the post in [] and paste the url to my profile in () with no space between the ] and (. That will notify me that the post is there and I will take a look.
A white screen with a file tree always means that the index.html or index.php is missing. It is either in the wrong folder or it is not all lower case. This is case sensitive. If you look and see one of these issues, there is no need to create the new post.