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
Johnny Whitfield
14,024 PointsLinks to stylesheets not working. Please help.
I just completed the first section of the CSS foundations course and have the index.html file linking to the style.css stylesheet exactly like Guil has his. Mine is not showing the styling though.
When I click view it is just the html that displays on the page. I refresh the browser after saving the files in the workspace and it still doesn't change.
Does it have to do with the location of the files? I just got a Mac and am learning how to use it, so if that is the problem, could you guide me through the solution?
5 Answers
Samuel Webb
25,370 PointsUnless you spelled something incorrectly, when I usually see this issue its because the 2 files you're trying to link are in separate directories(files) and you're not properly navigating to where the CSS file is located. Let's say you have a folder called website. And in that folder you have index.html and a CSS folder. In that CSS folder you have style.css. When linking style.css to your *index.html you need to navigate to the CSS folder like this:
<link rel="stylesheet" href="CSS/style.css">
Remember, capitalization matters. If your folder or filename has capitalized letters, make sure your code matches.
Kevin Lozandier
Courses Plus Student 53,747 PointsHi, Johnny:
Can you copy and paste your code surrounded by 3 backticks ("`") and the first set of backtickse annotated with css?
You should have code similar to the following:
<link rel="stylesheet" href="foo.css" />
Kevin Lozandier
Courses Plus Student 53,747 PointsMake sure to evaluate where your html document is relative to the stylesheets you want to hook up to it; it may be necessary to go up a tree href="../css/foo.css" instead of traverse down href="./css/foo.css" or"css/foo.css"`.
If necessary, you can try to use an absolute path to the css file (based on the generated link to the html page) to verify whether or not the location you think the css file is located can be found by the browser http://www.example.com/css/foo.css.
Jack Blankenship
Full Stack JavaScript Techdegree Graduate 39,036 PointsThere are a few things that could be wrong. Is your css file in the same location that the html is looking for it? Mine are in a subdirectory named css relative to where the index.html is and the stylesheet line looks like this.
<link rel="stylesheet" type="text/css" href="css/main.css">
Is anything misspelled in your link statement or are there mismatches between the html and css as in defining a <div class="main"> but referencing it as #main {} in your css.
Samuel Webb
25,370 PointsThe type attribute isn't necessary anymore. All you need now are the rel and href attributes.
Kevin Lozandier
Courses Plus Student 53,747 PointsWith HTML5, type="text/css" is unnecessary; similarly, the script tag no longer needs the type attribute as well.
Johnny Whitfield
14,024 PointsThanks Kevin, Samuel and Jack!
My code:
<head>
<title>Adding CSS</title>
<link rel="stylesheet" href="css/style.css">
<style type="text/css">
@import 'css/more-styles.css';
</style>
I have the files in a folder on my desktop titled "css foundations" with the css folder containing the style.css file. I did capitalize the folder, so I will try that fix now.
Johnny Whitfield
14,024 PointsThat was it! It was the capitalization. Thank y'all so much! Now I know how important that is - just like in grammar school.
Samuel Webb
25,370 PointsGlad to help.
Kevin Lozandier
Courses Plus Student 53,747 PointsAwesome, have fun with the rest of the course.
Kevin Lozandier
Courses Plus Student 53,747 PointsKevin Lozandier
Courses Plus Student 53,747 PointsGood point, however it's best practice to never capitalize the letters of folders and file names for content intended for web consumption (and white-space should be avoided as well).
Samuel Webb
25,370 PointsSamuel Webb
25,370 PointsUsually I wouldn't capitalize folder names but since I kept capitalizing css in the write-up, I wanted to make sure it was understood that if someone were to capitalize something in their file structure, make sure its reflected in their code.