Dasmoto's: CSS won't link to HTML


#1

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

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


#3

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.


#4

Did you put a / after the linking? image


#5

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.


#6

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.


#7

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.


#8

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.


#9

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>

#10

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

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

#11

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