how to add css in flask app

To add CSS in a Flask app, you can follow the steps below:

  1. Create a static folder: Within your Flask app directory, create a folder called "static". This folder will store all your static files, including CSS.

  2. Create a CSS file: Inside the static folder, create a CSS file with a .css extension, e.g., "styles.css". This is where you will write your CSS code.

  3. Link the CSS file to your HTML templates: In each HTML template where you want to apply the CSS, add a link tag in the head section. The link tag should have the following attributes:

  4. href: Set this attribute to the relative path of the CSS file. For example, if your CSS file is in the static folder, the href should be "/static/styles.css".

  5. rel: Set this attribute to "stylesheet".
  6. type: Set this attribute to "text/css".

Here's an example of how the link tag should look like in your HTML template:

html <link rel="stylesheet" type="text/css" href="/static/styles.css">

  1. Write your CSS code: Open the CSS file you created in Step 2 and start writing your CSS code. You can style your HTML elements using selectors, properties, and values. For example:

```css body { background-color: #f2f2f2; font-family: Arial, sans-serif; }

h1 { color: #333; }

.container { width: 80%; margin: 0 auto; }

/ ...more CSS code... / ```

  1. Save and run your Flask app: Make sure to save your CSS file and run your Flask app. The CSS styles should now be applied to your HTML templates.

Remember to replace "/static/styles.css" with the correct path to your CSS file if you have a different folder structure.