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

HTML

Posted by Peter G.
Peter G.
Courses Plus Student 5,806 Points

CSS not working for me

Hey guys. I'm on the CSS part of the HTML track. I unable to get my external css file to link up with my HTML file so that they work. Any clue as to what I am doing wrong? Thank you. :) 

<!DOCTYPE HTML> 
<html lang="en">
<head>
    <title>Adding CSS</title>
    <link rel="stylesheet" href="css/style.css">
    <style type="text/css">
    h1 {
        color: white;
        background-color: #E14607;
    }
    </style>
<meta charset="utf-8">

</head>
<body style="background-color: #BDD4DE"> 
    <h1>Adding CSS to the page.</h1>
    <p style="font-weight: bold">This is just some text that appears on the page.</p>
    <h2>Lorem inspum solld armet</h2>
    <ul>
        <li>Pasuinrocvd sdoiuhe hsdaokn</li>
        <li>uihsa siensl osinme d</li>
        <li>soen siej ehjsh eisnh</li>
        <li>oishjon sdfsdfsda sdfsodaijoi</li>

    </ul>

</body>
</html>

The CSS FIle:

h2 {
    color: steelblue;
    padding-bottom: 10px;
    border-bottom: 2px dotted;

}
ul {
    color: white;
    background-color: steelblue;

}

7 Answers

Peter G.
Peter G.
Courses Plus Student 5,806 Points

Yeah just tried it with Opera, IE & Chrome. And it worked like it's suppose to. So I'll have to uninstall & re-install my Firefox. :( Why FIREFOX? Why are you broken buddy? :'(

Peter G.
PLUS
Peter G.
Courses Plus Student 5,806 Points
Peter G.
Peter G.
Courses Plus Student 5,806 Points

Nope still trying and haven't got it.

Peter G.
PLUS
Peter G.
Courses Plus Student 5,806 Points
Peter G.
Peter G.
Courses Plus Student 5,806 Points

So for some reason. Doing an external link between the CSS file & HTML file works via Google Chrome, but doesn't when I use my Firefox. Strange. BTW: I use Firefox, simply cause I like the inspector function.

Leah Hostler
Leah Hostler
2,966 Points
Leah Hostler
Leah Hostler
2,966 Points

Hi Peter, you will need to link your CSS Stylesheet to the HTML document. It should look something like this in the head of your document:

<head>
    <title>Tugboat Animation</title>
    <link rel="stylesheet"  type ="text/css" href="css/main.css">
</head>

"Rel" specifies the relationship between your HTML document and the CSS stylesheet. "Type" refers to the type of document you are linking. "Href" is defining the source that you are linking. I am linking to the file "main.css" which is located inside the "css" folder.

Check out this video titled Adding CSS to a Page for more help

Leah Hostler
Leah Hostler
2,966 Points
Leah Hostler
Leah Hostler
2,966 Points

It should work across all browsers,so just be sure you have everything linked correctly. For example, if your stylesheet is located in a folder, did you reference it properly in the link?

Peter G.
PLUS
Peter G.
Courses Plus Student 5,806 Points
Peter G.
Peter G.
Courses Plus Student 5,806 Points

I'm doing the Adding CSS to a Page video at the moment. And that's where the problem is. I just tried adding type="text/css". And it worked fine on my Chrome. But now it's completely stopped working on my Firefox. Which means that I might to uninstall & re-install my Firefox. Since it's looking that is the problem. I'll see how it works with IE & Opera first. Thank you Leah. :)

Leah Hostler
Leah Hostler
2,966 Points
Leah Hostler
Leah Hostler
2,966 Points

:( hope you got it all fixed