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"/>
Related
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">
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.
For some odd reason I am not able to see the background change to black in testIndex.html. What I have is shown below:
body {
background: #000000;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h3>Test test</h3>
</body>
</html>
I am using atom and these is no errors found in the styles.css... is there something I am doing wrong? I've read upon linking the CSS to HTML and by the looks of it I am doing it correctly. Just unable to see the changes made and both files have been saved too. I do have the styles.css in a different folder from the testIndex.html file.
Try this ../ is missing in you code.
<link rel="stylesheet" href="../css/styles.css">
You have missing relative file.
<link rel="stylesheet" href="../css/styles.css">
Here is all you need to know about relative file paths:
Starting with "/" returns to the root directory and starts there
Starting with "../" moves one directory backwards and starts there
Starting with "../../" moves two directories backwards and starts
there (and so on...)
To move forward, just start with the first subdirectory and keep
moving forward
You need one more detail in your link tag <>:
link type = "text/css" rel="stylesheet" href="../css/styles.css"
add this to your html file:
<link rel="stylesheet" type="text/css" href="../css/styles.css">
TRY THIS
move the css folder to the pizza web folder and try
I am reading css file from aspx
Login.aspx
<HTML>
<HEAD>
<title>LoginWebForm</title>
<meta name="vs_showGrid" content="True">
<link href="stylesheets/layout.css" rel="Stylesheet" type="text/css">
<link href="stylesheets/LoginWebFrom.css" rel="Stylesheet" type="text/css" />
</HTML>
</HEAD>
and directory structure is,
MyProject
- folder1
- folder2
- stylesheets
- layout.css
- LoginWebForm.css
- Login.aspx
So, here Login.aspx and folder stylepsheets are on same level, it means i can by specifying path as, "stylesheets/layout.css"
but. this does't work. If I run same application on **Windows 2012 server then it works**. but when I run it on Windows 7 then it it doesn't work.
Can you please let me know whether this is OS related problem OR some settings required/ configuration required to be run the application on Windows 7.
Thanks You
Your html structure is not good:
<HTML>
<HEAD>
<title>LoginWebForm</title>
<meta name="vs_showGrid" content="True">
<link href="stylesheets/layout.css" rel="Stylesheet" type="text/css">
<link href="stylesheets/LoginWebFrom.css" rel="Stylesheet" type="text/css" />
</HTML>
</HEAD>
This would be a "normal" html structure:
<HTML>
<HEAD>
(head content)
</HEAD>
<BODY>
(body content)
</BODY>
</HTML>
Try to fix the html structure and maybe works after that ;-)
Another thing you could try is start your CSS paths with "/", for example:
<link href="/stylesheets/LoginWebFrom.css" rel="Stylesheet" type="text/css" />
And... Why one of your "link href..." lines ends with "/>" and the other one ends with ">" ??
I think both are correct ways (not sure now), but... Why you do it in a different way in any case??
good luck
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>