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.
Related
I have an index.html and style.css. I currently use the inline css but I want to use a stylesheet. I have this code in my index.html just before my </head> tag.
<link rel="stylesheet" href="/style.css">
and then i have this in my style.css
body {
background-color: yellow;
}
note both of those files are located in public_html. But whenever I open the index.html the background stays white and does not change to yellow.
how can i link the style.css to index.html ?
You need to give your CSS at least a height and width.
Try adding:
height: 100%;
width: 100%;
If you're working locally, the /style.css reference will try to load the file from the root of your filesystem. Same thing applies if you're loading from a subfolder in a domain, it will try to look for the file at the root of the domain folder.
If you change it to <link rel="stylesheet" href="style.css"> (notice the missing slash) it will then try to find the style.css file in the folder relative to the index.html file, which is the same.
The background will then be yellow.
The main thing is you need to have relative file path to your stylesheet.In your case imagining you have style.css inside css folder you need to do
<link rel="stylesheet" href="style.css">
Remember / path is for absolute path of file. This means that it
represents your file path from the root directory. And without / the file path becomes relative
Since you said you were beginner this may be another issue. Maybe be you haven't specified where to apply your style
body{
background-color:yellow;
}
Try adding
height:1000px;
width:100%;
You cannot give percentage to body height because body has no parent.
And add
<link rel="stylesheet" href="style.css">
to <head> of html file.
If your html page has nothing in it (text or images) then it is difficult to see any bg color since it has no height/width, as mentioned above.
Insert some dummy text to see if this is the case.
If you only have one css file, it is not unusual to have it in the same folder as the index.html file, and in this case change the code to:
This may be the case since you indicate that both files are in the same root folder, so delete the "/" since that would mean the css is not being applied.
It is worth naming the stylesheet to something relevent to the site you are working on, such as catstyle.css or lollipopstyle.css so that, if you have many css files open in your text editor, you can clearly see which one is for which site.
I am assuming also that you have the skeletal structure of the html "bare bones" complete as shown here.
Make sure to put the link to the stylesheet inside the section, say, after the meta-charset line.
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">
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
I've downloaded a style sheet that I want to use for a personal HTML webpage of mine. Quick question about implementing said style sheet. A screenshot of the folder is here:
http://imgur.com/94m11mz
I know to have an external style sheet I need to use the link tag, something akin to:
<link rel="stylesheet" href="external_style_sheet.css" type="text/css">
My questions are these:
1) Would href= "name of the .css files?" i.e href="default.css"
2) I'm not sure what to do with 2 .css files. Do I link to both of them? Meaning do I have 2 link tags? One going to default.css and one going to fonts.css? Such as:
<link rel="stylesheet" href="fonts.css" type="text/css">
<link rel="stylesheet" href="default.css" type="text/css">
3) Do I need to include all of the folders/.css files in the same folder as my HTML document? Or can I move that to a different folder if I explicitly type out the location to in href="name of .css file here" thing?
You can move them to your own folder, for example:
<link rel="stylesheet" href="css/fonts.css" type="text/css">
<link rel="stylesheet" href="css/default.css" type="text/css">
And yes you need one link tag per css file you want to include in your html file(s).
You will need two link tags as they are different files, the folder structure depends on how you think it is appropriate.
Generally it is a relative path like '..css/yourstylesheet.css'
href takes the virtual path. thats like say you have css folder in your root directory and the css file present in that then href = "css{your css filename}".
Question 1: Would href= "name of the .css files?" i.e href="default.css"
Yes you should name css with .css extension
<link rel="stylesheet" href="external_style_sheet.css" type="text/css">
Question 2: I'm not sure what to do with 2 .css files. Do I link to both of
them? Meaning do I have 2 link tags? One going to default.css and one
going to fonts.css?
Yes, you can use two link tags but keep in mind if you have same class or id name in the two stylesheet it will take the style of last stylesheet.
For eg:
if you have <div class="sample"> hi </div> in your html
and in your default.css if you have .sample{color:red;} and in your font.css you have .sample{color:blue} then the text "hi" will appear blue in color as you have linked font.css second.
Question 3: Do I need to include all of the folders/.css files in the same
folder as my HTML document? Or can I move that to a different folder
if I explicitly type out the location to in href="name of .css file
here" thing?
It is highly recommended to keep all .css extension files under a single folder. so that you can search for the stylesheet easily if you have large sum of files in your site.
And you should link like wise the stylesheet if you have it in a separate folder.
Folder Name: CSS
File Name : Default.css
<link rel="stylesheet" href="CSS/Default.css" type="text/css">
I am working on my website, and my HTML isn't linking to my CSS. Can somebody please shed some light on this issue?
This is the snippet from my code.
<link href="css/style2.css" rel="stylesheet" type="text/css">
My file directory goes like this.
/root
/css
style.css
style2.css
/html
index.html
webconfig.html
/Images
Is this correct?
Your current href is a relative path, rooted from where ever the HTML file is.
You can either use a correct, relative path...
<link href="../css/style2.css" rel="stylesheet" type="text/css">
Or you can use an absolute (domain-rooted) path...
<link href="/css/style2.css" rel="stylesheet" type="text/css">
... assuming your website is deployed at the root of your domain.
The link you have is relative, so it starts looking in the same folder as your html. You could do an absolute path to the css with /css/style2.css or use a relative path ../css/style2.css
Use relative URL <link href="../css/style2.css" rel="stylesheet" type="text/css">
The url css/style2.css should be relative to the HTML file(the file that contains code <link href="css/style2.css" rel="stylesheet" type="text/css">) .
.. in above relative URL indicates go one folder back, and then to the css folder - and in that css folder use style2.css file.
Similarly ../../ , means go two folders back and so on.