hii all i am currently learning external css so i used link tag which helps me out with external css. So basically guys the format of link tag which it shows to me in atom is
<link rel="stylesheet" href="/css/master.css">
so the first slash in href tells about root which i don't know in detail as have not yet studied js. So i have removed it. to get the external css correctly i have done all the correct steps regarding it but the problem arises here....
<link rel="stylesheet" href="css/style.css">
( i applied this due to that i am not getting desired out put )..
So done some research and i came to point that by appling this layout of linktag i am getting desired out put
<link rel="stylesheet" href="C:\Users\KUSH\Desktop\UDEMY WEEB DEVELOPMENT 2022\css\styles.css">
this is the path of my external css folder.
but my prof is using this 👇
<link rel="stylesheet" href="css/style.css">
and she is getting desired outputs
so pls help me out with that.....
Try this:
<link rel="stylesheet" href="./css/style.css">
the ./ means that the path start from the current folder where your Html file is located
You need to put your HTML file and CSS file in same folder which make your work easierhere is the example if you I am not understandable
Related
Please help to check why I cannot link club.css to index.html.
index.html (Please note: I have to use the direct local path as the CSS link, or it will show that "some content has been disabled in this document.")
<head>
<meta charset="utf-8">
<title>The California Corgi Dog Club</title>
<link rel="stylesheet" type="text/css" href="C:\Users\leeson\Desktop\CS651 Web Systems\assignment\assignmentfall2021-Rijutady\clubProject\club.css" />
</head>
club.css (Please note that the css file is under Encoding utf-8)
h1 {
background-color: skyblue
}
The Simple Answer
Using a relative path should resolve your issue for most situations.
<link rel="stylesheet" type="text/css" href="./club.css"/>
The Alternative
You could also include the CSS directly into the HTML document, however this is not always ideal or recommended. Here's an article on that.
<style>
h1 {
background-color: skyblue
}
</style>
#NullPointDev's answer is correct. Use Relative path to your projects. It will make your work easier without errors. I just put some additional information for make your project easier.
If both HTML and CSS files in same directory, You can link your CSS like this,
<link rel="stylesheet" type="text/css" href="club.css"/>
If the CSS file is located in another directory in the directory which the HTML file located, you can use this method.
<link rel="stylesheet" type="text/css" href="name_of_the_subdirectory/club.css"/>
If the CSS file located in out of the directory which the HTML file located, Use ../ to go back.
<link rel="stylesheet" type="text/css" href="../club.css"/>
Read this Article for more info. Relative Path | W3 Schools
Now you know all the basics of Relative path. Wish you all the best.
no ,
it will be <link rel="stylesheet" type="text/css" href="club.css" />
if its under the clubproject
The solution code for your question is:
<link rel="stylesheet" type ="text/css" href = "club.css">
Your mistake : You have written the complete folder path instead of relative file path.
Advice: Have a look to the below link to clear concept.
https://www.w3schools.com/html/html_filepaths.asp
I prefer simple solution which is using relative path.
club.css
<link rel="stylesheet" type="text/css" href=".\club.css" />
Where is the problem:
URLs cannot contain spaces
I'm trying to link my css style sheet to my html file using the code
<link ref="stylesheet" href="../landing/css/stylesheet.css" type="text/css"/>
I have checked my directory link and when command clicking on the /landing/css part it takes me to my CSS file
However when I open the file in my browser to preview I cant see any of my CSS styling applying to the file
Thanks for any help in advance
html code
CSS code
browser view when opening file
Change the value for href attribute to:
"css/stylesheet.css"
Remove the earlier part as it takes you out of the folder and then back again in. See if this helps, else reply here further
I am pretty sure that you just have to do css/stylesheet.css. Not sure what the landing part is about
<link rel="stylesheet" href="css/stylesheet.css">
May be you can try this might helpful.
<link href="css/stylesheet.css" type="text/css"/>
From what I observe , you have used double dots in your "href"
You need to link it like this:
<link ref="stylesheet" href="./css/stylesheet.css" type="text/css"/>
My External css file is not linked to my html page.
I had with inside a folder with path
->app-->css-->layout.css
->index.html
In my index.html file I linked it like
<link rel="stylesheet" type="type/css" href="app/css/layout.css">
it won't link it.
i searched for the file in the chrome (inspect-->sources) and the css file wasn't listed there
I then put the layout.css and index.html in the same path.
<link rel="stylesheet" type="type/css" href="layout.css">
it still didn't work. I checked in multiple browser like chrome and firefox as well but it didn't work.
Not sure if it is causing the error(most probably is), but type should be text/css instead of type/css.
Just replace the type/css to text/css and there is no need to write full path name in href.
You can directly use the command below to get the desired result
<link rel="stylesheet" type="text/css" href="layout.css">
Its a very common mistake that everyone do... Please notice that here type="text/css" not
type/css...
Regards,
Om Chaudhary
I'm working on an real-time chat app with MEAN stack , I begin with html and css , and i'm working on cloud9 platforme, my problem is that i can't add the css file to html !! i tried many time to change the path of my css file but still doesn't work for my :
<link rel="stylesheet" href="psirt/client/views/main.css">
The path to html file and css file is :
psirt>client>views>index.ejs which contains the html code
psirt>client>views>main.css for the css file
any help please ? thnx a lot!!
Try adding a / before the path. Like this:
<link rel="stylesheet" href="/client/views/main.css">
(if your project root is psirt)
Alternatively, just use:
<link rel="stylesheet" href="main.css">
Have you tried adding type of the document to the link tag? See the example:
<link rel="stylesheet" type="text/css" href="psirt/client/views/main.css">
Also, you might want to redefine your drectory for the href.
inspect your code. I think your framework may set any basepath for your code. So your host calling that link and results in error. But i am not sure about it
I'm having trouble setting up the href of my CSS.
My projected is located at
www.mysite.com/myproject/
My css is located at
www.mysite.com/myproject/styles/css/css.css
When I'm at www.mysite.com/myproject/, everything works fine. but when i go into a directory, (www.mysite.com/myproject/dir1/) the css is no longer found. My guess is that it's looking for the css at www.mysite.com/myproject/dir1/styles/css/css.css.
I'm currently using master pages. How do I properly reference the css?
Edit:
This is currently how i reference my CSS.
link rel="stylesheet" type="text/css" href="/content/css/bootmetro.css"
but it doesn't work properly because the project is not located at the root (www.mysite.com). it is located at www.mysite.com/myproject/. So having the "/" causes the css not to load at all.
Set the css path like this, starting slash means root of the site.
/styles/css/css.css
Have you tried:
link rel="stylesheet" type="text/css" href="../styles/css/bootmetro.css"
Assuming you are using ASP.NET, try like this:
<link rel="Stylesheet" type="text/css" href="<%= ResolveURL("~/content/css/bootmetro.css")%>" />