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

Jacqueline Weinland
Jacqueline Weinland
1,356 Points
Posted by Jacqueline Weinland
Jacqueline Weinland
1,356 Points

Linking CSS

So confused as to why my html and css are not linking, they are all in the correct files and there are no problems with capitalization/spelling etc - help?

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
  background-color: #a3b4f1;
}

#logo {
  text-align: center;
  margin: 0;
}

a {
  color: black;
}

nav a.selected, nav a:hover {
  color: #32673f;}

body {
  background-color: #a3b4f1;
  color: #999
}


```<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title>JDW Education</title>
      <link rel="stylesheet" href="css/normalize.css">
      <link rel="stylesheet" href="css/main.css"> 
    </head>
    <body>

7 Answers

Derek Merson
Derek Merson
19,280 Points
Derek Merson
Derek Merson
19,280 Points

Is the css folder located on the same "level" as index.html?

Isaac Asante
Isaac Asante
4,752 Points
Isaac Asante
Isaac Asante
4,752 Points

I don't see any mistake in your stylesheet linking or CSS rules, so a few things you could verify:

1) Make sure there are no characters or space before your <!DOCTYPE html> tag at the beginning of your index.html file. 2) Make sure your CSS files are correctly named; main.css and normalize.css should be the names. 3) Make sure your CSS files are properly placed INSIDE your /css folder. If they are outside the folder or in another location, the paths will be wrong in the header of your index.html file. 4) Try closing your Treehouse tabs and Workspace in your browser and open them again, then preview your Workspace. 5) Make sure you have SAVED your changes in your CSS and HTML files before previewing your website.

I hope it helps!

Jacqueline Weinland
Jacqueline Weinland
1,356 Points
Jacqueline Weinland
Jacqueline Weinland
1,356 Points

Thanks for the responses! Unfortunately none of these were the solution - the index.html file is not in a folder - should it be in one? both css files are inside a folder titled "css" (all of my css folders/files are lower case for continuity). Definitely saving each time!

Samuel Webb
Samuel Webb
25,370 Points
Samuel Webb
Samuel Webb
25,370 Points

Do you have your index.html in its own folder? If so, you'll need to go up one level to the main directory like this:

      <link rel="stylesheet" href="../css/normalize.css">
      <link rel="stylesheet" href="../css/main.css">

Most likely you're having an issue with navigating directories which is pretty simple to learn and crucial to maintaing a website. You'll want to learn about absolute and relative paths. In this example, we're using relative paths to define where we want to look, relative to where we're currently located. For a little more info, you can check out the question here: http://stackoverflow.com/questions/181805/absolute-path-relative-path

My advice would be to go through the Console Foundations course here on Treehouse to get an understanding of the console Then practice navigating throughout the folders of your computer using relative and absolute paths. That should give you an understanding of how the computer looks for and finds the documents you want to link to.

Almost forgot, here's the link to the console foundations course: http://teamtreehouse.com/library/console-foundations-2

Samuel Webb
Samuel Webb
25,370 Points
Samuel Webb
Samuel Webb
25,370 Points

Welp, never mind this. I was writing it before I saw that you updated your post :)

Derek Merson
Derek Merson
19,280 Points
Derek Merson
Derek Merson
19,280 Points

The only other thing that I can think of is that the css file was not correctly saved as a css file. As in, the file extension is not ".css"

Are you doing this in workspaces or in your own text editor?

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

At the time that you first added "normailze.css" do you remember if that took effect?

The main thing it did was remove bullet points on your navigation.

Do you still have bullet points with the main navigation?

Jacqueline Weinland
Jacqueline Weinland
1,356 Points
Jacqueline Weinland
Jacqueline Weinland
1,356 Points

Again, thank you for the responses - I am doing this in workspaces. At one point it did work, then I have no idea what I changed which removed all of my css as though the two files were not linked Jason, the bullet points are there, meaning that the normalize.css must not be linked either?

Derek, is there any other way to save the files as css aside from naming them with a .css following the title - my files read as index.html (not in any folder) then main.css and normalize.css in a folder titled "css"

Isaac Asante
Isaac Asante
4,752 Points
Isaac Asante
Isaac Asante
4,752 Points

If you are uploading your files, then use a text editor like Notepad++, create your document, then in "Save As...", select the Cascading Style Sheets file type from the dropdown list while saving your file. Then, upload your .css file to the Worksheet. I hope it helps.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Yes, it sounds like neither is working.

It seems like you have the correct file and folder structure plus you said it was working at one point.