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.

HTML

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

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? :'(

Nope still trying and haven't got it.

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

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

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?

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

:( hope you got it all fixed