I've been working on a project with a HTML and an external CSS file. The link worked fine at school when i was doing it on adobe dreamweaver on a mac, but i sent both files home via dropbox, and the css doesnt seem to link with the html file. I believe i've got the file paths and everything right, but just to make sure:
<link rel="stylesheet" type="text/css" href="Desktop/Stylesheet.css" />
i also tried removing the "Desktop/" bit from the file directory, but it still didnt work. My Index file and Css file are both on my desktop. I am using windows. The same code worked at school, so i believe it might be something to do with with file location.
please help
Thanks in advance
This is how linking works,
Let's say your html file is in a folder named "xyz". Now when linking to css, the address is related to your html file's location. So if you mentioned
<link rel="stylesheet" type="text/css" href="Stylesheet.css" />
it would assume the css file is in the same folder as your html, while if you linked it as
<link rel="stylesheet" type="text/css" href="Desktop/Stylesheet.css" />
it would assume there is a folder named Desktop inside the folder xyz, and your css file is probably stored in Desktop.
Now im assuming you've simply placed both your html and css on your desktop directly, this is not good practice as you're probably going to move these files back to school as well. Hence I'd recommend you to place both in a folder and then link to your css with
<link rel="stylesheet" type="text/css" href="Stylesheet.css" />
and dont forget to pay attention to capitalization, yes html is non case sensitive but when it comes to linking external files, capitalization does matter.
Your directory structure should look as follows:
Root Directory
|
|-page.html
|-Desktop
|-StyleSheet.css
If it does not you need to modify your directory structure or change the href attribute on the link tag
If it is in the same directory simply set the path to href="Stylesheet.css"
The problem is with your file location .
If you are using Dreamweaver or any other code editor, simply browse to the path of the file to insert it in link href attribute, rather than manually entering the path .
Related
I try to link style sheets in a file with html file in different directory.
At first html document and CSS file were in the same directory and it were working well, till I moved style to other directory.
<head>
<link rel="stylesheet" type="text/css" href="/styles/style1.css">
</head>
You should go back one directory back by ../. This way go to parent folder of these two files. Then start to go into css file's directory.
href="../styles/style1.css"
Its a bad approach for putting styles and html folder in different directory try to use them in same folder so that where ever your run your project either on server ,local or in different directory, it work well.
If you do that(in different folder on windows) its hard coded and in programming(whatever Lagrange it is) hard coded coding is not allowed.
Well i think you only need:
<head>
<link rel="stylesheet" type="text/css" href="styles/style1.css">
</head>
Also you can use 'base' tag:
For more info : https://www.w3schools.com/tags/tag_base.asp
I have a style.css and a html files.
When I upload them to the server I see the headlines in the style I want but on my desktop I don't.
Both of my files are on the desktop
On the <head> I have this line in my html file:
<link rel="stylesheet" href="/style.css">
What can I do to connect the files and see the style applied when I'm offline working on my desktop? and also online in my website
i want to add i just removed the / and it works offline on my desktop (just href="style.css") but not online - but i want to be able to see it both online and both offline ---- and online its not in the same file
** edit : now i see that what works on both is if i put my spesific website adress - than it works on both online and offline :
but if i will want to ever change my website adress it would be hard to change on each page thats why i want it to be : href="/style.css and not the website adress
If you are working locally without a webserver you need to link your css files like this:
<!-- Windows -->
<link rel="stylesheet" href="C:\Path\to\File\main.css">
<!-- Linux & Stuff -->
<link rel="stylesheet" href="/path/to/file/main.css">
Additionally you could use the relative path to your file:
<!-- if it's in the same folder -->
<link rel="stylesheet" href="main.css">
<!-- if it's in the css folder -->
<link rel="stylesheet" href="css/main.css">
<!-- if it's in the parent folder -->
<link rel="stylesheet" href="../main.css">
your question is still not clear, but generally, your question seems to be based on the linking of the style sheet with your HTML file to see the results of your code on your personal laptop and the server both. The best practice to do that is to maintain a file structure which keeps the project organized, for example, there is a folder named "main" which is my project folder which further contains your subfolders like CSS and js, and inside these folders, you should keep your CSS and js files respectively.
A simple project file structure is,
main
|
|-css
|-style.css
|-js
|-script.js
|-file.html
If you follow the file structure to link your files, you won't go wrong, it doesn't matter whether you are on your personal desktop or on the server.
One thing i understood is that when you are working locally you have html files and the css file on the desktop. First of all i would recommend you to make a new folder and copy all your related files whether it be html files, css files or js files in that folder. It is a better way to encapsulate all your project files in a single folder.
Moving on to the css issue - you said that it works when you remove /. It works because since your files are all on desktop they are on same directory structure.
Enough for clarification I want you to follow these steps:-
First make a folder and copy your html files, css files and js files in it. Lets name the folder as website.
Create a folder named css inside the website folder. Copy all the css files in that css folder.
Inside your html files, inside the write <link rel="stylesheet" href="css/style.css"> provided that the name of css file is style.css and you want to include this particular file in your html.
And regarding your online issue, I am not able to understand it. If you clarify a bit more i may be able to help.
Your files should have the same relative path on your desktop and server, so that you can use that same relative path for both. The relative path is based on the location of your HTML file in both.
If you have a folder on your desktop that has 2 files:
index.html
style.css
Inside of index.html, you'll reference your stylesheet using <link rel="stylesheet" href="style.css">
If you have a folder on your desktop that has 1 file and 1 folder containing a file:
index.html
css/ (contains file: style.css)
Inside of index.html, you'll reference your stylesheet using <link rel="stylesheet" href="css/style.css">
Since you said that <link rel="stylesheet" href="style.css"> works correctly on your server, that means that your HTML and CSS files are contained in the same parent folder. On your local, you need to make sure that the same is true. That parent folder can be located anywhere - Documents, Desktop, a random subfolder - but as long as it contains that HTML file and that CSS file (and neither of them are nested in another contained folder), that <link rel="stylesheet" href="style.css"> will work for both.
Note: You can change the folder structure of either server or desktop, or both - but the relative paths must match, so that your relative link works for both.
give like this
<link rel="stylesheet" href="style.css">
Why isn't my HTML linking my CSS properly? using the Prologue template from html5up.com... In my main directory (I mean where index.html is) I created a subfolder for the different products I want to display. This folder contains a few files: 125st.html, 125stmain.css, and a folder called _notes created by Dreamweaver. Here is the code in the 125st.html that should be linking to the 125stmain.css:
<link rel="stylesheet" href="products/125st/125stmain.css" />
When I visit shercousa.com/products/125st/125st.html (It wont work for you, I've just tricked the hosts file to go to my local save instead of the live site while I work on it) it shows no CSS only the HTML. I just copied this line from the index.html file (which works) and changed the folder to try to direct it to the CSS clone I created. When this didn't work I tried copying and pasting the original line verbatim that works on the main site, but when linked in 125st.html still loads no CSS at all. I'm a bit new so sorry if I'm a bit hard to follow. I can elaborate or post any more code if anyone needs to see it.
Edit: Also my images are not loading, even the ones linked in the html file.
If i'm not wrong, this have an easy solution.
If you're on host/products/125st/125st.html and you linked CSS this way:
<link rel="stylesheet" href="products/125st/125stmain.css" />
What it's happening there is that your file 215st.html is trying to find: host/products/125st/125st.html/products7125st/125stmain.css
So you can either link your css with both this ways:
<link rel="stylesheet" href="/products/125st/125stmain.css" />
or
<link rel="stylesheet" href="125stmain.css" />
I hope this works for you :)
And sorry for my english!
Ga, I'm such a dope. There should be a slash in front of products like so:
<link rel="stylesheet" href="/products/125st/125stmain.css" />
There is my problem:
Since I had some organization issues with my website, I wanted to arrange my files to a better classification.
Now, the folder tree looks like:
www
ressources
images
...
css
design.css
mypage1
index.html
mypage2
index.html
index.html
And now I don't know how to link the css file to the pages stored in a folder like the "mypage1" folder.
To start from my C: drive will will produce path errors once online, I tried the "shortcuts to the css file in each folder" solution too, but I think there is a far better way to proceed.
Need some help!
Thanks again!
use the link:
<link type="text/css" rel="stylesheet" href="../ressources/css/design.css">
here, used ../ going back folder..
You can use:
<link rel="stylesheet" href="../ressources/css/design.css" type="text/css" media="all">
The .. will go one directory top. Since the html files are in a directory (like mypage1), this will go to the parent directory, which is www. Then the next that should be done is to pass the directory path to your CSS file, which in your case is /ressources/css/design.css.
My main doubt is the part of href.How can i avoid using the full link of the file as saved in my harddisk so that i dont need to change it while transferring through ftp.I also want to know how you can view your html files being developed that has been linked to different css files on your desktop web browser like chrome.
If your HTML file is stored in a directory, and your CSS files are stored, for example, in a css subdirectory, all you need to do is add
<link rel="stylesheet" type="text/css" href="css/mystyles.css">
to the <head> tags of your HTML file, and you'll be all set.
If the file is in the same folder as your HTML file you will simply type the name of the file
<link rel="stylesheet" type="text/css" href="style.css" />
Let's say that your style.css file is in another folder called css
<link rel="stylesheet" type="text/css" href="/css/style.css" />
By playing a "/" in front of your file name it is saying that it should look for the "css" folder starting from the root folder instead of the current location.
You can use relative paths. If the css stylesheet is in the same folder as the html use href="style.css". If it's in a folder that is in the same folder as the html use href="styles/style.css". If you need to go up a folder use href="../style.css".