1

When designing a HTML template in my favorite editor (TextPad at the moment) I can view my code in a browser by pressing F11 or the appropriate toolbar button. I have my common css rules in a separate file so my HTML contains the code:

<link rel="stylesheet" href="commoncss.css" type="text/css">

This works when the .css file is in the same folder as the .html file, or if I fully path the .css file in the href property, eg. ///c:/mycssfolder/commoncss.css

However, in a 'live' situation I want the .css file to reside in a common folder which is accessible from a number of .html files (eg. href='css/commoncss.css', where the css folder is configured at web-server level).

How can I achieve this design vs. live dilemma without copying css file to all .html folders (and all the maintenance headaches that comes with it)?

I am using Python 3.1 with Jinja2, but I guess this problem is applicable across any language and template-engine.

Any help would be appreciated.

Alan

Alan Harris-Reid
  • 2,811
  • 8
  • 33
  • 32

2 Answers2

3

If you put your CSS files in a top-level "/css" directory, then your HTML files can just refer to that.

<link rel='stylesheet' href='/css/style_file1.css'>

I don't know much about your framework; sometimes there's an additional layer under the server root to identify an "application" or something. If that's the case, it'd be "/appname/css/filename.css".

Pointy
  • 405,095
  • 59
  • 585
  • 614
  • Hi Pointy - thanks for that. I have since edited my OP and inserted the missing line of code, but I think you guessed correctly what was going on. Regards. – Alan Harris-Reid May 31 '10 at 23:25
2
<link rel='stylesheet' href='../css/stylesheet.css'>

This will move down a level, then up a level to /CSS/.

fiiv
  • 1,267
  • 1
  • 8
  • 16