Dasmoto's: CSS won't link to HTML

Hi,

I’m going through Codecademy’s CSS and HTML practice, currently working on the Dasmoto’s project in Atom. I’ve looked at plenty of forum topics where users had a similar problem but none of what I found in them helped. Can you please have a look at it and tell me what I’m missing?

This is the head of my HTML file:

head

The CSS file is located in the same directory and is named styles.css. I tried both adding and omitting the ./ in the href attribute but neither worked.

2 Likes

Hi. Put it in a same folder and remove the ./ before the css file. It works fine for me(I’m working on something else). image

1 Like

Hi,

Thanks for your quick reply. I removed the ./ but it still isn’t working. The .html and the .css files are in the same folder and have been since I created them. I know this is how it’s supposed to work but for some reason I can’t imagine, it doesn’t.

1 Like

Did you put a / after the linking? image

Tried both with and without (on the screenshot I attached, it’s not there, in the current version of the file, it is there), didn’t make any difference. I also tried rearranging the order of the attributes but apparently that doesn’t matter either.

1 Like

Problem eventually overrode by deleting the link element and copying my CSS elements into the head using the style element.

However, I prefer not doing that in future projects if I don’t have to, so if anyone can spot the mistake in my original post, feel free to reply.

1 Like

Please remember to include a link to the exercise when posting a new topic relating to a lesson. We cannot verify and confirm anything until we see the actual exercise page.

1 Like

I hope this is what you mean: https://www.codecademy.com/paths/web-development/tracks/styling-a-website/modules/web-dev-html-css-practice/projects/dasmoto

But it turns out my problem is unrelated to the exercise itself. I’ve found other exercises online for practice and I’m still facing the same problem: regardless of how I link the CSS file to the HTML, the browser will simply ignore it and just render everything in the default style. Everything works well when I incorporate the CSS code in the HTML code using the style tag, so the problem must be the linking.

1 Like

I’ve put the stylesheet in a css folder…

<head>
  <meta charset="UTF-8">
  <title>Dasmoto's Arts & Crafts</title>
  <link href="./css/style.css" rel="stylesheet"/>
</head>
2 Likes

Hi i’ve figured it out. It needs two dots:
image

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

That puts the CSS file in a directory above the index.html file which is not good design. What if index.html is the home page? There is no directory above it since it is in the root directory. Move your css file to a css directory in the same directory as index.html.

+ projects/
  + dasmotos/    <- site root
    + images/
      * picture.png
    + css/
      * styles.css
    + js/
      * script.js
    * index.html
1 Like

Did you ever find out why this happenes? I’m having the same problem

In a URL, ./ means same directory as the current html page. If we organize our project in its own folder, then that becomes the site root. That’s the ./ that our page(s) refer to. The current working directory.

Our index.html file will be in this directory. It makes sense to organize script into a script folder (js) and style sheets into a styles folder (css). The paths to those files will be,

./css/styles.css

and,

./js/script.js

It follows we will have an images folder, as well. The only file that needs to be on the site root is, index.html

Think site root so that you get your bearings on web server and design all your navigation relative to that. The home page is on the site root and should be the default page if not specified in the URL.

https://www.codecademy.com/

will open up on their home page. That’s how web servers work. Don’t try this on your own machine, it won’t work, but we can still devise our project folders as site roots, each and every one.

1 Like

I was having the same problem with the CSS not linking in the HTML properly, and my site kept coming up with basic HTML styling. I read through everyone’s comments here and realized that my problem was that I had put my index.html file INSIDE my “resources” file, rather than alongside resources in the overall project folder I called “Dasmoto.” I thought it was a problem with this:

But it was not- It was a problem with the way I had initially set up my folders for this project. SO frustrating, but I'm glad I found the solution here!!