I can't linked to my CSS file in my HTML file in localhost.
I have my index.html and styles.css in /var/www/html/project
I call it in the browser with localhost/project/index.html and only the html is printing.
When I just open the html in the browser, it's working fine.
I tried
<link rel="stylesheet" href="http://var/www/html/project/styles.css" media="all">
I also tried in the href
localhost/project/styles.css
or project/styles.css
or /project/styles.css
But nothing, what am I doing wrong ?
Thx
The path you put for your CSS file should be RELATIVE TO the location of your html file.
If your HTML file has the path /var/www/html/project/index.html, then it's location is the project folder. That folder becomes the "root" of your project, and the CSS path should be relative to it:
styles.css
Did you try:
<link rel="stylesheet" type="text/css" href="styles.css"/>
If your css file and your html file is in the same folder, you just need to reference it by name and the file extension, I think.
If the CSS file is in the project file (with the index.html file) your link should look like this:
<link rel="stylesheet" type="text/css" href="styles.css">
As an example for VS13 link the css as shown below:
<link href="~/MyFolder/Style.css" rel="stylesheet" />
I also found a solution. You don't need anything. Do
<style type="text/css" media="all">
/* Your code */
</style>
and
<script type="text/javascript" charset="UTF-8">
// Your code
</script>
Don't link them. Do it Internal. Thanks me later
So I added type = text/css and thx the CSS is working, but if I move my CSS in a CSS folder css/styles.css is not working
with my html file in /var/www/html/project/index.html
and my css file in /var/www/html/project/css/styles.css
But in any case images are not charging :
and I have my images in /var/www/html/project/img/banner.jpg
Related
Instead of having to copy the css file over and over again when making a new subdirectory with a html file in it, I would like to have one css file that applies to all html files. How would I do this? I am managing my files through StackCP. My css file is in my public_html folder.
You can use a relative file path to link to your CSS file from other directories. Check out relative path to CSS file for more details on how to accomplish this.
Place
<link rel="stylesheet" type="text/css" href="https://example.com/stylesheet.css">
in your header.
Well, the way you do this is:
Step 1: Create your main.css (It shouldn't necessarily be main.css any name would work like style.css) file anywhere you want but it should be inside the public_html folder.
Step 2: Create your HTML files and include the link/path/URL of the CSS file in your head section of each HTML file. To do this you use the link tag
<link rel="stylesheet" href="main.css" />
The rel attribute in the link tag defines what type of file it is in your case you can put stylesheet and the href attribute defines the link/path/URL to your CSS file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<!-- Content of the page -->
</body>
</html>
In the end, your HTML file should something like this.
I hope It helps.
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.
When I try to link to css file it's not updating to me in the browser, this is my code:
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
the style file name is "style.css" but it's still not working. but when I try to do the css code in <style></style> tags it's working
Check if the style.css file is in the same folder of the HTML file.
In case you want it to be in a different folder you need to specify the full path in the href property.
Check your style.css file in same folder or check your file name.
Goto your page Ctrl+u find your style.css and double click that link. If css code showed your path is right or else move the file in same folder
I'm working on a project using arduino, node.js and socket.io. I am running it in localhost, however my external stylesheet wont load.
The error seems to be saying it cant get my css from this path http://localhost:1337/css/main.css
However if i keep the css in a style tag in the html file it all works fine, is there a way to keep the css external so it doesnt clutter my html file?
Heres how im loading in my css
<link rel="stylesheet" type="text/css" href="css/main.css">
Here is how my file structure looks
Here is my main.css file inside the css folder
my main.css file is within the css folder, i am working off of the interface.html file
Try this instead:
<link rel="stylesheet" type="text/css" href="./css/main.css">
notice the ./ in front of the href
otherwise include full path name:
<link rel="stylesheet" type="text/css" href="http://localhost:1337/css/main.css">
this is what i have tried and it is working for me
<link href="./main.css" rel="stylesheet" type="text/css" />
thanks
To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express.
The function signature is:
app.use(express.static(__dirname));
Then you can include like bellow
<html>
<link rel="stylesheet" href="/css/style.css">
</html>
The relative path kicks off from your html path so
<link rel="stylesheet" type="text/css" href="main.css">
should work (as your main.css is outside of the css folder). Alternatively, you could put the main.css file on the css folder and reference it with "css/main.css"
I was facing same problem as you are facing but i tired below code and it works.
body{
background-color: yellow;
}
h1{
color: red;
}
p{
color:green;
}
<html>
<head>
<link href="./external.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>This is my First page to test CSS</h1>
<p>The main motive to making this html file is to test my CSS skill.....</p>
</body>
</html>
Thanks,
hope it will help you......
I'm also facing this problem... But I found a solution and its working. Try the below code line:-
<link rel="stylesheet" type="text/css" href="css/main.css?v=<?php echo time(); ?>" />
For anyone else that's having this problem, I was having the same problem and found a solution. My localhost was apparently following a path to a cached CSS stylesheet file, even though it had been overwritten countless times.
Solution: Rather than opening the stylesheet directly from the folder to edit, I had to manually open it from my text editor dropdown menu. After hours of frustration, it was that simple. I use Sublime Text, if it makes any difference, but it seems to be a problem with the localhost, and I suspect clearing the cache would have had the same result.
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>