I am relatively new to CSS and HTML, but I just had a tutorial on connecting HTML documents to CSS sheets. It didn't work, and I have searched everywhere for the answer. All the sites had feasible answers, but none worked for mine.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<title>FlyHighGames|Home</title>
<meta charset="utf-8" /> <!--Bro what does this even mean?-->
</head>
<body>
<div>
<p>Hello</p>
</div>
</body>
</html>
Please help!
use folder name if you saving css in any folder
<link rel="stylesheet" href="foldername/stylesheet.css"/>
As others have said, you need to use the link element:
<link rel="stylesheet" href="pathToCSSFile">
FYI the: type="text/css" part is no longer needed in HTML5
But, to correctly indicate the path to the .css file, follow these
rules:
If the resource you need is part of the same web site (not talking about folder structure here, talking about domain), you should use relative paths, where:
a. fileName.ext is all you need if the resource is in the same folder as the currently loaded document.
b. folderName/fileName.ext is what you need if the file you need is in a sub-folder of the current folder that the loaded document is in.
c. ../fileName.ext is what to use if the file you need is one directory higher than the current document's folder. The ../ can be repeated if you need to go up more than one level (i.e. ../../fileName.ext).
d. /fileNameext or /folderName/fileName.ext indicates that the file or folder specified should be found starting from the root of the web site, regardless of where the current document is.
If the resource you need is located on another domain, you'd use an Absolute Path (http://something.something/file.ext).
a. DO NOT use absolute paths for local resources! This may work but causes the domain name to have to be resolved again, resulting in a longer load time.
WARNING: Different servers have different configurations and requirements that may affect whether these reference rules work or not. For example, GoDaddy web hosting provides an "httpDocs" folder at the root of a web site. You don't have to use it, but that's where their servers expect the site's content to be placed. Not following those rules result in relative paths not working.
NOTES:
If you feel that you've referenced the CSS file correctly, you may have a syntax error in that file which is preventing the CSS from being processed. You can run your CSS through a validator (https://jigsaw.w3.org/css-validator/) to see if it's valid.
You can also hit the F12 key with your web page open and click on the Network tab and refresh the page. This will show you all the network requests made by the current page. If you see the CSS file listed and then see a 404 message next to it, you know the file wasn't found.
The link tag is used to link to external style sheets. check your css file path try this code work fine
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
you need to attech style sheet beetween head tag.
As other said, use the link tag, but I sometimes get an error, if I add a slash at the end as required in XHTML as it automatically closes the tag and doesn't allow it to access other parts of the page.
Create a css stylesheet.css file and save in folder where HTML file exits
Provide complete path of your stylesheet file
example
<link href="Content/css/stylesheet.css" rel="stylesheet" />
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 website with a multiple pages some of which are in a seperate directory. However, I can't seem to link pages in one directory to a css file in a separate directory.
I have tried the pasting entire directory and css/main.css.
//Here is the folder/directory structure of my project
home.html
css
--main.css
lines
--M51.html
--M50.html
--M53.html
Here is the HTML code I use to reference to the css in html file M51.html or any file in lines folder/directory:
< link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
When testing the html page in lines folder(M51 or M52 or M53), I see css is not applied and error "cannot resolve file css/main.css". How can I resolve this error?
It works fine on home.html but not on those inside the "lines" directory.
Since you have Css files stored in a different directory. Make sure you use relative file path to include css in the HTML:
<link rel="stylesheet" type="text/css" href="../css/main.css" media="screen" />
A relative file path points to a file relative to the current page.
Best Practice
It is best practice to use relative file paths (if
possible).
When using relative file paths, your web pages will not be bound to
your current base URL. All links will work on your own computer
(localhost) as well as on your current public domain and your future
public domains.
Copying an answer from the comments because it is the right answer:
Reference the file using this:
../css/main.css
for files in the "lines" directory (map). The two dots go up one level, where the "css" directory(map) is located relative to the current folder. Use the Relative Path for the external CSS file.
I have created a very small personal website with three different pages and one CSS file. I know to embed a CSS file into an html page is the following:
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
but form some reason the CSS file only work in one page. Any advice please
Did you checked your folders structure? You may have other html file in different folders.
I suggest to use an absolute path for your stylesheet. something like:
<link rel="stylesheet" type="text/css" href="/css/mystyle.css"/>
first / in href parameter is what I mean.
Edit: You may use a windows machine and upload your files into a Linux machine. Windows do not care about lowercase or uppercase, but it is important on Linux. rename all your filenames to lowercase every where and use it exactly the same in your code (check your link tags again). this may fix your problem
Sharing the link of the site would be helpful. Make sure that the line of CSS aboves goes on each page. For example, if you have 3 pages with 3 different files: index.htm, bio.htm and contact.htm (I'm having to guess since I have not gotten this info from you). Then make sure the link to the CSS above appears on each of those pages.
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 .
Hi I have a spip website that I need to get working on my localmachine.
I copied everything over and the site seems to be "working" with all the databases.
The problem is I think there is a base href set.
The stylesheet in the header was linked like this:
<link rel="stylesheet" type="text/css" href="/css/style.css" />
and was not working as it was going to the root of the localhost instead of the website folder.
However changing the link to this (without the forward slash) works perfectly.
<link rel="stylesheet" type="text/css" href="css/style.css" />
The problem is I have tons of links on the site that are all acting like this. Is there anywhere I can look to see what is causing this? I can't find a base href set anywhere and the htaccess file seems to have no effect.
Resource URLs and link hrefs that begin with a slash (/) do not use the <base href="xyz"> value. They tell the browser to fetch the resource from the root of the host/domain path.
For example, if you have:
<base href="http://mysite.com/res/">
<!-- style sheet 1 -->
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<!-- style sheet 2 -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
style sheet 1 will attempt to fetch it from http://mysite.com/css/style.css regardless of the base href value, since its URL starts with a / indicating host document root.
style sheet 2 however will use the base href value and attempt to fetch it from http://mysite.com/res/css/style.css
Possible Solutions
Update your HTML/PHP/JSP etc. to remove the / prefix from all your style sheet urls, links, images etc. You should probably be able to find and replace this using a good editor like Notepad ++
Ugly way - Modify those URLs using some JS after your page loads. This has a problems that the user will likely see wrong/incomplete content before the JS completes execution.
URLs that start with / (absolute-path references) are useful only when the document is on an HTTP server or it has its base URL set (via the base tag) to refer to an absolute HTTP URL. If you try to use them in a local HTML document (without a base tag), the base URL used will be a file:// URL, so a URL like /foo/bar gets interpreted as file://foo/bar, which normally won’t work – you would need to have a foo/bar that constitutes the full path name of a resource in your computer’s file system.
So sites that should be downloadable for local use simply must not use URLs that start with /.