Atom-live-server online display HTML not CSS

Hello everyone,

I’m new to the community.
I started coding Html and CSS some weeks ago.

I used the plugin live server on Atom and at first everything was working but then it stopped displaying CSS although HTML is functioning properly

Does anyone have had the same issue? how can I fix that ?

Thanks in advance for your help.

PS: I’m not fluent in English so if you struggle understanding something let me know and I will try my best to rephrase it.

You appear to be linking to InProgress/css/… instead of just css/.

Also open developer tools and inspect your form elements to see this.

I tend to use PHP server which would report that main.css cannot be found (even if you do not use PHP).

1 Like

Thank you !
I change the path to css/main.css and it worked.

I just want to be sure that I really understand my error.
Did I miss something on the path ?
Or is it better to write a short path linking directly to the right folder/file ?

About the developper tool do you mean the one who is in my browser ?

Even if it worked with the solution you gave me.
I downloaded the PHP server and I tried to lauch the PHP Server on the css folder.

The error :

Listening on http://localhost:8000
Document root is /home/jester/Desktop/Exercice/InProgress/TributePage
PHP Server could not launch
Have you defined the right path to PHP in your settings? Using php

How do I do that fix that ?
Do I have to use PHP now ?

For further reading click on Help > Documentation and you will be taken to the Atom Flight Manual.

https://flight-manual.atom.io/

Reading here …

https://flight-manual.atom.io/getting-started/sections/why-atom/

you will learn that Atom is embedded in a browser.

e.g. View > Developer > Toggle Developer Tools

opens a panel which allows inspection of the inner DOM structure.

You can inspect how stylesheets are applied to elements.

======

Now the PHP Server message you report suggests that you need to define the path to your binary php.exe file.

Check your path to PHP executable by running this command in Windows terminal.

php -v

You will see the full path to php.exe.

e.g. C:\PHP\php.exe

I refer you to earlier threads
PHP server requires that you specify the full path to php.exe.

Atom > Edit > Preferences > Packages > wait for them to load …

then search PHP Server > Settings

scroll down to … Path to PHP Executable

paste in the full path to php.exe in Windows (obtained from earlier command php -v).

Running PHP Server does not require that you write your code in PHP. It just offers more feedback when you encounter errors.

======

Since English is not your native language I point you to

https://www.w3schools.com/

Click on the globe icon top right and you can select your native language for tutorials.

Here is reference to file paths (from index.html as your document root).

https://www.w3schools.com/html/html_filepaths.asp

======

In your example you could navigate up the DOM tree using ../ for each level above index.html.

For example try ../../InProgress/SurveyForm/css/main.css

However note that some servers block access above document root (index.html).

It is safer to refer to files below index.html

css/main.css
or
./css/main.css

These all refer to assets placed local to your index.html

Another approach is to place your css and js and image files (assets) in an external CDN repository such as Cloudinary. There is a free account for sole developers.

Cloudinary

However with external assets you need to always have internet connection. CDN is for when you deploy to cloud.

1 Like