I am trying to link my CSS and HTML. My CSS file is in static folder where as index file in templates folder.
code : Header of index.html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BMI App</title>
<link href="C:\Users\Shweta\MFRTPPython\static\main.css" rel="stylesheet" type="text/css">
</head>
Even after providing it's proper path, I am unable to link them.
Try using below way, it is almost similar of what you've used but you need to know how to locate the external file.
If you have a file in a location which is outside from the project folder then you can try something like this:
<link href="file:///C:\Users\Shweta\MFRTPPython\static\main.css" rel="stylesheet" type="text/css">
OR
if you know about how absolute and relative path works then below is what you can try:
<link rel="stylesheet" type="text/css" href="./yourDirectory/yourFile.css"
My advice to you is to create a folder in your project and add that stylesheet file into that folder and refer that path in the html.
Kindly go through this path for better understanding of absolute and relativepath.
Related
I have written my html and css code, but both the files are not linking. I am unable to find any error in the codes.
This is my html file
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>basicapp</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="static/css/basicapp.css"/>
</head>
<body>
<ul>
</ul>
</body>
</html>
The file structure is:
/desktop/templates/index.html
/desktop/static/css/basicapp.css
The answer has been provided to you, but here is some more information:
/ is an absolute path, e.g. /index.html will be at the root of your server, or on your PC most likely C://
or ./ the folder in which the current file resides, this is actually what is happening in your case. static/css/basicapp.css will take you to /desktop/templates/static/css/basicapp.css
../ is the parent relative to the current folder (hence the answers supplied).
Example
Let's say you have the following structure:
/folderA/folderB/index.html
/folderA/folderB/fileA.html
/folderA/folderC/fileB.html
Say you're in the index.html :
To get to file A: ./fileA.html or fileA.html
To get to file B: ../folderC/fileB.html
I left out the absolute paths since they tend not to be recommended since you might not know the true root of your website.
Your code
<link rel="stylesheet" type="text/css" href="../static/css/basicapp.css"/>
By Rashed Rahat
Read more
Edit: Applied Heretic Monkey's comment.
As Poney says in their comment: The path of your css file is related to the path of your html file. Try with href="../static/css/basicapp.css"
As you mentioned:
- desktop
- templates
- index.html
- static
- css
- basicapp.css
As your CSS is on another folder so you have to link any following way:
Try relative path:
<link rel="stylesheet" type="text/css" href="../static/css/basicapp.css"/>
Or,
Try absolute path:
<link rel="stylesheet" type="text/css" href="/desktop/static/css/basicapp.css"/>
My CSS file somehow not loaded when i clicked my html file directly in my folder. But somehow with vscode when go live after compiling the scss to css it works fine.
do you guys have any idea why?
I place my css file in dist folder when using the Live Sass Compiler.
I tried open the html directly from folder using all the browser i have but the css not loaded.
body {
background-color: aqua;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/dist/test.css">
</head>
<body>
<h1> TEST </h1>
</body>
</html>
Because you use absolute path, you should use relative path
instead of /dist/test.csstry dist/test.css
If you want to read more, here is an article about absolute/relative path:
https://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
The preview work on vscode because vscode probably use a localserver to run your html file. something like localhost:3000/index.html. So in this case your html file is at the root of the domain, that's why the absolute path will be the same as the relative path
You can try this
<link rel="stylesheet" type="text/css" href="/dist/test.css"/>
you can try ./dist/test.css, this will also works fine
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>an infinite endeavor</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
The CSS is a separate file, and I've been searching for hours for a solution.
https://i.stack.imgur.com/3GdHj.png
This is troubleshooting, so I will give you three viable answers.
Maybe your css file is not in the same directory as your HTML file.
If you are loading this locally, remember to write the ENTIRE file location ex: C://User/desktop/styles.css
If none work, think about just copypasting the entire css code and putting it inside a tag.
Is your CSS file in a CSS folder? If so do not forget to add css/ to entering your CSS folder.
<link rel="stylesheet" href="css/style.css">
or try like this
<link rel="stylesheet" href="/style.css">
The main.css is located in a folder named css, and the index.html is outside the folder.
<head>
<title>Tornike's Page</title>
<link rel = "stylesheet" type="text/css" href = "css/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
My Code
The Website and developer tools
I think you don't have folder structure. If you really have it and does not works then you can try ./css/main.css. Otherwise I'd tried to go with main.css.
I fixed it guys, Just needed to edit my path so it would say : "Website/css/main.css" , Thanks for answers.
I'm having an issue with linking html and Css and have no idea why. I'm doing everything like the book and tutorials says. However, I'm not getting to do the external configuration of css.
This is the code(just a test):
<!DOCTYPE html>
<html lang = "eng">
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title>title</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheets" type="text/css" href="/styles.css">
</head>
<body>
<h1>test</h1>
</body>
</html>
and CSS:
body {
background-color:#CCCCCC;
}
h1 {
color:#0000EE;
}
Maybe I miss something, because when I do internal css (within my html code with ) it goes ok and the web browser is able to read that. It seems like the html is not linked with css, but it's even on the same folder so the path shouldn't be the problem.
I'm using Linux and Aptana Studio.
I've searched a lot the last 2 hours and cannot find where the mistake is.
I invite you to read this article Absolute and Relative Paths
Then we pass to your code:
<link rel="stylesheets" type="text/css" href="/styles.css">
Should be :
<link rel="stylesheet" type="text/css" href="styles.css">
Your styles.css should be in the same folder as your html file.
To verify that you have an error , check Console of your browser,you will be noticed that your file doesn't exist(404 error).
An other way to make your css working is to integrate it inside your page without separation:
Example:
<style type='text/css'>
body {
background-color:#CCCCCC;
}
h1 {
color:#0000EE;
}
</style>
If the other suggestions don't work, you can try re-saving the HTML and CSS sheets with "UTF-8" encoding and declare UTF-8 encoding in the HTML under the <head> with <meta charset="utf-8>"
The rel attribute should just have stylesheet in it, singular not plural as well
I had the same problem correct the correct directory structure solved my problem. This is a good visualiton on how to organize your directory structure.
http://rosebusch.net/jeff/miscellaneous/tree.html
That is, the index.html folder is on the same level as the CSS folder. If you want to put index.html in a HTML folder, to link to the CSS folder you would have to backout first by linking href="../css/stylesheet.css". The ".." will take you up a level.
Make sure style.css is in your root web directory since that is where you are calling it from
Don't put the / in front of styles.css and make sure they are in the same folder.
Try this instead:
<!DOCTYPE html>
<!-- Language was wrong? -->
<html lang = "en">
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title>title</title>
<meta name="description" content="">
<meta name="keywords" content="">
<!-- Check the path to the file - I made it relative to where the HTML is -->
<!-- Correct the rel attribute's value too -->
<link rel="stylesheet" type="text/css" href="./styles.css">
</head>
<body>
<h1>test</h1>
</body>
</html>
If all the above not working:
1- Make sure you have no inline/internal CSS > Delete all style code from the Html page (it ll prevent external css link)
If your CSS file are in another folder then use
<link rel="stylesheet" type="text/css" href="folder-name/styles.css">
I found out while Using Visual Studio Code and adding quotes that it was quoting automatically. So when I put in quotes and looked in the index.html of the index it was quoting the quotes (Bad News). Try link
<href=FILENAME.css rel=stylesheet type=text/css />
Hope this works! Also, if you want Multiple CSS files, organize them in a folder, if you do so in FILENAME put /FOLDERNAME/FILENAME.css
BUT make SURE it is under the main folder where your Index is!
just try tasking off the / in front of the style.css
Place your link in the head tag or body tag, it is best to put it in the head tag.