My Flask application is experiencing issues loading CSS files from the project

Question

My Flask application is experiencing issues loading CSS files from the project

My journey with Flask started off smoothly, but I hit a roadblock along the way.

Here's how my project is structured:

In the FlaskApp Folder, there are Templates (containing index.html, layout.html, styles folder, and javascript folder) and application.py.

I added my css in layout.html (layout.css and bootstrap.css) after the title tag like this:

<link rel="stylesheet" type="text/css" href="styles/layout.css">
<link rel="stylesheet" type="text/css" href="styles/bootstrap.css">

Then, at the bottom, before the </body>, I included the bootstrap JavaScript file:

<script src="javascript/boostrap.js"></script>

Next, I inserted some HTML from the Bootstrap documentation page into index.html, including alert messages...

However, no CSS seems to be applied despite restarting the Flask App.

PS: I even added:

 body{ background-color: red; }

to layout.css, but it's still not working.

Thank you for your help!

html css flask

Answer 1

Answer №1

This guide is specifically designed for development purposes.

To begin, make sure you have two directories within your app: static and templates. Typically, the *.html files are stored in the templates directory, while the *.js and *.css files are placed in the static directory.

Your app structure may look something like this:

app
├── app.py
├── static
│   ├── base.css
│   ├── base.js
│   └── index
│       ├── index.css
│       └── index.js
└── templates
    └── index.html

Next, let's discuss how to link these resources.

In your HTML file, update the current <link> and <script> tags to something similar to the following examples:

For CSS:

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

For JS:

<script src= {{ url_for("static",filename="index/index.js") }} ></script>

Lastly, ensure that your Python route returns the correct html page. The simplest way to do this is by using the render_template function.

@app.route("/")
def home():
    return render_template("index.html")

Answer 2

This guide is specifically designed for development purposes.

To begin, make sure you have two directories within your app: static and templates. Typically, the *.html files are stored in the templates directory, while the *.js and *.css files are placed in the static directory.

Your app structure may look something like this:

app
├── app.py
├── static
│   ├── base.css
│   ├── base.js
│   └── index
│       ├── index.css
│       └── index.js
└── templates
    └── index.html

Next, let's discuss how to link these resources.

In your HTML file, update the current <link> and <script> tags to something similar to the following examples:

For CSS:

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

For JS:

<script src= {{ url_for("static",filename="index/index.js") }} ></script>

Lastly, ensure that your Python route returns the correct html page. The simplest way to do this is by using the render_template function.

@app.route("/")
def home():
    return render_template("index.html")

My Flask application is experiencing issues loading CSS files from the project

Answer №1

Similar questions

Revamp Child Relationship in Ruby on Rails Form

How can you switch alignment from left to right when the current alignment settings are not functioning as expected in HTML?

What is the best way to invoke the datepicker function on all rows of table data that share the 'datepicker' class?

I'm encountering issues with adding a div element using Jquery

the width of the table body is narrower than the table itself

Learn how to incorporate PHP7 code into your HTML file through the use of .htaccess configurations

Create a sorting feature for a ListView that allows users to organize items by price in both ascending and descending order, as

JavaScript code to dynamically change the minimum value of an input field when the page

What is the best way to set a stationary background that scrolls on a responsive webpage?

Storing multiple values in local storage

Transforming an HTML jQuery contact form into an ASP.NET solution

Utilizing Javascript to Open a New Tab from Drupal

Using a JavaScript if statement to check the height of a specific HTML element

The challenge of incorporating multiple stylesheets into an express/node/ejs application: encountering the error "Undefined style."

Adjusting the layout of tables for an accordion design

Modifying the input field value in React

Having trouble with flickering in rotating card animation in Bootstrap using CSS?

Uncovering unseen tags generated by JavaScript on a webpage using Python

When the width of the window is hidden, conceal

Setting table row styles for odd and even rows, based on user clicks of an <input type="file"> button