I have separated some HTML files other than index.html and CSS too. It is working well in VS code but on creating Git Hub pages only index.html file is running.
Here is my repository:- https://github.com/shashi-singh18/BlogWritingSite
please help!
Change you links to the following structure
src='./css/utils.css'
Your current paths force your index.html to search for a sub-directory "BlogWritingSite" which does not exist at that reference level.
I saw your repository and noticed some errors when linking your css file in index.html
<link rel="stylesheet" href="/BlogWritingSite/css/utils.css">
<link rel="stylesheet" href="/BlogWritingSite/css/style.css">
<link rel="stylesheet" href="/BlogWritingSite/css/mobile.css">
change for
<link rel="stylesheet" href="./css/utils.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/mobile.css">
and
change the name of your css folder to lowercase letters
after
CSS
fixer
css
I think the error is in the address of the CSS files
Here, you should have given the address of each CSS file, relative to the index.html file and not the project directory as a whole
Try changing these link tags to this and tell me if it works.
<link rel="stylesheet" href="./CSS/utils.css">
<link rel="stylesheet" href="./CSS/style.css">
<link rel="stylesheet" href="./CSS/mobile.css">
Related
i spent the last hour figuring out why my style sheet is working.
enter image description here
I tried every possible way, but none of it works.
It just shows error 404 when i check it in the developer mode of my browser.
I tried
<link href="style.css" type="text/css" rel="stylesheet" />
<link href="./style.css" type="text/css" rel="stylesheet" />
<link href="../style.css" type="text/css" rel="stylesheet" />
<link href=".../style.css" type="text/css" rel="stylesheet" />
I also placed the the css file in the same file as my header.php.
The path to the css file is a relative path from the file that's called from the browser, and that's most likely not header.php.
If you start the path with a / it's considered relative to the webroot, so you probably want /css/style.css. Note that you cannot go up (using ../) from the webroot.
../ is meant to go back a folder so if my folder layout is
Root
css
style.css
includes
header.php
I have ho down a folder and enter the css folder like:
<link rel="stylesheet" href="../css/style.css">
You are using many link tag to integrate the css file in you html file. You should use one tag and it would be a relative path like the following <link rel="stylesheet" href="/css/style.css">
I need some help here.. I tried different links but it does not load the CSS file..
<link rel="stylesheet" type="text/css"
href="https://github.com/cengizkirazjs.github.io/cengizkiraz.github.io/styles.css">
This is the page and the outcome: https://cengizkirazjs.github.io/cengizkiraz.github.io/
Any advice? Its my first time linking CSS with HTML on Github!
As it was said in the comments, what do you think about changing file path a bit?
In your code we have this line
<link rel="stylesheet" type="text/css" href="cengizkiraz.github.io/styles.css">
It contains an absolute path. If you want to stick to this method, maybe just add a protocol, like this
<link rel="stylesheet" type="text/css" href="https://cengizkiraz.github.io/styles.css">
But it would be better if you use relative paths
In this case, our <link> will look like this
<link rel="stylesheet" type="text/css" href="styles.css">
It means that HTML will search for this file in folder, where .html file is saved. Looks slightly better, doesn't it?
So I am working on personal website project. And I am using html template of w3school. They use css file from online source:
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css">
Everthing works fine until I download all the css file locally and load them from local position like below:
<link rel="stylesheet" type="text/html" href="./assets/w3.css">
<link rel="stylesheet" type="text/html" href="./assets/google_raleway.css">
<link rel="stylesheet" type="text/html" href="./assets/font_awesome.min.css">
The form of website is totally wrecked after I use local css file instead of online source. I inspect the page and in console, there is no error message on css part. I don't know why it is not working locally.
Just Download all css in one folder.
And get full path of that files.
Example:
You Downloaded Files in below location (i am using D drive(asset folder in D drive) as an example here) of your computer:
D:\assets\w3.css
D:\assets\google_raleway.css
D:\assets\font_awesome.min.css
<link rel="stylesheet" type="text/css" href="D:\assets\w3.css">
<link rel="stylesheet" type="text/css" href="D:\assets\google_raleway.css">
<link rel="stylesheet" type="text/css" href="D:\assets\font_awesome.min.css">
If this works in full path means there is an error in you relative path you given.
So just do small research to set relative path.
I am using Windows (7) trying to create an offline html page that should link to a separate CSS file located in same directory. I tried to use
<link rel="stylesheet" type="text/css" href="/styles.css" />
but no luck.
And I also want to import another css file named styles2.css within style.css. Didn't check yet but putting #import "style2.css"; on style.css may be not work as well. I can use absolute links like C:\Users\ELITEBOOK\Desktop\offline\style.css but it won't work if I move the folder anywhere else from Desktop. Any help? I mean, any code that calls/adds the link of the folder?
Use <link rel="stylesheet" type="text/css" href="./styles.css" /> instead. Note: href="/styles.css" changed to href="./styles.css", which is current directory of your script.
While the accepted answer is not wrong it's over-complicate things.
If your file is https://www.google.com/b/bananacream/bananas/index.html
<link rel="stylesheet" href="/style.css">
Will try to get https://www.google.com/style.css as the last / tells the file is located in the "root" folder.
<link rel="stylesheet" href="style.css">
Will try to get https://www.google.com/b/bananacream/bananas/style.css as nothing indicate what folder the file is located in it will use the same folder as the requesting file.
<link rel="stylesheet" href="./style.css">
Will try to get https://www.google.com/b/bananacream/bananas/style.css as ./ tell that the file is located in the same folder as the requesting file.
<link rel="stylesheet" href="../style.css">
Will try to get https://www.google.com/b/bananacream/style.css as ../ tell that the file is located in the previous folder as the requesting file.
<link rel="stylesheet" href="../../style.css">
Will try to get https://www.google.com/b/style.css as ../../ tell that the file is located in the folder two steps before as the requesting file.
A general complete answer:
to address through existing folder, use:
<link rel="stylesheet" href="./style.css">
to address through parent folder, use:
<link rel="stylesheet" href="../style.css">
to address through the internet( CDN ) use:
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3./css/bootstrap-theme.min.css"
>
to address through your hard drive use:
<link rel="stylesheet" href='file:///C:/mystyles.css'>
try this one, it worked for me.
<link rel="stylesheet" href="./main.css">
I have created
a static html page in a play 2.2.1 project.
My public folder looks like that:
These are my stylesheet links:
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="assets/css/social-icons.css">
<link rel="stylesheet" href="assets/css/coming-soon-style.css">
However, when I open the site I only get the html.
I appreciate your answer!
UPDATE
My routes:
GET / controllers.Assets.at(path="/public", file="comingSoon.html")
GET /coming-soon_followUpPage.html controllers.Assets.at(path="/public", file="coming-soon_followUpPage.html")
Move all files/folders from /public/assets/ directory one level higher, so for an instance instead /public/assets/bootstrap it should be /public/bootstrap
As I can see you are using default route for assets, which means that every file/folder placed in /public folder will be available with assets/file or assets/folder within your templates.
If you are gonna to keep them in /public/assets/file.css style you just need to use proper path in your templates, ie.:
<link rel="stylesheet" href="assets/assets/bootstrap/css/bootstrap.min.css">
Anyway as you can see it doesn't make sense ;)
Hi you're linking in the wrong way your css files, you have :
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
With this you're searching on the same level the folder assets but that is the parent and you don't need to reference this then you only need:
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
You also can try adding / at the begin of the path:
<link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">