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
Leonie Koomen
2,560 PointsProblems with linking a CSS stylesheet in HTML
Hi,
In my first attempt to create my own website, I can't seem to get past the seemingly simple 'link your CSS stylesheet in HTML'.
This is how my HTML looks like so far:
<!DOCTYPE html>
<html>
<head>
<title>FinePoint Electrical</title>
<style>
<link rel="stylesheet" type="text/css" href="960_16_col.css">
<link rel="stylesheet" type="text/css" href="normalize.css"
<link rel="stylesheet" type="text/css" href="layout.css">
</style>
</head>
<body>
<h1>FinePoint Electrical</h1>
<p>For all your electrical solutions</p>
</body>
</html>
My CSS is not even worth posting. I've just tried to play around with colors, fonts and margins (with the body and h1 selector) but nothing changes when I open it in my browser. All the files that I'm using are in the same folder and I've tried using the whole path in HTML to the files. I've tried removing the 960 (grid system) and normalize.css files in HTML and used /> at the end of the links but that doesn't have any influence either. Not the great start I hoped it would be! Could someone help me out?
Thanks!
22 Answers
Moshe Vilner
Courses Plus Student 553 PointsSeems like you miss closing bracket (">" )of middle css link
Leonie Koomen
2,560 PointsIndeed I did, sharp! All that messing around trying to make it work doesn't make it any better. I put the closing bracket in place but it is still not working...
Moshe Vilner
Courses Plus Student 553 PointsTry to delete browser cache and try again. If you use chrome you have to: Tools->Clear Browsing Data. Alternately you simply could try in any other browser from one you use to view you html
Leonie Koomen
2,560 PointsI cleared my Chrome browsing data and used IE, still nothing. Appreciate your input Moshe!
Leonie Koomen
2,560 PointsDo you reckon I just need to start from scratch and hold back on using grids and normalize till I know what the heck I'm doing? I thought I would make it easier on myself by using a framework but it looks like that plan backfired...
Moshe Vilner
Courses Plus Student 553 PointsTo be sure the stylesheet file been loaded, right click the chrome and in the menu select "inspect element" option. At the bottom of the browser will appear developer tool window. on the top of this window click the "resources" tab- that will display all the resources of your html file (like stylesheets, images etc) try to search for missing stylesheet, if it exsist in the list- the problem is inside of css
Leonie Koomen
2,560 PointsLooks like you're on to something there. There's nothing in the resource tab except the index.html file. How is that possible? With all the training video's I had no problem linking the stylesheets. I have changed laptops in the meantime, could it be a setting issue? I'm using Sublime Text 2. Do you have any idea how I could solve this?
Moshe Vilner
Courses Plus Student 553 PointsDo you see red indications in the right bottom of developer tool?
Moshe Vilner
Courses Plus Student 553 Pointsyou have to remove "style" tag wrapping the links
Leonie Koomen
2,560 PointsDeveloper tool? Where?
Moshe Vilner
Courses Plus Student 553 Pointsyour html has style tag - remove it and your problems will be solved
Dave Campbell
Front End Web Development Techdegree Graduate 31,314 PointsLeonie Koomen Developer tool's = F12 in IE or in Chrome, Right click and 'inspect element'.
Leonie Koomen
2,560 PointsGot it :-) Strangely enough I put the style tags there because I thought it wasn't working because they weren't there. Confusing! Thanks a million Moshe, I'm hoping for a smooth ride on wards!
James Barnett
39,199 PointsLeonie Koomen - Put all your HTML & CSS into a codepen and post the link here, so we can see the bigger picture.
Leonie Koomen
2,560 PointsIt's already solved James, thanks!
This is the first time I've seen this developers tool. What can you do with it in general? Would be good to know for future reference ;-)
Dave Campbell
Front End Web Development Techdegree Graduate 31,314 PointsHeres the Chrome DevTools page for a little more info: https://developers.google.com/chrome-developer-tools/
Leonie Koomen
2,560 PointsSweet, thanks Lower Left!
James Barnett
39,199 PointsLeonie Koomen - The only thing you put in <style> tags are internal styles, when using <link> for external styles those go just inside the head tag.
Here's some more info on al the different ways you can apply CSS
What's codepen?
http://www.netmagazine.com/interviews/chris-coyier-codepen-and-css-tricks-redesign
How do I use codepen
http://css-tricks.com/forums/discussion/21516/a-guide-to-using-codepen-help-us-help-you-/p1
Moshe Vilner
Courses Plus Student 553 PointsDeveloper tool is very usefull tool for web developer. One of its uses -it display all the html tags of all the elements. you can place a mouse at one of tags and the tool wil mark out the corresponding element in the live site
Moshe Vilner
Courses Plus Student 553 PointsJames - thanks for show me the codepen. Its great thing!
Leonie Koomen
2,560 PointsThanks James, I'll have a look at that. Silly mistake with the style tag. Really nice to see that help is always near though and I hope I can return the favor to a 'newbie' one day!
ROHIT GUPTA
Courses Plus Student 758 PointsROHIT GUPTA
Courses Plus Student 758 Pointswhat if i remove rel="stylesheet". pls reply fast