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 Randhir Rana
Randhir Rana
4,754 Points

CSS didn't work

I tried typing all the css described in the video I can't seem to see what I did wrong. For some reason it does not apply the red color up top and dark blue color down below on the page.

Randhir Rana
Randhir Rana
4,754 Points

Here is my code for html:

<!DOCTYPE html>
<html>
<head>
    <title> Adding CSS</title>
    <link rel="stylesheet" href="css/style.css"
    <style type="text/css"> 
        @import 'css/more-styles.css';


    </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.

    <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>
Randhir Rana
Randhir Rana
4,754 Points

Here is my css file.

@import '/css/more-styles.css';

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


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

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

8 Answers

Christian Andersson
Christian Andersson
8,712 Points
Christian Andersson
Christian Andersson
8,712 Points

You are missing a closing bracket on line 5:

<link rel="stylesheet" href="css/style.css">
Randhir Rana
Randhir Rana
4,754 Points

I've changed that error, but it still hasn't changed at all. I believe it might be from not setting up the files in the correct folder? maybe i have a folder called css and inside this folder have files called addingcss.html, styles.css and more-styles.css.

So far only the background is blue but no other changes have occurred.

Michael Williams
Michael Williams
13,005 Points
Michael Williams
Michael Williams
13,005 Points

Hi Rana Randhir,

You are very close. Just a few recommendations to get it working...

To go with the way your HTML is set-up, here is a modification:

    <link rel="stylesheet" href="css/style.css">
    <style>@import url('/css/more-styles.css')</style>

Then just remove the following from the top of your CSS file:

@import '/css/more-styles.css';

A couple other recommendations would be to transfer the inline CSS from the HTML (eg. body style, p style) to the external style sheets and there is a missing closing tag to the second paragraph.

Regards, Michael

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Rana,

You need to correct your id that's at the end of the first <p> you have id odio but it needs to be id="odio" then you need </p> after the second paragraph.

Hope this helps.

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

I would also suggest using
@import "more-styles.css"; at the top of your css page. (if your more-styles.css file is in the same folder as your style.css file, which it does look like they are from your code.)

Hope this helps.

Randhir Rana
Randhir Rana
4,754 Points
Randhir Rana
Randhir Rana
4,754 Points 
<!DOCTYPE html>
<html>
<head>
    <title> Adding CSS</title>
    <link rel="stylesheet" href="css/style.css">
    <style>@import url('/css/more-styles.css')</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>
Randhir Rana
Randhir Rana
4,754 Points
Randhir Rana
Randhir Rana
4,754 Points

Even after including this in my CSS its still not working..

@import "more-styles.css"; 

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

ul {
    color: #FFF;
    background-color: steelblue;
}
Randhir Rana
Randhir Rana
4,754 Points
Randhir Rana
Randhir Rana
4,754 Points

Again my folder CSS has; addingcss.html, styles.css and more-styles.css in the folder. I'm not sure why it is not linking the folder

Wayne Priestley
Wayne Priestley
19,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Did you remove <style> @import url from your html page? You should.
What's the addingcss.html ?

franceskos
franceskos
2,169 Points
franceskos
franceskos
2,169 Points

the same error with me, must be the path, I think... i am gonna try it now...