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

CSS

Frankie Lamar
Frankie Lamar
11,120 Points
Posted by Frankie Lamar
Frankie Lamar
11,120 Points

Stylesheet not rendering in browser

This is my first time trying to create a website using and external stylesheet. For some reason the changes in my style sheet are not showing up when I save them and refresh chrome. Here is my html:

<!doctype html>

<html lang = "en">
    <head>
        <meta charset="utf=8">
        <title>Top Shelf Squeeky Door</title>
        <link rel="stylesheet" type="text/css" href="topshelf/css/style.css">
        <script type= "text/javascript" src= "javascripts/app.js"></script>
    </head>
    <body>
        <div id = "nav">
            <h1>Top Shelf</h1>
        </div>
        <div>
            <ul>
                <li><a href ="index.html">Home</a></li>
                <li><a href = "Artist.html">Artists</a></li>
                <li><a href = "media.html">Media</a></li>
                <li><a href = "downloads.html">Downloads</a></li>
                <li><a href = "contact.html">Contact</a></li>
            </ul>
        </div>
        <div id= "aboutpara">
            <p> Here is some cool stuff you need to know about topshelf.blah blah blah blah blah blah blah blah blah blah blah blah blah blah v blah blah blah blah blah blah blah blah blah blah.</P>
            </d>


    </body>

</html>

Here is my css:

body {
    background-color: black;
    font-family: comicsans;
    color: white;
}

.nav{
    text-align: inline;
}

Why are the not linked together? I am writing in sublime text 2 and I am opening the html file in chrome.

4 Answers

Frankie Lamar
Frankie Lamar
11,120 Points
Frankie Lamar
Frankie Lamar
11,120 Points

I changed the file path from href="topshelf/css/style.css" to href="css/style.css", and I still didn't see a change. I closed chrome and re-opened it and then the css rendered. I'm not sure why that is. I tried clearing the cache several times before I restarted chrome.

Thanks for your help guys my html is linking to the style sheet now.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Sounds like a file path issue with your <link> tag. Here's a tutorial on file paths that should get you going.

Let us know how you are getting along with this here in this thread.

Ryan Williams
Ryan Williams
3,418 Points
Ryan Williams
Ryan Williams
3,418 Points

You need to link the .css file in the head portion of your html. It should look something like this. link rel="stylesheet" href="css/style.css" Be sure to include the correct file path for your specific .css file. Hope this helps.

David Lane
David Lane
33,414 Points
David Lane
David Lane
33,414 Points

Remember that your style sheet needs to be linked relative to where the html file sits. So if you have a folder containing your site files (site_folder), and your html file (example.html) and css folder (with your stylesheet.css file inside) sits inside that folder, your path would be "css/stylesheet.css" and not "site_folder/css/stylesheet.css".