CODEWITHSUNDEEP
pythonhtmlcssflask
andrrrify
andrrrify

Reputation: 33

Flask is not reading CSS file

I've scoured for a typo and tried several fixes I've found across this site and my styles still aren't being applied. The directory structure is as follows:

ResumeSite
----/static
--------/img
------------img1.jpg
------------img2.jpg
--------style.css
----/templates
--------index.html
app.py

The CSS file is as follows:

/* CSS Variables */

:root {
    --primary: #ddd;
    --dark: #333;
    --light: #fff;
    --shadow: 0 1px 5x rgba(104, 104, 104, 0.8);
}

html {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--dark);
}

body {
    background: #ccc;
    margin: 30px 50px;
    line-height: 1.4;
}

.btn {
    background-color: var(--dark);
    color: var(--light);
    padding: 0.6rem 1.3rem;
    text-decoration: none;

}

.showcase h1 {
    color: red;
}

In the index.html file, I have the stylesheet linked properly with Jinja syntax:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='style.css') }}">

I'm not sure at this point what the issue is, when I run the server, I get a command line message that states: 

GET HTTP:1 200 -

I believe the 200 means success however no styles are being applied no matter what I've tried so far.

Upvotes: 0

Views: 1350

Answers (2)

andrrrify
andrrrify

Reputation: 33

The problem was simply that the CSS file resided in the top level of the static directory and not within a sub-folder named 'css'. Thank you @Manish Mahendru for mentioning this, I will have to remind myself in the future the proper structure for a flask application.

Upvotes: 0

LuckyB
LuckyB

Reputation: 33

I can't tell from the code you posted, but if you are using Boostrap, make sure your reference to style.css file is made AFTER the reference to bootstrap.css

<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='bootstrap.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='style.css') }}">

Otherwise your changes will be overridden with the default bootstrap styles

Upvotes: 1

Related Questions