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

Jane Marianne Filipiak
Jane Marianne Filipiak
7,444 Points
Posted by Jane Marianne Filipiak
Jane Marianne Filipiak
7,444 Points

How to make a directory?

Hi! I have made html on Notepad, and also an external CSS style sheet on Notepad. Please see below. I do not know how to create a directory so that the css can be applied. I set up a directory on my pc : file:///C:/Sites/treehouse/CSS/AddCSS_external.html, but it won't work. Helpless in Hong Kong.

<!doctype  html>
<html  lang="en">
<head>
    <meta charset="utf-8">
    <title>Adding CSS</title>
    <link  rel="stylesheet" href="css/style.css">
</head>
<body  style="background-color: #BDD4DE;">
    <h1>Adding CSS to the Page!</h1>
    <p  style="font-weight:bold;">Hac sociosqu sodales </em>dolor sem, class duis    

    euismod metus ante iaculis Etiam in. Per ridiculus. Primis ctus sem         

volutpat. Interdum in tempus phasellus ridiculus taciti lorem, quam ipsum         

purus lacinia liula.Tincidunt netus facilisi neque Libero         rhoncus.</p>
    <p>
    <strong>Hac sociosqu sodales </strong>dolor sem, class duis euismod metus     

ante iaculis Etiam in. Per ridiculus. Primis       lectus sem volutpat. Interdum in     

tempus phasellus ridiculus taciti lorem, quam ipsum purus lacinia     

ligula.Tincidunt netus facilisi neque Libero rhoncus.</p>  
    <h2>This is Heading Two</h2>
    <ul>  
       <li>tempus phasellus</li>
       <li>ridiculus taciti</li>
       <li>lectus sem volutpat</li>
       <li>facilisi neque</li>
    </ul>     
</body>
</html>

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

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

5 Answers

David Thomas
David Thomas
Courses Plus Student 21,263 Points

No Problems, Also to note be careful with capitalisation - some web servers will treat folders with /CSS/ (uppercase) as different to /css/ (lowecase)

since your folder is uppercase CSS to be on the safe side its best to change your link to 

<link  rel="stylesheet" href="CSS/style.css">
Trent Burkenpas
Trent Burkenpas
22,388 Points
Trent Burkenpas
Trent Burkenpas
22,388 Points

so did you create a folder inside your project folder called "css"?

Jane Marianne Filipiak
Jane Marianne Filipiak
7,444 Points
Jane Marianne Filipiak
Jane Marianne Filipiak
7,444 Points

Thanks Trent. Sites is the 1st; treehouse the 2nd;CSS the 3rd. In CSS folder is one html file (named AddCSS_external.html), and also one css stylesheet (named style.css). here is the path of these files and folders below. file:///C:/Sites/treehouse/CSS/AddCSS_external.html Do I have to connect to a remote site for the css to be applied to the webpage?

David Thomas
PLUS
David Thomas
Courses Plus Student 21,263 Points
David Thomas
David Thomas
Courses Plus Student 21,263 Points

Inside the folder named css you'll need to create a new file called style.css

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

is where your html rederences to your stylesheet.

external stylesheets need the .css extention not .html

so inside style.css you would put your style code 

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

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