CSS file is connected to HTML Flask

CSS code is executed in HTML documents in 3 ways: Inline - Inside the HTML elements, use the style attribute. Internal -We must use a style element in the head section. External - Use a link element to link an external CSS file. When the href attribute is present, we can use the rel attribute. The href attributes describe the location of the CSS file. The type describes the content of the linked file or document between the style tags. As the default value, it has a text or CSS. In our code, the CSS property is color only. Based on the color, the appearance will change. 

Inside the templates folder, the HTML files are saved. CSS stylesheets are saved into static files. The flask has a separate folder for HTML and CSS. You can put CSS, Javascript, images, or other files into static files. We only must create that folder, which should be named static. Creating another folder inside static and naming it CSS is a good practice. Save this file as a main.css file in the “staticFiles” folder. 

The following is a simple format for link tag: 

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

Here is an example of how to connect a CSS file to an HTML Flask: