Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can I include a CSS StyleSheet from a local drive, in a page served from a web site

Tags:

html

css

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.

like image 220
Bruce Avatar asked Mar 31 '11 06:03

Bruce


People also ask

Can a CSS file be linked to a Web page?

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.

How do you link an external stylesheet to a page in CSS?

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.

Where should CSS files be referenced?

External CSS Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section.


1 Answers

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

  1. Everyone needs to have their files placed in the same local URL otherwise it won't work

  2. You need to setup a local environment (very easy)

like image 193
JohnP Avatar answered Oct 21 '22 07:10

JohnP