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

Rwanda Muhammad
seal-mask
.a{fill-rule:evenodd;}techdegree
Rwanda Muhammad
Full Stack JavaScript Techdegree Student 4,116 Points

my 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">

no, I took another look. I have no idea what's wrong. Sorry, wish I could have been more help

12 Answers

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi 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! :sparkles:

Rwanda Muhammad
seal-mask
.a{fill-rule:evenodd;}techdegree
Rwanda Muhammad
Full Stack JavaScript Techdegree Student 4,116 Points

I 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.

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Rwanda 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
Egle Dijokaite
2,735 Points

Thank 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
seal-mask
.a{fill-rule:evenodd;}techdegree
Rwanda Muhammad
Full Stack JavaScript Techdegree Student 4,116 Points

Sorry 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 : )

The usual suspects would be, did you save it? (both index AND main.css) is workspace just being buggy?

I 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
seal-mask
.a{fill-rule:evenodd;}techdegree
Rwanda Muhammad
Full Stack JavaScript Techdegree Student 4,116 Points

I 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.

if the css folder is named CSS, maybe try naming it css. cause that's how it it typed in the html

I'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

Ok, that's good... is the css file IN the css folder? cause I've done that before. put the file in the wrong place

The 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
seal-mask
.a{fill-rule:evenodd;}techdegree
Rwanda Muhammad
Full Stack JavaScript Techdegree Student 4,116 Points

I 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.

  • 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
Joe Consterdine
13,965 Points

There'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.

I'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
Joe Consterdine
13,965 Points

Rwanda you need to delete the normalize.css folder. Do that first.