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

Steven Yean
Steven Yean
6,620 Points
Posted by Steven Yean
Steven Yean
6,620 Points

How to link CSS to HTML with external stylesheet?

I was following along with the tutorial "Adding CSS to a Page," pulling up Windows Notepad every time the instructor added code. I'm pretty sure that I wrote all of the code correctly, but I placed all of the notepad documents in my desktop, and I don't have a css folder.

To clarify: My CSS isn't applying I think because the HTML style type links to a CSS folder, which I don't have. How do I link my HTML file to my CSS style sheet?

Here's my HTML:

<!DOCTYPE html> <html> <head> <title>Adding CSS</title> <link rel="stylesheet" href="css/style.css"> <style type="text/css"> </head> <body style="background-color: #BDD4DE;"> <h1>Adding CSS to the Page!</h1> <p style="font-weight: bold;">Lorem ipsum dolor sit amet, habeo etiam nec in, populo scribentur dissentiet pro an. Cu per harum accumsan placerat, paulo postea moderatius qui an. Vix id partiendo delicatissimi, ex mei nobis denique. An pro animal efficiantur, ne idque atqui noluisse sit. No nonumy audire eum, in his magna dolore veritus, eum probo partem abhorreant id. Eum te hinc dolore iuvaret, vidisse persius nostrud an vim, ius cu autem definitiones.</p> <p>Eam mutat viderer ei, pro viris singulis argumentum ea. Id mei sint nihil labitur, ea ius meis inermis. Partem incorrupte usu ut, eu detraxit vituperatoribus pri. Vel viris persius moderatius an, dictas eripuit eam at, te simul omnesque convenire vis. No vix solet recteque, facer noster ut has.</p> <h2>Lorem ipsum dolor sit amet</h2> <ul> <li>Vitae commodo platonem ne ius</li> <li>his an erat minim luptatum</li> <li>eum mollis democritum omittantur</li> <li>Te eam debitis civibus adipisci</li> </ul> </body> </html>

..and here's my external style sheet:

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

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

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

Apologies if these are formatted incorrectly - this is my first post on these forums.

4 Answers

Steven Yean
Steven Yean
6,620 Points
Steven Yean
Steven Yean
6,620 Points

Ah, that looks really bad. Here's my HTML:

<!DOCTYPE html>
<html>
<head>
<title>Adding CSS</title>
<link rel="stylesheet" href="css/style.css">
<style type="text/css">
</head>
<body style="background-color: #BDD4DE;">
<h1>Adding CSS to the Page!</h1>
<p style="font-weight: bold;">Lorem ipsum dolor sit amet, habeo etiam nec in, populo scribentur dissentiet pro an. Cu per harum accumsan placerat, 
paulo postea moderatius qui an. Vix id partiendo delicatissimi, ex mei nobis denique. An pro animal efficiantur, ne idque atqui noluisse sit. 
No nonumy audire eum, in his magna dolore veritus, eum probo partem abhorreant id. Eum te hinc dolore iuvaret, vidisse persius nostrud an vim, 
ius cu autem definitiones.</p>
<p>Eam mutat viderer ei, pro viris singulis argumentum ea. Id mei sint nihil labitur, ea ius meis inermis. 
Partem incorrupte usu ut, eu detraxit vituperatoribus pri. Vel viris persius moderatius an, dictas eripuit eam at, 
te simul omnesque convenire vis. No vix solet recteque, facer noster ut has.</p>
<h2>Lorem ipsum dolor sit amet</h2>
<ul>
<li>Vitae commodo platonem ne ius</li>
<li>his an erat minim luptatum</li>
<li>eum mollis democritum omittantur</li>
<li>Te eam debitis civibus adipisci</li>
</ul>
</body>
</html>

Hope this looks better!

Suzanne Cranen
Suzanne Cranen
7,497 Points
Suzanne Cranen
Suzanne Cranen
7,497 Points

You have to replace:

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

by

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

And of course you have to make a map named css and you have to make a css file named style.css and place that in the map.

The css file has to contain the css code ofcouse

h1 { color: white; background-color: #E14607; }
h2 { color: steelblue; padding-bottom: 10px; border-bottom: 2px dotted; }
ul { color: white; background-color: steelblue; }

I hope this will help you

Sahriar Rahman supto
PLUS
Sahriar Rahman supto
Courses Plus Student 1,403 Points
Sahriar Rahman supto
Sahriar Rahman supto
Courses Plus Student 1,403 Points

create a externel css file named "mystyle.css" and insert your style codes

h1 { color: white; background-color: #E14607; } h2 { color: steelblue; padding-bottom: 10px; border-bottom: 2px dotted; } ul { color: white; background-color: steelblue; } And in your HTML file add the following code to insert the css in your html page:

<link rel="stylesheet" type="text/css" href="mystyle.css">

Steven Yean
Steven Yean
6,620 Points
Steven Yean
Steven Yean
6,620 Points

Got it to work by debugging it using DevTools. Chrome kept showing me a cached version of the document and I had to go into DevTools and disable the cache.

Thanks!