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

HTML

Posted by Tom Stockwell
Tom Stockwell
217 Points

Linking CSS and HTML

Hi, I'm trying to link my CSS with my HTML.

This is my code I'm using; <link href="/css/style.css" rel="stylesheet" type="text/css">

C:\Users\Steve Jobs\Desktop\Folders\Web Dev\www\css\style.css <---- this is where my style sheet is located

In my style sheet I have body { text-align: center; background-color: red; }

And nothing seems to be working, any help?

Tom Stockwell
Tom Stockwell
217 Points

OP here, didn't realise the markdown as I'm new here;

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

8 Answers

Ste Royle
Ste Royle
9,538 Points
Ste Royle
Ste Royle
9,538 Points

so something like this:

C:\Users\Steve Jobs\Desktop\Folders\Web Dev\www\index.html
C:\Users\Steve Jobs\Desktop\Folders\Web Dev\www\css\style.css

Then to link to your CSS from your index.html file you would add (notice the change in the href bit):

<link href="css/style.css" rel="stylesheet" type="text/css">
Dele Opeifa
Dele Opeifa
11,766 Points
Dele Opeifa
Dele Opeifa
11,766 Points

Hi there. If your CSS file is saved as style.css inside the CSS folder, and your CSS folder is inside the same folder as your html file, your markup should look like this:

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

Your markup is using a forward slash \ instead of a backslash, and has an extra slash before css/style.css, and this will give you problems. Change to a backslash and Del ete the extra one at the beginning of your steely sheet reference and you should be set.

Tom Stockwell
Tom Stockwell
217 Points 
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="css/style.css">
  <title>StockySystems!</title>
 </head>
<body>
  <div class="container">
  <h1 class="header">Test</h1>
  </div>
Test

  <p>Test</p>
</body>
</html>

body {
    text-align: center;
    background-color: red;
}

C:\Users\Steve Jobs\Desktop\Folders\Web Dev\www\css\style.css C:\Users\Steve Jobs\Desktop\Folders\Web Dev\www\html\index.html

None of your suggestions are working! :(

Dele Opeifa
Dele Opeifa
11,766 Points
Dele Opeifa
Dele Opeifa
11,766 Points

Your index.html file is saved inside a folder called html. Your css folder needs to be inside the same folder. It is currently inside the www folder. Place the css folder in the same folder as your html file.

Shaun Earley
Shaun Earley
20,412 Points
Shaun Earley
Shaun Earley
20,412 Points

You remove the first backslash in your href. 

<link href="css\style.css" rel="stylesheet" type="text/css">
Tom Stockwell
Tom Stockwell
217 Points

Still hasn't worked :(

Shaun Earley
Shaun Earley
20,412 Points
Shaun Earley
Shaun Earley
20,412 Points

Sorry you need to change the \ to /. My bad I looked at it to quickly

<link href="css/style.css" rel="stylesheet" type="text/css">
Ste Royle
Ste Royle
9,538 Points
Ste Royle
Ste Royle
9,538 Points

Try switching the backslash for a forward slash

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

This is assuming your HTML file is in the same location as your CSS folder

Tom Stockwell
Tom Stockwell
217 Points 
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="css/style.css">
  <title>StockySystems!</title>
 </head>
<body>
  <div class="container">
  <h1 class="header">Test</h1>
  </div>
Test

  <p>Test</p>
</body>
</html>

body {
    text-align: center;
    background-color: red;
}

C:\Users\Steve Jobs\Desktop\Folders\Web Dev\www\css\style.css 

C:\Users\Steve Jobs\Desktop\Folders\Web Dev\www\html\index.html

None of your suggestions are working! :(

Ste Royle
Ste Royle
9,538 Points
Ste Royle
Ste Royle
9,538 Points

OK your HTML file and CSS folder aren't together, you can either move them to be in the same folder or to get it working with your current structure try this:

<link href="../css/style.css" rel="stylesheet" type="text/css">
Tom Stockwell
Tom Stockwell
217 Points

Wow thanks! I should have made it far clearer from the beginning, thank you very much.

-Tom

Ste Royle
Ste Royle
9,538 Points
Ste Royle
Ste Royle
9,538 Points

No problem Tom, I would agree with Dele though, it is common practice to have the index.html in the root folder not in a sub folder.

Tom Stockwell
Tom Stockwell
217 Points

I'm not sure what you mean by this, could you explain with my file paths?

C:\Users\Steve Jobs\Desktop\Folders\Web Dev\www\html