Why isn't CSS working with apache2+mod_wsgi+python3+bottle?
Question: Background: I am trying to stand up an Amazon EC2 instance using the ubuntu
server. I have installed Python3.3.2, mod_wsgi-3.5, apache2, and bottle and
jinja2 for python3. I can get a regular webpage to load using all of these
components, e.g. it recognizes the jinja2 templates, and correctly
interpolates variables passed in the python code to the html files.
Furthermore, if I change the html in `views/home.tmpl` to have `<body
bgcolor="#b0c4de">` then I get the appropriate color.

Problem: I want to implement a good level of abstraction (and learn CSS in
general), so I want my pages to have an external CSS to manage the HTML page
attributes, etc. But I can't get things to work properly and I can't seem to
figure out why.

Minimum (non)working example of the code:

My directory structure is:

    
    
    ubuntu@ip-172-31-47-7:/var/www/helloworld$ ls -lrtR
    .:
    -rw-rw-r-- 1 ubuntu   ubuntu    162 Feb  4 23:55 adapter.wsgi
    -rwxrwxr-x 1 www-data www-data 1044 Feb  5 04:10 helloworld.py
    drwxrwxr-x 3 www-data www-data 4096 Feb  5 04:14 views
    
    ./views:
    drwxrwxr-x 2 ubuntu   ubuntu   4096 Feb  5 04:04 css
    -rw-rw-r-- 1 www-data www-data  431 Feb  5 04:14 home.tmpl
    
    ./views/css:
    -rw-rw-r-- 1 ubuntu ubuntu 34 Feb  5 04:04 homestyle.css
    

`adapter.wsgi` is just a wrapper to launch bottle.default_app():

    
    
    import sys, os, bottle
    sys.path = ["/var/www/helloworld/"] + sys.path
    os.chdir(os.path.dirname(__file__))
    import helloworld
    application = bottle.default_app()
    

`helloworld.py` is pretty simple as well:

    
    
    from bottle import default_app, debug, get, post, request, route, run
    from bottle import jinja2_template as template
    from bottle import jinja2_view as view
    
    @route("/hello")
    def hello(name=None):
        return template('home.tmpl', name=name)
    

`views/home.tmpl` has some jinja2-specific code, but is short. note the `<link
...>` line; I feel like this is where I'm having the trouble:

    
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html lang="en">
    <head>
        <link rel="stylesheet" type="text/css" href="views/css/homestyle.css">
        {% block head %}
        <title>{% block title %} {% endblock %}Jinja2-Templated Webpage!</title>
        {% endblock %}
    </head>
    <body>
        {% if name is string: %}
        Hello {{ name.title() }}
        {% else: %}
        Hello world...
        {% endif %}
    </body>
    

and my `views/css/homestyle.css` is as simple as could be:

    
    
    body {background-color: #b0c4de;}
    

I have tried moving the placement of homestyle.css to be in the `views`
directory, or in the "top-level" directory (`/var/www/helloworld` here); I've
also tried using different links in my `href=`, including an absolute path.
All to no avail, I cannot get this CSS to color my webpage. Any help is
greatly appreciated!


Answer: If possible, let Apache serve your css file; don't put it under `views`. And
remember that your stylesheet's href is relative to your web page's URI, not
to the directory where Bottle runs.

So, if you hit the page at `http://myhost/hello`, then use this:

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

and put `homestyle.css` in `/var/www/helloworld/css/`.

Hope that helps!

