Why does my CSS file does not load? Electron js - html

Here is the error I get:
Everything works perfect without electron js and the path I entered was provided by VS code itself.
I'm using Electron js v16 and have to put my css files inside app folder.

You're using absolute paths to reference your CSS files from your HTML. By doing this, it is attempting to get those CSS files from the root directory (e.g. "C:/"). Try using relative paths. As an example for your case:
<link rel="stylesheet" href="../css/all.min.css">

Make sure you have a folder in your root called css. If you don't, remove the /css/ part. Also, make sure the spelling is correct. Note that files are case-sensitive, so check that as well.

Try using ./css/etc. instead of /css/etc

Related

Problem with html and css linking them together

I just started using html and css and I have to do something with it but I am getting the error Unable to open 'style.css'. I don't know what the problem is since the path that I used is the same as the file path.
Make sure the CSS file and the HTML file are in the same folder.
based on your image it should be
href="mywebs\site\style.css"
if you want to link site/style.css to mywebs/smth.html you should go one folder back.
<link href="../site/style.css">
or put the site folder inside mywebs, because based on the picture the site folder is not inside mywebs folder.
Sometimes the file may missed directory. You can close and open the code editor and it will work. Also, make sure your html and css file is in same directory. If you css file is in a different directory then use the following code:
<link type="text/css" href=".../style.css"/>

File exists but, Status 404 File not Found

First of all, I'm using Chrome browser for development.
I have placed the files in the following order:
In Markup, I placed its reference like this:
<link href="App_Data/css/bootstrap.min.css" rel="stylesheet" />
This is the original path: root/App_Data/css/bootstrap.min.css.
The file is available at the path, but still, the browser can't find the file with an error shown in the picture below:
I am confused. Why is it not able to find the file from the correct path? :S
What mistake am I making? (My previous question was also about the path. I tried following my last question's guide, but that also is not resolving this issue. Please look into it and tell me the possible issues. Thank you).
App_Data is not typically used to publish web content, and is not published by default.
I'm sure App_Data is a special folder in MVC, consider moving the files in to a "content" folder or something (as is the standard).
Also try prefixes like "./" or "/" or "../" as depending on the url of the current page you may want to have a different path for these resources or always generate one that's relative from the root of the site.
I've just found a solution with the help of someone who commented here but deleted the comment. He was correct! I couldn't see his nickname. I'd prefer him to answer, i'll Tick his answer.
APP_data folder in asp.net doesn't let browser load Css and JS files as this folder is standard for Class files e.g. ( abc.cs ) .
I just moved all of these files in a new folder i created with the name Content and moved all css and js files in it, referenced it in Html and it worked like a charm.
Try relative path as below, it might help you-
<link href="../css/bootstrap.min.css" rel="stylesheet" />
You have to start with the root of your application.App_Data is just a folder in Microsoft Visual Studio context.Once you publish your app it will not be the same.
For your question, this would be the solution:
<link href="/css/bootstrap.min.css" rel="stylesheet" />
This will resolve the path from the app root.

How to link external CSS stylesheets on a Chromebook

I'm developing a website and I need to use external CSS stylesheets.
The only drawback is I'm using a new Chromebook after migrating from Windows.
I'm using CDE, so how should I link an external stylesheet to an HTML file?
To be more specific, how do I find the full file path of a CSS file on a Chromebook?
For all of the noobs out there, I figured it out.
You have to link an external stylesheet (if on a Chromebook) using relative linking, so what you will want to do is this:
<link rel="stylesheet" type="text/css" href="name_of_stylesheet_in_same_folder_as_html.css">
Basically, keep your CSS file in the same folder as your HTML or Javascript file and it will most likely work when there is no standard full file path.
Can you view the css directly in the browser? If so, whatever url you're using should work. If not, perhaps something else is going on. Chromebook should be no different from any other browser.

Add CSS to multiple html files

I have many html files, all named index.html but being in different subdirectories.
These files are created by a software. After these files being created, I want to add a Stylesheet to all of them!
If i use SEARCH:"<head>" and REPLACE:"<head><link rel='stylesheet' href='/style.css'>" it wouldnt work because the files would need relative paths.
Any idea how I could achieve my goal? While Iframes are oldschool they do not use the CSS of the main page i assume.
Other ideas?
You could use an absolute path to your CSS-file. Then it doesn't matter that they're in different paths:
<link href="/styles/site.css" ...
Now every file will look up the styles-folder in the root, and the file site.css in that folder
Just use the absolute path as you mentioned.
And DO NOT open your html files directly in the
file://D:/path/to/your/file/index.html
because the root path '/' means D:/
You should setup a http server to host your pages and open them by visiting like
http://localhost/url/to/your/file/index.html
the root path '/' means
http://localhost/
Or upload them to a server.
In this way the absolute path of your css will work correctly.
Forget the relative paths.

Base URL that works for html in files and on website?

Like many developers I put my images in /images, css in /css, and js in /js. This way, no matter what the URL/directory structure, the site can simply reference /css/style.css or /js/jquery.
Problem is when I try opening the html from a directory, the paths are screwed up. It assumes / is C:/
I'd like to be able to preview html files in a directory before putting them into a CMS on the web, but don't know how. Can somehow be used to handle this with minimal hassle?
Using root-relative links is great but, as you see, can cause issues when working locally.
Ideally, you'd set up a local web server on your machine and preview that way rather than just using the file system.
By putting a slash in front of your path, you're making it an absolute path. You should use absolute paths as rarely as possible - instead, use relative paths.
Say you have a directory structure like this:
/website
/html
/css
style.css
test.html
script.js
/newcss
newstyle.css
If you're in test.html and you need to refer to style.css, the relative path would be css/style.css. If you need to refer to script.js, the relative path would be just script.js. If you need to refer to newstyle.css, the relative path would be ../newcss/newstyle.css (the .. means "go up one directory level").
This has the benefit of making your code portable - you could copy the website folder anywhere you wanted, on any system, even to your websever, and it would work. Both *nix and Windows systems obey these rules.
You could consider setting up a local server like XAMPP. That way, your files will be previewable on http://127.0.0.1 and your absolute paths can be made to work just like on the web. XAMPP comes with a default htdocs directory into which you would put your file structure.
It may take some time of setting it up and getting into it, though.