Tim Romanski Tim Romanski - 3 months ago 9
Python Question

How to use css styling in html with multiple directories?

I'm trying to make a simple webapp using Google Appengine with Python, HTML, and CSS. I know that to put a .css styling from separate file into html one should use a link tag, however I can't seem to get it to work. Here is the general directory config:

Main

├── app.yaml

├── files.py

├── Folder

│ ├── files.py

│ ├── Templates

│ │ ├── form.html

│ ├── Static

│ │ ├── style.css


"form.html" contains the layout and "style.css" contains styling. I tried putting in the code from "style.css" directly into "form.html" with a style tag and it worked, however when I use the link tag in the head section of the html file it doesn't work. Here is what link tags I tried so far:


<head>
<link type="text/css" rel="stylesheet" href="/Static/style.css">
<title> ... </title>
</head>


or


<head>
<link type="text/css" rel="stylesheet" href="/Folder/Static/style.css">
<title> ... </title>
</head>


or


<head>
<link type="text/css" rel="stylesheet" href="/Main/Folder/Static/style.css">
<title> ... </title>
</head>


None of these work, what could be a solution?

Answer

You need a url handler in your app.yaml:

- url: /Static 
  static_dir: Static/
  secure: optional

I am not sure about your directory tree. If Static is nested inside Folder, then it would be:

- url: /Folder/Static 
  static_dir: Folder/Static/
  secure: optional

Or, if Static is nested inside Folder, and you want to simplify your html links, then:

- url: /Static  # <== what url to handle
  static_dir: Folder/Static/  # <== where to point that url
  secure: optional

and you can access by:

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