CSS help: Linking to html


I know there are lot’s of noobies having the same problem but I’ve tired everything and need to figure out if atom is the reason.

I’ve linked my test css stylesheet and I’ve made some changes to the body and saved it again but it doesn’t seem to link any of my recent changes to my html page. I am using the html preview but either it doesn’t refresh all the time or I am doing something wrong. Do you just write html and css in the same file? I read you shouldn’t do this but it’s the only way it works for me.

I’m learning how to code so please be patient. First, I am trying to make a one main stylesheet template to use across my several pages on my website. I’ve tried copying several simple css commands and nothing seems to work. The example I’ve uploaded is from Help me please before I quit trying to learn this!



Does your HTML and CSS work outside of Atom (e.g. if you open your HTML file in a web browser)? If it doesn’t, then my guess would be Atom isn’t the issue.

Can you share your CSS file and point out something that isn’t reflected in atom-html-preview (it looks like your blue background is getting picked up at least)? I installed it to test and it seems to live update when I make a CSS change but you could also try toggling the preview on/off.


hi @rsese! Thanks for the reply.

I installed Atom last week, so it’s the latest version. I also am using atom-html-preview and an auto complete plug-in.

Yes, the code works fine in another program, I tried Text Wrangler and it works. The CSS sheet is linked to my html files and everything is in order. I stopped using atom for the time being. I’m not sure what I can do, there are some plug-in features in atom that are great but I spent many hours wondering why thing weren’t working and linking. Since switch to another editor I can work and see the file perfectly. I just tried opening up my most recent file and it looks like a disaster in html preview in atom but works fine when I open it up in my browser. I’m worried about wasting more time, as a new coder my learning curve is high and spending hours scratching my head is pretty infuriating.


So you’re saying it works when you open it in a browser, but not in the atom-html-preview preview pane?

If so, it’s an issue with the package, and not Atom itself. You may need to raise an issue on it’s repository, if it doesn’t already exist.


Understandable. However, the learning curve in this case involves a package that appears to be behaving poorly. Community packages come from a variety of sources and each one is its own endeavor to understand. Sometimes a bug is uncovered. The community here is generally very good at pinning down those bugs if provided with enough information, and anything you feel like you have trouble putting together from the documentation is a good question for this forum.

The package I have used for previewing HTML is browser-plus. I haven’t had much trouble with it, but I barely ever use it.


Wow I just re-read what I wrote, but I said it backwards, sorry about that! I was trying to say more what @Aerijo said. If your site works in other places but not Atom, then the issue could be with Atom (though more specifically in this case, the community package you’re using with Atom).

Feel free to share your HTML and CSS files if you’d like so we can give it a try - it’s easiest to try to reproduce and investigate when we have the exact same files you’re using.