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.

CSS CSS Foundations Getting Started with CSS Adding CSS to a Page

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.

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>

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

You are missing a closing bracket on line 5:

<link rel="stylesheet" href="css/style.css">

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

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

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

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.

<!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>

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;
}

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

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

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