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")%>" />
Related
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
I've been trying to connect html with the CSS.
I've checked that:
The stylesheet path of the css is correct, and it is: css2/css2.css
The <link rel="stylesheet" type="text/css" href="css2/css2.css" /> code is well written and I think it is.
I also tried to try several code editors in case it was a preview problem, I've already tried Atom and brackets and the two do not show that the CSS gets connected.
HTML code :
The html close tag is written too at the bottom.
CSS
here is where the html and CSS file is placed
As you have mentioned in your statement that css files is css/css2.css
so it means you should link css file by this code.
<link rel="stylesheet" type="text/css" href="css/css2.css" />
You added css2 instead of css as folder name
This code will 100% work, Just make sure your HTML file and CSS2 folder need to be on same level (in same folder).
otherwise this CSS file not link to your HTML.
I've used inline and imported css loads but having trouble with external and never tried it before.
I copy and pasted everything from this link css link
into a css file, I don't actually know specifically which animations I want to keep and get rid of yet, that will come later.
How do I actually add it into the html though? In the Header I have the
<link rel="stylesheet" type="text/css" href=\animate.css">
link so my html is inked to my css.
If I wanted to add for example .animated.hinge to a <p> how would I do this?
Preferably without any javascript or php, haven't progressed that far yet!
Thanks!
The problem is that you are using a backslash instead of a forward slash and missing a double quote when you are linking to the CSS file.
<link rel="stylesheet" type="text/css" href="/animate.css">
Web sites are all about files. If you have a file called animate.css in the same folder as your index.html, you can simply call it with the next tag
<link rel="stylesheet" type="text/css" href="animate.css">
This means that you are referencing the animate.css file. There you select your objects by clases and just use them in the html file.
Also you would add classes to the p element like so
<p class="animated hinge">Paragraph</p>
We can include external css file through the link tag in head tag. Please see below syntax for the same. also check the file path(href path), it should be relative or absolute.
<link rel="stylesheet" type="text/css" href="/custom.css">
You are missing one double inverted comma at start and you have to use '/' in the href attribute instead of '\'.
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 have 2 pages:
http://local.host:8080/test/login
http://local.host:8080/test/admin/manage
Added css in login.jsp using c:url:
<c:url value="css/style.css"/>
When I open 1st link - everything works well. I tried to add the same style.css file to manage.jsp (2nd URL), but when I open 2nd link - css is not included. In Page Source I have:
<link rel="stylesheet" type="text/css" href="css/style.css"/>
How to define to take style.css from the root of URL (http://local.host:8080/test) ?
I think it is, because the specified path is relative to the current page (login is at an other level of path-nesting* than admin/manage).
A trivial but bad solution would be adding ../ for the css of admin/manage. But this soultion has the drawback, that you always need to adjust the ../ when you change the level of path-nesting* for an page.
To overcome this problem, make the path in the c:url-tag start with an /! (this make the tag aware that the url is context relative (relative to http://local.host:8080/test/), and the tag will automatically addhttp://local.host:8080/test` in front.
<c:url value="/css/style.css"/>
will be rendered to : http://local.host:8080/test/css/style.css
For the link use this way
<c:url value="/css/style.css" var="cssUrl"/>
<link rel="stylesheet" type="text/css" href="${cssUrl}"/>
*I do not know the correct term for "path nesting" at the moment - fell free to change it
Order of attribute might be the problem. Correct the order
<link href="css/style.css" rel="stylesheet" type="text/css" />