I've using bootstrap and file and folders is like this
root/css/..
When I include <link id="bs-css" href="css/bootstrap.min.css" rel="stylesheet"> it is working for files in root folder. But if I have file in another folder and trying to include css doesn't work. It doesn't show any style. For example
root/users/profile.php
then I include in profile.php like this
<link id="bs-css" href="../css/bootstrap.min.css" rel="stylesheet">
I've also tryed full path again didn't work properly. But if I put inside /users/ css file or full folder is working href="css/bootstrap.min.css"
You can change the link to be the full path from your URL like this:
<link id="bs-css" href="yoursite.com/css/bootstrap.min.css" rel="stylesheet">
That should work from any page.
Try using href="/css/bootstrap.min.css" This should work no matter where your php or html file is located. This is called a relative path. So..
<link id="bs-css" href="/css/bootstrap.min.css" rel="stylesheet">
As long as css is a direct child of the root, this should find it.
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 have created a few html-pages and one CSS-page inside a folder (Webservice). At first I just used to reference to my CSS-page like this because they were in the same folder.
<link rel="stylesheet" href="style.css">
Then I wanted to make it look more clean so I created separate folders for html and CSS within the already existing folder (Webservice). The new folders were named html and CSS. If I do it like down below it works, but I need to be able to access the files on other computers/devices as well.
<link rel="stylesheet" href="file:///Users/home/Desktop/Webservice/css/style.css">
It does not work to do like this:
<link rel="stylesheet" href="css/style.css">
How do I solve this?
You will have to use ../ inside the html folder to go to the parent folder.
And then you can access the css folder so your link will look like this:
<link rel="stylesheet" href="../css/style.css">
By using a relative path, it will work on your other computer.
You have to set the relative path to your CSS style from HTML file.
To view more https://desktop.arcgis.com/en/arcmap/10.3/tools/supplement/pathnames-explained-absolute-relative-unc-and-url.htm
I'm linking my .CSS file and Bootstrap 4.2.1 to my HTML file. The .CSS Isn't linking correctly. What is the correct way to link my .css to an HTML file? Bootstrap works but not CSS
I have tried changing the order of the links.
I have also made sure my HTML and CSS files are in the same folder
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="stlye.css"/>
you wrote stlye instead of style? maybe it's just the mispelling
or you might need to specify the path for your css
something like this before your css file ~/filename.css
<link rel="stylesheet" href="stlye.css"/> should be <link rel="stylesheet" href="style.css"/>
You spelt style wrongly. Also make sure style.css is in the same folder/path as your index.html (or whichever .html page you are using), else be sure to specify the path like so: /example/style.css.
Check that the style file exists and you are importing your stylesheet with the correct name and relative path. That means use <link rel="stylesheet" href="style.css"/> if your css is in the same folder of your html file. Otherwise provide the correct route for your file. For example would be <link rel="stylesheet" href="./app/assets/style.css"/> if your css is inside app/assets folder.
I have a weird/frustrating problem. I'm trying to link my CSS stylesheet to my HTML and when I check in the Chrome dev tools what the file looks like live (rather, why my styling isn't working), I'm getting an entirely different file showing as my .css file.
Here's my file directory:
- app
- public
- file1.html
- file2.html
- assets
- style
- reset.css
- style.css
And here's the head of file1.html:
<script src="https://code.jquery.com/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="../../assets/style/reset.css" />
<link rel="stylesheet" href="https://unpkg.com/purecss#0.6.2/build/pure-min.css" integrity="blahblahblah" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/purecss#0.6.2/build/grids-responsive-min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="../../assets/style/style.css">
The last line is my relative path.
The contents of file2.html are showing up as the contents of style.css when I look at it through dev tools, but all that really is in style.css is some styling for the h1 element. Am I just being a dummy with the relative file path for the CSS file? I thought maybe the other CSS stylesheets were impeding this style sheet, but commenting them out still results in the contents of file2.html as my css file. What am I missing?
Your path seems to be right, but it could be because you are missing a closing quotation for your integrity attribute.
So this is within an express app and I hadn't served up my public folder so that it could use it to access static files.
Needed this:
app.use(express.static(path.join(__dirname, '../public')));
Your third link is missing a " after blahblahblah.
Try fixing that.
I have linked the w3.css stylesheet in my html (as suggested at w3schools) to utilize their responsive template but it doesn't appear to be working. I have linked it as such within the head tag of my html:
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="w3-theme-brown.css">
Am I missing something?
Make sure your CSS code is in your .css file, and your HTML and CSS files are in the same directory if you are using <link href="File.css" rel="stylesheet"> and not writing the directory.
Also, don't forget to put your link tags between opening and closing head tags.
It should look like the example I posted below.
If it's still not loading then it would to do with the location of your stylesheets(css).
Example - href="path/to/stylesheet"
The path would start from the current directory your HTML is in... so if you had index.html in the root directory and your css files a sub-directory then the example would look like this.
Example - href="css/w3.css"
Example - href="css/w3-theme-brown.css"
//HTML
<head>
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="w3-theme-brown.css">
</head>