My css is not linking to HTML


#1

anyone can help me ? I have checked the code several times. FYI the stylesheet and the html are on the same directory.


#2

What does the CSS file look like? Does it work when you open the HTML file in the package browser-plus (once you’ve installed it, just hit ctrl-shift-p as always and start typing browser-plus:open and you’ll see it)?


#3

I saved the css as .css on the same directory as the html. When i use the html preview of atom the css doesnt apply and also not when i preview on my browser (chrome). But i am not sure i understood what you mean, are those atom packages?

Thanks a lot, i am quite new to this.


#4

Currently I am building a file structure in Atom for a web site so I can offer some steps I have taken. Note that you will read many variants (packages) for previewing HTML and assets and this is only one approach which I find useful. You may read advice to try other packages.

First you ask “are these Atom packages?” They are and you can get more information by going to the Packages link in top menu bar at top of this forum page. There you can search packages such as browser-plus.

You can see the list of packages already installed in your Atom setup by running the command

apm list

And you can run the command

apm --help

to see all the command line options. Read more in the Atom Flight Manual.

The installation of packages is a personal choice.

After trial and error I settled on these for my own HTML/CSS/JS development.

apm install file-icons

This attaches pretty icons to your files listed in tree-view. Look at the icon attached to your HTML and CSS files.

I would also install this theme … monokai-seti

apm install monokai-seti

Next install php-server …

apm php-server

This package has more value if you plan to use PHP, but as you may find it also helps in previewing plain HTML After installing php-server in tree-view panel highlight your index.html file, right click, and select “PHP Server here” from the menu.

With any luck you will see a command line report showing the processes in launching a localhost web site on port 8000. If files cannot be found you will see this as errors.

If the experiment is not to your liking you can reverse the process of installation …

apm uninstall <package-name>

After installing packages it is advisable to reload/refresh Atom by running the command …

Ctrl+Alt+P

Window:Reload

Note my caveat that php-server usually serves PHP but it can be used to preview any HTML/JS/CSS file set in local browser. I am also trying browser-sync.


#5

Thanks a lot for your help! It turns out the html preview function was trolling me big time, the css was well linked all along but my progress was not showing on the html preview function and also not on the browser because i forgot i had to save for the changes to be shown when i refresh the page on the browser (really dumb mistakes that happen…haha).