linking a css file to my html file - html

I am having way too much trouble figuring out how to link a .css file to my .html file. They are both in the same folder on my desktop.
I created the these in sublime and when I made the styles.css I did saveas selected the folder on my desktop that my html was in and then saved it as a css file. Something that might be the problem is when I look at the files in the folder, the html say filename.html but the css just says style without the .css and the file type is file. I tried to go into the properties and change it to .css but that also didn't work.
This is the html file
I have tried "/style.css" , "foldername/style.css" , and the entire path
<html>
<link href="style.css" rel="stylesheet" type="text/css"/>
<body>
<div class ="test">
test
</div>
</body>
</html>
This is the css file with the file name of style.css
.test{color:green; margin:50px;}

Did you name your CSS file "styles.css" or "style.css?"
When working locally, make your css paths relative. So it would look something like this:
<link rel="stylesheet" href="../styles.css">

Related

flutter web load css and images

I have this in my index.html
<img src="img/splash.png" class="center"/>
<link rel="stylesheet" type="text/css" href="styles/styles.css">
The styles and img folders are both in the 'web' folder.
The splash.png file is found, but for the css file I get this:
The stylesheet https://myapp-24b9f.web.app/forms/styles/styles.css was not loaded....
The url I'm loading is: https://myapp-24b9f.web.app/forms/somepage
Why is the image searched relatively to the 'web' folder, and the css file relatively to 'forms'?
I moved this to be the first line in the and it solved it:
<base href="/">

why can't I link to a css file?

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

cant link to CSS in HTML in localhost

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

Style Sheet is not linking with html?

I have following scenario.
I have Created a Web folder on my desktop which contains the html file Test.html and another folder styles which contains the myStyle.css file.
I am trying to link .css file with my html using the following code but it is not working.
How can i do this ?
Here is my Code :
<head>
<link href="Web/styles/myStyle.css" rel="stylesheet" type="text/css">
</head>
Test.html is inside the Web folder, so you don't have to enter the Web folder when you look relative to the HTML document.
You are trying to read $HOME\Desktop\Web\Web\styles\myStyle.css.
Remove the Web/ portion of the URI.
href="styles/myStyle.css"
You should also have a space between attributes.
rel="stylesheet" type="text/css"
Seems like your folder structure is something like this:
Web
|--styles
| |--myStyle.css
|--Test.html
If you reference the stylesheet from Test.html, you should specify the path relative to the location of Test.html. Specifying Web is not a good idea, because the directory that contains Test.html - which is Web - does not have a subdirectory called Web.
If the structure is the way I have shown above, the path should be styles/myStyle.css.
First of all you need to enclose My first WebPage in a title tag:
<title>My first WebPage</title>
Then what you need to do is specify the href attribute as a relative path, so assuming that your css is in a directory called styles the link would be:
<link href="styles/myStyle.css" rel="stylesheet" type="text/css">
Also, make sure there is a space between " and type in your link tag.
I hope this helps

HTML file linking between directories

My folder structure:
de/
index.html
en/
index.html
hu/
index.html
img/
image.png
style/
stylesheet.css
How can I link to the css file in the style folder & the image in the img folder within the html file inside the de folder, whithout having to type the entire hostname like http://myhost.com/style/style.css?
Is it even possible?
../style/stylesheet.css
../img/image.png
You can use a relative path: ../style/style.css
The css file can be link in the html file as
<link href="../style/stylesheet.css" rel="stylesheet" type="text/css">
you don't have to type the domain, you should use
<link href="/style/stylesheet.css" rel="stylesheet" type="text/css">
but dont forget the first / as this will mean that the address is on the same domain as the page.
this will also save you from maintenance problems if you ever change the directory structure of your website.