My goal is to have a page, served by a web site, containing a to a stylesheet, that is available not on the web site, and not on a different web site, but on a local drive.
Something like;
<!DOCTYPE html>
<html>
<head>
<link href="/styles/something.css" rel="stylesheet" />
<link href="file:///C:/custom.css" rel="stylesheet" />
</head>
My initial research shows that browsers don't seem to support this, but I'm willing to be proved wrong, or discover some sneaky way of doing it. (I tried the above, that doesn't work.)
[I know, I know, you wanna know "why". This is for the site designer - it would allow him to edit the css locally while designing and see the effect on the "semi-live" site. ie the round-trip for edits would be very fast, and I wouldn't need to give him access to the actual site. By extension, for teaching purposes, it would allow multiple people to simultaneously practice their CSS skills locally]
Obviously any edits made to the local file will only be visible on that local computer - that's the whole idea. If you had 10 students each would see the same site with a different css file.
CSS can be added to HTML documents in 3 ways: Inline - by using the style attribute inside HTML elements. Internal - by using a <style> element in the <head> section. External - by using a <link> element to link to an external CSS file.
External stylesheets use the <link> tag inside the head element. The rel attribute explains the relation the link has to our document. The value in this case will always be stylesheet , since that is what we're creating a link to. The href attribute is the link to our stylesheet.
External CSS Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section.
Well, if you can setup Apache on your machine, this is easily done.
This is assuming the question is this
I want to be able to have a site in a central location (live) and allow users accessing that site to be able to make changes to the site by editing a local file. These changes will only be visible to the person making the change and the rest will just see whatever CSS is on their local copy.
So this means that you have to serve a local file from multiple computers and each person viewing the site may have a different looking copy. If I'm right, read on.
Setup a local environment (maybe with WAMP?) on all the machines you want to be able to allow local edits. The important thing is that everyone must have the same hostname defined (either localhost, or something else - don't forget to add it to your hosts
file). Place the CSS file inside your webroot and add a link to your live site pointing to that link.
<link href="http://www.mysite.com/base.css" rel="stylesheet" />
<link href="http://localhost/custom.css" rel="stylesheet" />
And voila! Local editing.
Caveats
Everyone needs to have their files placed in the same local URL otherwise it won't work
You need to setup a local environment (very easy)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With