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
Chris Weall
1,263 PointsHTML is not applying the CSS when viewed in browser (safari)
Hi, I've downloaded the project files (the HTML file and the CSS file) and saved them both in the same location on my mac's hard drive.
I'm not using a CSS folder yet, so the route to the css file in the HTML file is simply 'style.css'.
When i load the html file into the browser i simply get the html content. It's not applying the css file. I've tried downloading and saving to different locations, creating a CSS folder, saving the style.css file to that, and updating the href link in the html to css/style.css but nothing seems to work.
Any ideas on what I'm doing wrong please?
10 Answers
John Sanchez
3,325 PointsCan I see the code that you are using to link it?
Chris Weall
1,263 Points<head>
<title>Classes and IDs</title>
<link rel="stylesheet" href="style.css">
</head>
i'm using this where i've got the html file and css file saved in the same location. thanks
Richmond Lauman
28,793 Pointsin the link element add the attribute and value :
type="text/css"
holdicon
Front End Web Development Techdegree Student 12,972 Pointsif you are using sublime text hover your mouse over tab with file that is titled "style.css" it should show you the FULL file path which usually contains your home folder or user name
Chris Weall
1,263 PointsThanks Richmond, I've added in thus:
<head>
<title>Classes and IDs</title>
<link rel="stylesheet" type="text/css" href="style2.css">
</head>
I've saved and refreshed but didn't make any difference.
Holdensteinberg. Yes, i'm using sublime text and this showed me the path as per your tip.
~/Desktop/style2.css
I've tried using this path but it still doesn't apply.
holdicon
Front End Web Development Techdegree Student 12,972 Pointsdon't put in the ~
Chris Weall
1,263 PointsYes, still no joy.
Ladna Meke
5,752 PointsSo I'm assuming both HTML and CSS are in the Desktop, try moving them to a folder instead. Also, I noticed the CSS in the path is "style2.css" but the CSS in your post is "style.css"
Chris Weall
1,263 PointsLadna, thanks for your suggestion. I've moved both files to a different folder and updated the href link accordingly, but it's made no difference.
Re , i created another version and saved as style2, but also changed the href link to reflect that too.
Chris
Chris Weall
1,263 PointsThanks for everyones suggestions so far but I've still not resolved the issue so if anyone else has any suggestions, please put them forward.
Just to add, i'm using Chrome and having looked at the developer tool, the 'sources' show the correct html and css files being pulled.
I'm also using sublime text 3.
Wayne Priestley
19,579 PointsHi Chris,
Can you give us some information on your file structure please, for example:
Desktop folder, in this folder.
Index.html file.
css folder/ styles.css, main.css, normalize.css
Img folder/ img1.png, img2.png, img3.png
If your file structure is something like this then your link to your css file would be href="css/styles.css" replacing the styles.css with main or normalize.css when linking those style sheets.
Chris Weall
1,263 PointsAll, Thanks for your help.
With a fresh pair of eyes on this part of the course this morning, i've found the issue and it's now working.
Basically, I hadn't labelled the classes correctly in the html. (I give an alternative meaning to 'Div' :-)
Thanks again folks.
Chris