CSS won't work with Flask
Question
I have been working with flask trying to get the css properties to work but even though the css file is being included, the properties don't reflect on the elements.
cards.html
<!DOCTYPE html>
<html>
<head>
<script src="{{ url_for('static',filename = 'script/checkers.js')}}"></script>
<script src="{{ url_for('static',filename = 'script/lib/jquery-1.11.0.js')}}">
</script>
<link href="{{ url_for('static',filename = 'checkers.css')}}"/>
</head>
<body>
<div id="board">
</div>
<div id="glow">
</div>
</body>
</html>
The CSS is all there but it doen't work. The file is included but it doesn't show the properties.
CSS: checkers.css
#board
{
height:300px;
width:300px;
background-color:black;
}
body
{
background-color:white;
}
div
{
background-color:black;
height:300px;
width:300px;
}
.glow
{
border:2px solid blue;
}
2 answers
solution1
3 ACCPTED 2014-06-17 14:43:22
This doesn't seem related to Flask.
An HTML <link tag requires the rel attribute to be set to stylesheet . In your case the browser will have a <link element it its DOM, but (lacking the rel="stylesheet" ) it won't know what to do with it.
A solution to your problem is:
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='checkers.css')}}"/>
That said, you have to put the checkers.css file right in your /static/ folder in your flask project (ie /static/checkers.css ).
solution2
1 2014-06-17 14:20:31
Try this:
Open the html page with browser and check from source code if the generated link to the css file is right or not.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.