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

Yashar Soroosh
Yashar Soroosh
5,617 Points
Posted by Yashar Soroosh
Yashar Soroosh
5,617 Points

External Style Sheet

Hi everyone. I'm going through the CSS tutorial and I can not get the external style to work . Below is the code for the index page in html followed by the style sheet in css. Please let me know what I'm doing wrong.

<!DOCTYPE html>
<html lang = "eng">
    <head>
        <title> Adding CSS</title>
        <link rel ="stylesheet" href ="css/style.css">
        <style type = "text/css">

        </style>
    </head>
    <body style ="Background-color: #BDD4DE;">
     <h1>Adding CSS to the Page!</h2>
     <p style = "font-weight: bold;"> This is my first attempt to try CSS.  I would like to eventually be a web developer.
     I am hoping that I am on the right track.</p>
     <p>There are many ways for one to become a developer.  Below I have written the steps which I plan on taking. 
     I believe it's a good way to start my journey into web development.</p>
     <ul>
        <li>Learn the Basics of HTML</li>
        <li>Learn the Basics of CSS</li>
        <li>Learn Javascript</li>
        <li>Learn JQuery</li>
        <li>Enroll in Thinkful</li>
     </ul>
    </body>
</html>

Stylesheet

 h1{
    color: white;
    background-color: #E14607;
    }

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

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

    }

7 Answers

Kevin Korte
Kevin Korte
28,135 Points
Kevin Korte
Kevin Korte
28,135 Points

From where your HTML document is, do you have a folder next to it called "css" and inside that folder your style sheet?

Yashar Soroosh
Yashar Soroosh
5,617 Points
Yashar Soroosh
Yashar Soroosh
5,617 Points

Well for this exercise I created a "css" folder and I put the HTML index document within it along with the style sheet.

chet
chet
2,565 Points
chet
chet
2,565 Points

Hi Yashar,

Both your HTML, and CSS work just fine. As Kevin asked above, "Is your CSS style.css file in a folder labled css? and, is your index.html in that same folder, or outside of that folder?" If your HTML file is is the same directory as you style.css, it won't work.

Yashar Soroosh
Yashar Soroosh
5,617 Points
Yashar Soroosh
Yashar Soroosh
5,617 Points

Oh so the the index.html would have to be in a different folder. Thanks guys. Is there a way to get it to work if the HTML is in the same folder?

chet
chet
2,565 Points
chet
chet
2,565 Points

Yes, like this, <link rel ="stylesheet" href ="style.css">.

However, this is not good way to organize large websites.

chet
chet
2,565 Points
chet
chet
2,565 Points

Sorry about that!

Yes, like this, link rel ="stylesheet" href ="style.css"

I left the angle brackets out so it would display here in the forum.

However, this is not good way to organize large websites.