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

Sean Flanagan
Sean Flanagan
33,232 Points

Can't link HTML with CSS

Hi all.

I've created a CSS file and tried to link the HTML file to it, but I can't combine them. Here's my HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Adding CSS</title>
    <link rel="stylesheet" href="css/css_foundations_style.css">
    <style type="text/css">
        h1 {
            color: white;
            background-color: #E14607;
        }
    </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>

And below is my CSS:

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

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

Thanks in advance for any assistance you can offer.

4 Answers

Samuel Webb
Samuel Webb
25,369 Points

Did you make a specific HTML folder separate from CSS folder? If so, you'll have to go up a directory before being able to go into CSS folder. Like this: ../css/css_foundations_style.css

Mufaddal Motorwala
Mufaddal Motorwala
4,543 Points

CSS reference is correct in html page, make sure css file is on correct location.

Sean Flanagan
Sean Flanagan
33,232 Points

Thanks for your help.

The thing is that I'm good at using absolute paths but relative ones are a different kettle of fish for me. This is my Achilles heel. I've created a new folder called css_foundations, so I know which course the folder name alludes to. My HTML file is called css_foundations.html and my CSS styles file is css_foundations_style.css. Here's my absolute link:

<link rel="stylesheet" href="C:\Users\user\Downloads\adding-css\css_foundations\css_foundations_style.css">

The backslashes haven't gone unnoticed. Can you tell me please, how to change this to a relative link. This would spare me a lot of confusion in the future. Thanks.

Samuel Webb
Samuel Webb
25,369 Points

Here's what you do, have a folder called css_foundations. Inside that folder have css_foundations.html and a folder named css. In css folder have css_foundations_style.css. To use a relative path, all you'll have to do is

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

because you're navigating to that file from the folder your .html file is in. The reason its better to use relative paths is if you make a website that you plan to take online, you can just ftp the files and folders you created to the server and you're ready to go. If you use absolute paths, you'll have to change all linked file paths as well as navigation links once on the server.

Sean Flanagan
Sean Flanagan
33,232 Points

Hi Samuel. I've followed your instructions to the letter. I then refreshed the browser and I'm happy to say it's worked. Thank you very much. You've been a great help.

Sean :-)

Samuel Webb
Samuel Webb
25,369 Points

Glad I was able to help.