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
Sean Flanagan
33,235 PointsCan'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
25,370 PointsDid 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
4,543 PointsCSS reference is correct in html page, make sure css file is on correct location.
Sean Flanagan
33,235 PointsThanks 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
25,370 PointsHere'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
33,235 PointsHi 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
25,370 PointsGlad I was able to help.