Html Question posted in
Some basic documentation can be found here.

Html – CSS style not recognized in firefox when localhost is run

I have tested a simple html file with css styles.
Basically the correct output should looks like this (I was able to get this correct output in vscode):
enter image description here

however, when I run localhost in FireFox browswer, the output I got doesn’t have any css styles:
enter image description here

I have checked the developer tools in firefox and noticed a warning called "Ruleset Ignored Due To Bad Selector":
enter image description here

Does anyone know how to fix the problem? I have checked multiple times my CSS files and how I used them in the HTML file, and there should not be any syntax problem. However my Firefox browswer just don’t display any CSS when I run localhost.

this is my css file:
enter image description here

and this is my HTML file:

enter image description here

and finally this is the stylesheet output from the Developer Tool in Firefox (notice on line 22, there is only the tag), so not sure why the error messages says line 22:
enter image description here

could anyone give me some suggestions? thanks

I have went through numerous other related posts on stackoverflow (like CSS Styles Not Recognized, etc) but still have no luck.

Tags:

2

Answers


  1. 0

    There are two things you should consider,

    1. Recheck the stylesheet path. Make sure it’s correct
    2. Load the site using a server (like Live Server). User vscode live server Extension. Sometimes CORS policies restrict files (stylesheets) from loading
    Login or Signup to reply.
  2. 0

    I wonder why you didn’t include snippets of the html code file to show how you included your css file. This is crucial. Ensure you have used the correct relative/absolute links to link to your stylesheet. eg.

    If you were using localhost/index.html to view your html file, then try using

    http(s)://localhost/css/styles.css

    to link to your file.

    Also consider using the invaluable developer tools to check for any errors trying to get your stylesheet on load. Hope this will be helpful.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search