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.

General Discussion

Problems 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!

what if i remove rel="stylesheet". pls reply fast

22 Answers

Seems like you miss closing bracket (">" )of middle css link

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

Try 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

I cleared my Chrome browsing data and used IE, still nothing. Appreciate your input Moshe!

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

To 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

Looks 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?

Do you see red indications in the right bottom of developer tool?

you have to remove "style" tag wrapping the links

Developer tool? Where?

your html has style tag - remove it and your problems will be solved

Got 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
James Barnett
39,199 Points

Leonie Koomen - Put all your HTML & CSS into a codepen and post the link here, so we can see the bigger picture.

It'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 ;-)

Sweet, thanks Lower Left!

James Barnett
James Barnett
39,199 Points

Leonie 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

Developer 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

James - thanks for show me the codepen. Its great thing!

Thanks 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!