CSS doesn't work. Please help!


hello there. I started to learn html and css and Atom seems like a very good editor for practicing, but there is a thing…the Preview window ignores every CSS command. If I save the file and open it in a browser, it works normally, but i can’t see any changes in the Preview. Please Help
thank you in advance :wink:


You need to give us more information about what you’re doing. Please take a screenshot of the HTML file and the CSS file side by side in Atom with the directory tree expanded so that we can see where both files are.



What package are you using in that picture?


please forgive me if I am too unaware, but how do I check that ?


You can look at your packages list to see which preview packages you have installed, and you can look at the process for opening the preview pane and see which package menu or keybinding you’re using. If you’re using a keybinding, you can press ctrl-. to pull up the Keybinding Resolver, which will give you the name of the command (which virtually always contains the name of the package).


how to make the button invisible when it s clicked and on click the referred content must be shown not the button ??



I don’t understand what you’re talking about. If you give me a screenshot to show me what button you mean, then I might understand better.


@benen89 Okay, so that package is specifically for previewing markdown, not HTML pages. You should check out a package designed to support HTML, such as browser-plus.


thank you very much DamnedScholar, thank you for your time and patience. A package to support html is what I needed. the one that you’ve suggested me is not so good but I found another that is just perfect. if someone is interested, please search for “atom-html-preview” package by harmsk. it is all what you need :slight_smile:
thank you and make sure you have a beautiful day :wink:


and here I come again with another issue :frowning:
now that the atom-html-preview package works, I can write css commands in the html file and the preview works great. But when I link a css file to the html file, the preview doesn’t show it. what would be the right package for that, as I got one (css-spy) but it doesn’t make any changes. thx)


ok, my bad :slight_smile:
when you make some changes in the css file, the preview will show it right after you press ctrl+s ( save). little mistake but hope it will save someones time ^^
thx again


here, if you see in pic ,
i want, when i click the “click” button everything else should be invisible(means the whole content on the page that is there) only the “alert box” should be visible??


You can’t do it that way. When you use window.alert(), you aren’t creating a new object on the page. You’re creating an entirely new dialog window. That’s why it has a title bar and a close button.

I understand what you’re trying to do, but I don’t understand how you plan to use it. If you give me more information, I might be able to suggest another approach. I gather that English is not your first language, which is all the more reason why you should tell me as much as possible.


as shown in image , i want, whenever i click the button “click” , everything present before clicking (like the black image,hellooooo content) should be removed only the heading “WELCOME” must be sen which is present at top and the alert box.
hope you get it !!


What is the alert box supposed to do?


it should only display the content that is provided inside it !


If it doesn’t let the user get rid of it somehow, then it’s not going to make people very happy.


i am asking that whenever i click the click btn then the heading “welcome” and the alert box must be only seen , rest of content should be made invisible.
hope u get it !
and the alert box is not supposed to do anything it should only alert te content provided.