How to use css styling in html with multiple directories?


Tags: python,html,css,google-app-engine

Problem :

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?



Solution :

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">

    CSS Howto..

    How to change size of text input but not textarea in jquery mobile

    How do I access font features in CSS?

    HTML/CSS: how to put all
  • in
      on the same line and centered [duplicate]
  • How to add css in php file? [closed]

    Should be Simple: How to preserve data on a page of basic javascript/css/html when going to another page

    how to make sure image shows over my twitter bootstrap 3 input field

    How to create a rounded corner background box using CSS?

    How can I avoid my headers and footers being broken when displaying content wider than the viewport?

    How to resize div size proportional with browser size?

    How do I change the arrow in the select with Chosen plugin?

    How to select ids which contain special characters?

    Show unordered list's bullet points when display:table

    How to change image css after rotating it in JS?

    How to add css class to an element inside nav element

    How to overlap elements inside of a ng-repeat list - position: absolute?

    How to automatically style HTML output of kramdown converter?

    How to set background-size to “cover”, plus a little more in CSS?

    How to fix the alignment of my sub-menu

    how to create arrow between two background images in css

    jQuery dialog: how to control the button-pane height

    Explaining how to use classes with SASS to a Python thinker

    How to dynamically set and modify CSS in JavaScript?

    How to Scale Down a Large Image Using HTML and/or CSS

    how to create circle that cut off one piece with css

    How can I see “:hover” and “:active” properties of elements on a webpage? [duplicate]

    How do I use CSS in Django?

    How to use css to set svg hover color?

    GWT - How to create a drop down menu

    how to create a facebook look alike gallery with css and jquery? [closed]

    How to update current css version in asp.net