Okay, so I'm admittedly quite new to programming, but I thought I had CSS referencing all figured out...turns out, not quite. I've tried including stylesheets both internally and externally, moving them around in different folders, you name it. But when I recently revisited an old app of mine where the CSS was initially embedded within the HTML but later moved out and referenced separately, the CSS mysteriously stopped working altogether. Here's how my directory is structured:
App Name (folder)
- static (folder)
- main.css
- templates (folder)
- template_referencing_css.html
- main.py
- app.yaml
Here are some of the ways I've attempted to reference the main.css file located inside the static folder:
<link type="text/css" rel="stylesheet" href="../static/main.css" />
<link type="text/css" rel="stylesheet" href="/static/main.css" />
And here's what happened when I moved main.css to the templates folder and tried referencing it from there:
<link type="text/css" rel="stylesheet" href="main.css" />
The contents of the css file are just longer versions of properties like:
body {
font-family: sans-serif;
width: 850px;
background-color: #F0F8FF;
color: #008B8B;
margin: 0 auto;
padding: 10px;
}
.error {
color: red;
}
label {
display: block;
font-size: 20px;
}