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
Donald Richmond
13,807 PointsProblem with reading CSS pages
My browsers (Internet Explorer & Google Chrome) either cannot read or recognize the CSS webpages of the website created as a project for the Treehouse Introductory Webpage course! Their styling instructions are NOT being applied. They can read the .html pages. What gives??
12 Answers
David Tonge
Courses Plus Student 45,640 PointsYou're misreading what I said.
You have a typo in your code. It's suppose to be "rel" which stands for "relation" but you're using "ref". Also you're missing the type attribute which tells the document what type of file it is.
<link rel="stylesheet" type="text/css" href="yourcss.css">
Donald Richmond
13,807 Points<link ref="stylesheet" href="css/normalize.css"> <link href="http://fonts.googleapis.com/css?family=Changa+One:400,400italic" rel="stylesheet" type="text/css"> <link ref="stylesheet" href="css/main.css"> <link ref="stylesheet" href="css/responsive.css">
The directory structure is:
folder css file main (css document, .suffix is .css) file normalize (css document) file responsive (css document) folder img file about file contact file index
David Tonge
Courses Plus Student 45,640 PointsYou have a typo. It's "rel" not "ref".
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
Donald Richmond
13,807 PointsMissed one! The complete list:
<link ref="stylesheet" href="css/normalize.css"> <link href="http://fonts.googleapis.com/css?family=Changa+One:400,400italic" rel="stylesheet" type="text/css"> <link ref="stylesheet" href="css/main.css"> <link ref="stylesheet" href="css/responsive.css">
David Tonge
Courses Plus Student 45,640 PointsCan you elaborate more?
I ask this because browsers don't read CSS files; they just apply the styling to your html pages. If you open a CSS or JS file in the browser you're only going to see plain text.
Donald Richmond
13,807 PointsI have removed the webpages from Workspaces ENTIRELY and am trying to run them as a stand alone web site on the browsers. I am presuming the html pages will access the css pages to do their stuff--sort of like a program reading an external file.
Darren Joy
19,573 PointsThey should, but check that the path to the CSS file in your HTML document is pointing to wherever you are now storing the CSS file rather than what was presented in the course material...
David Tonge
Courses Plus Student 45,640 PointsYeah, they do access the CSS files but it depends on how your folder is set up. Could you paste the head section of your HTML file and describe how you have your folder set up?
Donald Richmond
13,807 Pointsthe CSS folder contains files main, normalize, and responsive. All are CSS documents with the .css suffix (which is present but not shown)
David Tonge
Courses Plus Student 45,640 PointsRefer to my answer above. There's a small typo in the way you link to your css.
Donald Richmond
13,807 Points<head> <! comment > <meta charset="utf-8"> <title>Designer's Name | Occupation</title> <link ref="stylesheet" href="css/normalize.css"> <link href="http://fonts.googleapis.com/css?family=Changa+One:400,400italic" ref="stylesheet" type="text/css"> <link ref="stylesheet" href="css/main.css"> <link ref="stylesheet" href="css/responsive.css"> <meta name="viewpoint" content="width=device-width, initial-scale=1.0"> </head>
Donald Richmond
13,807 PointsI cannot explain the 'rel' but they are NOT in my code! The above is what is truly there. I just checked and pasted it again! And, is the FONT link supposed to use single quotes? That is how it is on the Google.com/font website?
Donald Richmond
13,807 PointsThanks very much! That solved one problem and caused another! But such is my worry! Your help was appreciated!
David Tonge
Courses Plus Student 45,640 PointsNo prob.
Darren Joy
19,573 PointsDarren Joy
19,573 PointsProbably need more info to help you solve this.
From your question it appears you are not using WorkSpace but trying to open the pages as files with your browser?
Or are you previewing it in WorkSpace and it's opening because of that?