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

Html – CSS file only works with live server on visual studio code

I backed up my files on Github and now the CSS file ONLY works when I open it through a live server. It does does work when I select view with default browser nor when I open the html file.

i tried looking online for help, I tried relinking the CSS page. The code is fine and works with live server only.

this is how I linked the CSS:

<link rel="stylesheet"  type="text/css" href="/Root Directory/first-fantastic-engine-1/Root Folder/Home page/Fun project/CSS/style.css"/>

Im new to coding and I made alot of files a while back for my code.

Tags:

2

Answers


  1. 0

    Like the others have suggested, it could just be an issue with path. Hard to provide the definite answer without taking a look at the error. If you can provide that it would make things easier.

    As far as folder structure goes, there are some basic principles that you can follow such as using camelCase or kebab-case.

    Take a look at this – https://ecss.benfrain.com/chapter5.html
    Folder structure and naming conventions are some of the first things i would recommend to learn if you are a newbie.

    Login or Signup to reply.
  2. 0

    You described a case when your CSS file does not show properly without a live server. It might relate to one of the common problems that are usually solved by checking a couple of key things. Here are some steps that will help you troubleshoot and fix the issue:

    1. Check File Path:
    • The file path you provided in the <link> tag appears to be very specific and might not work when opening the file directly in a browser. Here’s a simplified version of your link:
    <link rel="stylesheet" type="text/css" href="CSS/style.css"/>

    This assumes your HTML file and the CSS folder are in the same directory. If they are not, adjust the path accordingly.

    1. Use Relative Paths:
    • Live servers handle file paths differently compared to directly opening files in a browser. Try using a relative path like this:
    <link rel="stylesheet" type="text/css" href="CSS/style.css"/>

    If your CSS file is in a different directory relative to your HTML file, make sure to navigate correctly:

    <link rel="stylesheet" type="text/css" href="../CSS/style.css"/>
    1. Avoid Spaces and Special Characters:
    • Your original path includes spaces and special characters, which can sometimes cause issues. Make sure your directory names are simple and consistent.
    1. Check Browser Console:
    • Open your browser’s developer console (usually by pressing F12 or Ctrl+Shift+I) and look for any errors related to loading the CSS file. This can provide more insight into what might be going wrong.
    1. Verify Directory Structure:
    • Double-check the actual directory structure on your local machine to ensure that the paths in your code match the locations of your files.

    If you’re still having trouble, providing more details about your directory structure or any error messages you’re seeing in the console can help the community offer more specific advice.

    Have a nice day <3.

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

Back To Top
Search