3

I looked over some of the same questions on stack overflow and tried all the best answers. None of them worked.

I am learning html5 with CSS stylesheet. I looked over a website tutorial of building a web page with login form by flask. So it has this base.html file which has some code links to a css file:

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>RELAX AND WORKOUT</title>
  <link rel="stylesheet" href="bulma.css" />
</head>

Originally, followed by 'href' was a http link and it worked. But I downloaded the same css file and put it in the same folder as the base.html file so I can play with this css file.

They are both at ./project/templates/the_file

This is the link to download the css file: https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.css

It was also originally the tutorial author put after 'href='. But when I changed it to my local file name 'bulma.css', it does not load the stylesheet at all. I also tried absolute path and relative path. Neither of them worked. I'm running it on Windows 10. Using Python 3.7 and flask. So in my case, how do I make the html load this local css file?

Edit:

Ok, I made it work eventually.

I made a new folder called "static" and put the css file inside it. Then I changed the path to this:

<link rel="stylesheet" href="../static/bulma.css" />.

Does it mean flask treats the "templates" folder as a special folder only for html templates, it does not recognize other file formats?

But I saw a question which the person put his css file in the same directory. The answer is to just add a dot and it worked. That was why I put it with all the other html templates in my templates folder. But it never worked in my case.

Improve this question
3
  • You could try setting the 'href' to cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.css Commented May 3, 2019 at 21:39
  • @RylandGoldman Yes I know, and it worked. But it's hosted online, which means I cannot modify the css file. I want to modify it and see how the web page changes. That's why I downloaded it. Commented May 3, 2019 at 21:41
  • include your file structure to get better answers Commented May 4, 2019 at 7:44

4 Answers 4

Reset to default
1

From flask docs:

Flask automatically adds a static view that takes a path relative to the flaskr/staticdirectory and serves it. The base.htmltemplate already has a link to the style.cssfile:

{{ url_for('static', filename='style.css') }}

You need to create a folder called static inside your flask app directory with your static files inside, ex.: CSS, images, etc.

In your html code use:

<head>
    <link rel="stylesheet" href= {{ url_for('static', filename='bulma.css') }}>
</head>
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Try changing your href="bulma.css" to href="./bulma.css" and see if it works.

Improve this answer

Comments

0

Are you sure you don't have to go into the templates folder? "/templates/bulma.css"

Improve this answer

Comments

0

Hit F12 to open up the development pane. Go to the network tab. Refresh the page. Is the file listed in that list? You may have to refresh your cache to have it take effect. To do that: CTRL+SHIFT+R. If the file is listed in there you can view the preview to make sure it's current, if not you will still need to do a force refresh on the cache.

As for URL's you can also use an absolute file path starting at the root with href="../project/templates/filename.css" (use 2 periods). The following is a website for more info on this:

https://www.w3schools.com/html/html_filepaths.asp

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.