CSS will not link to html in ATOM


#1

Hi everyone,

I am at my wits end. I have spent 3 hours trying to figure out why my html wont link to css.

h1 {
color: red;
}

Both files are saved in the same folder on the desktop.

Many thanks for all your help


#2

This is just a hunch … a long shot … but I see that this old thread some long time ago also described problems with a file named stylesheet.css

I wonder if using the name stylesheet.css causes some conflict?
Seems unlikely, but try changing the name and link to mystyle.css.

I have experienced similar problems in using python script where the name of the file was the same as a python module.

Other than this thought, try using an absolute path to the *.css file. Look at file permissions too. I use atom package php-server for testing my html with js and css assets and errors are seen in log.

And you can also test your html + css in jsfiddle.


#3

Hi there. Thanks for the advice

I tried changing the file name and using an absolute path, but still no luck.

Likewise there are no special permissions for the file.

In jsfiddle, it would also not load the css…

Agh this is so frustrating.

Again though, I appreciate the help!

Thank you!


#4

I missed this on first read.
Your <img tag does not have a closed />
Also try ./stylesheet.css
Try using validators.


#5

Hi thanks again for the suggestions.

I closed the tag on the image but no change.

MY css code was for changing the color of h1 “Test”

Tried ./ but no change.

What is a validator and how do I use it?

Thanks again


#6

So I tried using a validator and it says

“NO style sheet found”

does this mean i have to add something to the file?


#7

First, try validating your css file here …

http://csslint.net/

And next time you view your index.html in your browser, right click, View page source, can you click on the stylesheet link to see the css code? Probably not if it is not loading.

When you click on stylesheet.css in tree-view in Atom do you see coloured syntax? Looking at Atom bottom bar does it show
UTF-8 CSS?


#9

I will add another suggestion.

run … apm install file-icons

You will see icons attached to your tree-view panel and it is easier to see different types of files with associated icons.

Also explore how to use Developer tools. You can then inspect your stylesheet … e.g. look at Sources tab.

Still a bit baffling and I am not assuming that what you have typed here in this thread is exactly what you have in your file.

Can you post your url link to failed jsfiddle test?


#10

Again many thanks for all your help…

So I started again, and went down to an even more basic form.

Still no luck.

  1. This is my html code

  1. This is my CSS

3.This is from CSSLint

  1. This is the UTF-8

but

  1. Now on JS Fiddle, it seems to work

So, now I’m wondering if it is the pre view function on atom that is not working correctly?


#11

Ok nevermind,

I figured it out…

Basically the previewer would not update unless all the work had been saved. Which was very strange… It would update the html, but not the CSS.

Which means,

I have to save everything before I want to view it properly.

Many thanks for all the help!


#12

Here’s how it’s not strange: you’re not previewing the CSS. You’re previewing the HTML, and the HTML has a reference to a file on disk. So the browser (Atom) looks for the file on disk and reads that. It doesn’t matter what you have open in the buffer associated with stylesheet.css, because no part of the process looks at that information.


#13

Thanks for this. I know it’s late, but just wanted to say much appreciated.


#14

No problem. :slight_smile: