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
Rwanda Muhammad
Full Stack JavaScript Techdegree Student 4,116 Pointsmy main.css is not working with the index.html
this is how it looks, and the main.css is in the CSS FOLDER
<link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/main.css">
12 Answers
Jennifer Nordell
Treehouse TeacherHi there! I took the liberty of forking the workspace that's linked here and found a couple of strange things. First, and foremost you have the folder that contains CSS capitalized. If you look on the left side of the workspace you'll see a folder img and a folder named normalize.css inside your CSS folder. The folder named CSS should not be capitalized. This folder should be renamed to css. Files and paths are case-sensitive here. For example, these three would all be different folders completely: img, iMG, and Img.
And the links in your html file have the incorrect extensions. You've written:
<link rel="stylesheet" href="css/normalize.CSS">
<link rel="stylesheet" href="css/main.CSS">
But they should be:
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
Also, I get the distinct impression that you downloaded normalize.css as a zip file or archived file of some sort, and from what I can see had downloaded it to a Mac. The css file you need resides inside that archive. You need to extract it first and then place it directly in your newly renamed css folder.
Try making these changes and see if you don't get at least a slightly different result.
Hope this helps!
Rwanda Muhammad
Full Stack JavaScript Techdegree Student 4,116 PointsI downloaded the normalize.css zip file, I have windows 10, I thought i did it right (extracted all) name a folder , placed file in folder, but it looks funny, there is a page with a wheel inside the folder...somehow zip files are confusing to open to me on windows 10, but i do believe your right, I was following alone just fine until i downloaded the zip file, i tried to open it once more, same problem.
Rwanda Muhammad
Full Stack JavaScript Techdegree Student 4,116 PointsAfter unzipping normalize.css I opened it and looks to be encrypted.
Jennifer Nordell
Treehouse TeacherRwanda Muhammad my main concern at this point is from where you're downloading this file. Because when I go to the downloads section under the video it has a "Projects file" zip file that I can download. I am also using Windows 10 by the way. And the file linked there is named HowToMakeAWebsite-Stage4-Video2.zip. When I extract this into a folder of my choosing that folder will now have a new directory structure. And I then have a folder called css. Note that this is a folder and not another zip file. When I double click on the folder to open it there are two files. main.css and normalize.css. At this point I can upload normalize.css to workspaces. Note that normalize.css is not a compressed file. It's just plain text. Now the question is, which part of these steps differ from yours?
Egle Dijokaite
2,735 PointsThank you for this! Couldn't figure out why my css files don't work with index, but changing the folder name solved it :)
Rwanda Muhammad
Full Stack JavaScript Techdegree Student 4,116 PointsSorry getting back so late , thanks for the info, i realize my mistake, I had downloaded the normalize.css file at the bottom of page near the teachers notes, instead of clicking on downloads, finally found the HowToMakeAWebsite-Stage4-Video2.zip, It worked !!! Thx again : )
john larson
16,594 PointsThe usual suspects would be, did you save it? (both index AND main.css) is workspace just being buggy?
Rwanda Muhammad
Full Stack JavaScript Techdegree Student 4,116 PointsYes I made sure I saved it, still not working.
john larson
16,594 PointsI don't know if this matters, in your question you have css as CSS. Also you could try restarting workspaces. It gets weird sometimes
Rwanda Muhammad
Full Stack JavaScript Techdegree Student 4,116 PointsI did have trouble accessing the workspace earlier, so I logged out, and logged back in, it finally open. Still no connection with index.html and main.css in the CSS folder.
john larson
16,594 Pointsif the css folder is named CSS, maybe try naming it css. cause that's how it it typed in the html
Rwanda Muhammad
Full Stack JavaScript Techdegree Student 4,116 Pointsthe CSS folder is in CAPS, the file name is lower case. I guess i can try to make sure they both match.
Rwanda Muhammad
Full Stack JavaScript Techdegree Student 4,116 PointsSorry changing from lower case to upper case (main.CSS) did not work either.
john larson
16,594 PointsI've never done it, but there's a way built into workspaces to take a screenshot of you code. If you can figure out how to do that, I'd be happy to take a look
Rwanda Muhammad
Full Stack JavaScript Techdegree Student 4,116 PointsI also checked and made sure that the main.css is a file not a folder.
john larson
16,594 PointsOk, that's good... is the css file IN the css folder? cause I've done that before. put the file in the wrong place
Rwanda Muhammad
Full Stack JavaScript Techdegree Student 4,116 Pointsthis is the screen shot, hope this works
Rwanda Muhammad
Full Stack JavaScript Techdegree Student 4,116 PointsYes the main.css file, is in the CSS folder, did the Screenshot work, i sure hope so.
john larson
16,594 PointsThe screenshot worked, but it looks to me like main.css is in the normalize folder, and the normalize folder is inside the css folder.
Rwanda Muhammad
Full Stack JavaScript Techdegree Student 4,116 PointsI think thats just the way its listed, I deleted the normalize folder, and added the main.css file to the CSS folder, than place the normalize folder back in the CSS folder, still nothing, ...bummer...thanks for your help thou.
john larson
16,594 Points- I don't think you should have a normalize folder.
- normalize.css should be in the:
- css folder and
- main.css should be in the css folder
- only one css folder with two files in it
- main and normalize
Joe Consterdine
13,965 PointsThere's a few problems with this:
<link rel="stylesheet" href="css/normalize.CSS">
<link rel="stylesheet" href="css/main.CSS">
needs to be this:
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
NOTE: Remove the capital 'CSS' to normal case 'css'.
And then in workspaces:
your folder is called 'CSS'.
Again change this from capital letters to 'css'.
And the biggest problem is inside your css folder you have a FOLDER called 'normalize.css'. And inside this folder there's a FILE called 'normalize.css'.
You need to remove the FOLDER called 'Normalize.css' and put the 'normalize.css' file inside your css folder.
Rwanda Muhammad
Full Stack JavaScript Techdegree Student 4,116 Pointshere is the main.css screen
john larson
16,594 PointsI'm not exactly sure (I don't usually use workspaces) it kinda looks like you main.css might be inside your normalize folder. If that's the case, you would have to put something like css/normalize/main.css. That's kind of awkward and unnecessary for this project. If the css file IS in the normalize folder, it would be better to get it out and just put it in the css folder.
Joe Consterdine
13,965 PointsRwanda you need to delete the normalize.css folder. Do that first.
john larson
16,594 Pointsjohn larson
16,594 Pointsno, I took another look. I have no idea what's wrong. Sorry, wish I could have been more help