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 CSS Foundations Getting Started with CSS Adding CSS to a Page

Posted by stevencooper
stevencooper
5,755 Points

why doesn't my .css code work the same as instructor's?

basic css stuff. I have an index.html full of lorem ipsum text. here is the beginning of the index.html code:

<!DOCTYPE html>
<html>
<head>
    <title>Adding CSS</title>
    <link rel="stylesheet" href="css/style.css">
    <style type="text/css">
        h1 {
            color: white;
            background-color: red;
        }
    </style>

I can easily change the colors of the h1 element, however, when I try to use exactly the same css code as the instructor shows on the h2 element, absolutely nothing happens! here's the style.css code: 

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

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

The style.css page is in the CSS folder, at the same level in the directory tree as index.html, so the href="css/style.css" should call the page with the above .css code. I cannot get either the font color or the background color to change according to the style.css page.

Anyone have any ideas?

3 Answers

Woodson Delhia
Woodson Delhia
5,126 Points

Ok so I tried it and it works perfectly for me. Did you name your folder "CSS" or "css" ? If the code that you just gave me is exactly what your are using. Then the problem lies in your folder location or the way that you named your folder. The "href" is case-sensitive.

Woodson Delhia
Woodson Delhia
5,126 Points
Woodson Delhia
Woodson Delhia
5,126 Points

Can you please show us how you set up your elements ? Not sure but I have a feeling that's where the error is. If you are able to modify h1 but not h2.. I think that you did not close some elements properly or some sort..

stevencooper
stevencooper
5,755 Points

here is the entire index.html. It comes directly from the course download; I have done no modifications to it except change the colors of the h1 element:

<!DOCTYPE html>
<html>
<head>
    <title>Adding CSS</title>
    <link rel="stylesheet" href="css/style.css">
    <style type="text/css">
        h1 {
            color: white;
            background-color: red;
        }
    </style>
</head>
<body style="background-color: #BDD4DE;">
    <h1>Adding CSS to the Page!</h1>
    <p style="font-weight: bold;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non diam justo. Integer accumsan lacus ut quam pulvinar ullamcorper. Proin imperdiet mauris ac lectus blandit adipiscing. Vestibulum placerat mi sit amet odio luctus quis aliquam ante tristique. Praesent sem ligula, rhoncus quis gravida vitae, consequat id odio.</p>
    <p>Etiam eros nisl, pretium nec suscipit ac, gravida quis velit. Phasellus adipiscing ultrices lorem, ut porttitor tellus interdum eu. Fusce auctor, felis vitae adipiscing vulputate, tellus odio venenatis lorem, et pretium lectus justo vitae ipsum. Mauris in dictum dolor. Sed fermentum, dolor nec mollis lobortis, eros augue laoreet tortor, vel cursus neque sem ac diam.</p>
    <h2>Lorem ipsum dolor sit amet</h2>
    <ul>
        <li>Praesent sem ligula rhoncus</li>
        <li>Donec ut ipsum at quam</li>
        <li>Maecenas libero neque accumsan ut</li>
        <li>Donec quis mauris ipsum</li>
    </ul>
</body>
</html>

The entirety of both the index.html & the stylesheet 'style.css' are exactly what was in the course files from the download. They should work, they worked for the instructor, but my webpage index.html does not look the same as the instructor's does. I'm totally baffled - the same code should produce the same results.

Edit: In the course of following along the best I can without the style.css working, I put the h1 rule from index.html into the style.css and removed it from index.html. When I refreshed, I had lost the styling that I had had with the h1 rule being on the index.html. Somehow, for a reason I don't seem to see, there is a disconnect between the index.html & the style.css stylesheet.

Thanks for the help

stevencooper
stevencooper
5,755 Points
stevencooper
stevencooper
5,755 Points

thank you, i didn't know href was case sensitive. that solved my problem