I may be using subdomains incorrectly here instead of using sub directories, but I want to import the same CSS into my subdomain (hire.joeisaacson.com) from my main domain (joeisaacson.com)
The current file structure is below
public_html (where joeisaacson.com points to)
-index.html
-css
--style.css
-hire (where hire.joeisaacson.com points to)
--index.html
I want to access style.css from the "hire" folder instead of creating a duplicate and having to updated both.
using ../css/style.css from the "hire" folder doesn't work, because it searches within hire.joeisaacson.com and not joeisaacson.com
When you have a case that the same source code will be used at different nesting levels (like /index.htm and /hire/index.htm or different domains you might want to consider the HTML BASE tag.
<base href="http://joeisaacson.com">
<link rel="stylesheet" href="/css/style.css" type="text/css">
This will fetch the CSS from http://joeisaacson.com/css/style.css regardless of where the HTML page is served as long as you realise it will do this for all external resources (images, css, js, etc).
Just be sure BASE tag is inside HEAD and comes before any linked content. You also do not close this tag in HTML (so no </base> or <base /> is expected)
you should provide absolute path in that case for including on subdomain. It should be looking something like :
http://joeisaacson.com/css/style.css
Related
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 a multi-region website, in raw HTML. So if you're in USA, Australia or elsewhere, you should be served localised content. Currently I have all my html files on the top level, with CSS files in a folder (css). I'm trying to organise the content so that all USA content is in a USA folder (the same for Australia, etc).
If the CSS/JS etc files are in a separate folder, it seems like I can't use a relative URL structure.
So instead of, for example, <link href="css/minify-theme.css" rel="stylesheet" type="text/css" media="all">, what file path should I put, so that the USA html files can find the CSS path?
Sorry for the noob question, still learning HTML/CSS.
Thanks!
Your question might be a case of working out the relative path to the CSS file from each page.
For example, if your CSS files are all in /css/ (as you say), but now you've moved USA pages into /USA/, then, in USA/index.html (etc) your CSS declaration should be like this:
<link href="../css/minify-theme.css" rel="stylesheet" type="text/css" media="all">
The "../" means "go up a directory". And then, it goes into the /css/ directory.
You could use / to replace the entire pathname of the base URL or // to replace everything from the hostname onwards. See Retative URLs for details.
I think there is a different content for different regions, but you should use common styling/scripting path css/ and js/ for all regions.
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" />
I often get confused with the href attribute, the link tag, and the base tag. I'm unsure how to properly link the CSS file so a file can be moved into a subfolder and still work (example later on) so I went ahead and found out how the href works when specifying a location.
For your knowledge, I'm working with my localhost, so I have the main htdocs folder and inside that, I have multiple folders, each for a project I'm working on. It ends up looking like this:
localhost/index.php (which redirects to localhost/home/index.php)
localhost/home/
localhost/zune/
localhost/school/
localhost/aeac/
And generally the layout of a folder will be something along these lines:
localhost/aeac/images/
localhost/aeac/stylesheets/
localhost/aeac/scripts/
Going on, let's say I have the file localhost/aeac/test/index.html and in it, I have 4 links for testing. I've found out that
<a href="/"> will link to "localhost/"
<a href="./"> will link to "localhost/aeac/test/" (the directory the file is in.)
<a href="../"> will link to "localhost/aeac/" (the directory above the file.)
<a href="about.html">will link to "localhost/aeac/test/about.html" (the directory the file is in.)
Now that I understand href's, I need to understand how to link CSS properly.
Imagine the site's directory looks like this:
localhost/aeac/
localhost/aeac/images/
localhost/aeac/stylesheets/
localhost/aeac/scripts/
and right in the /aeac/ folder I have index.html. The file has a link tag that looks like this:
<link rel="stylesheet" href="stylesheets/main.css" />
So that works out well, main is basically the site's structure/theme and gets included in every file. The problem occurs when I have to make a subfolder. Now we have a localhost/aeac/users/*username*/index.html. The site still uses the main.css, but the link doesn't work anymore because there is no stylesheets folder inside there.
That's where I'm stuck, I imagine that I should be using the base tag to solve my problem but I'm still confused on how that would written. Also, I know I could just change the link tag for all the files in the users folder, but I'd like to know how to do it this way (if that's even possible.)
with what you found out about href, just combine that knowledge about navigation with your final approach:
So if you have this:
localhost/aeac/
localhost/aeac/images/
localhost/aeac/stylesheets/
localhost/aeac/scripts/
localhost/aeac/users/
and you are in localhost/aeac/users/index.html
you just go one directory up (../ to get into aeac) and then navigate on:
../stylesheets/style.css
Hope this helps
I believe you want this:
<link rel="stylesheet" href="/aeac/stylesheets/main.css" />
This begins with /, so it will always traverse up from the root, not matter where your page is located (i.e. at /aeac/index.html or at /aeac/users/foo/index.html). Now, if you have control over the tag in each copy of index.html (which you probably do), you could also navigate upwards with .., to ../../stylesheets/main.css, but navigating from the root is probably simpler.
You can have an absolute path to the stylesheet using / as the base
<link rel="stylesheet" href="/aeac/stylesheets/main.css" />
You can use:
/stylesheet/main.css
or ../../stylesheet/main.css
No matter what the "user" folder is named, ../.. will always go 2 folders back:
/aeac/users/user1/index.html
/aeac/users/user2/index.html
../../stylesheet will always get to /aeac/stylesheet
I'm currently working on updating a "legacy" website to xhtml/css, so that I can go ahead and proceed on a re-design. All of the pages have the header included via PHP. The issue is is that if I reference the style sheet from the header as "style.css" it looks in the current directory for the style sheet where of course there is no style sheet. Do I need to use an absolute path, or is there a better way to do this?
The line below should work in any HTML/PHP file in any directory, included/required or not, as long as the directory "assets" is in your home directory. I think i'm right in saying this is true for all "href" attributes (i.e. in anchors).
<link href="/assets/css/style.css" rel="stylesheet" type="text/css" />
If you're including a CSS file with a PHP inluclude, you must know the relative path from every file in which you are running the include function - no absolute URLs are allowed.
The path to the CSS file is relative to the URL which you used to request the main PHP page (the one in browser address bar), not to the local disk file system path where the PHP page is located in the server machine. CSS files are namely loaded by the webbrowser, not by webserver.
So to figure the relative style sheet path which you'd like to use in <link href> in the HTML head, you need to know the absolute URL of both the PHP page and the CSS file so that you can extract the relative CSS path from it.