 What's up guys my name is John Hammond in the last video We were looking at flask with Python and setting up some ginga to templates So we had a parent template and a child template So we'd have a base page and a home page that would extend from that template and really cool things But now we want to get into like actually like styling our web page and having pretty pictures and cool fonts and stuff like that So those files a CSS files Images fonts and JavaScript files are considered static files because those don't particularly change right so in flask You can like pass those to the end user. They'll be served on the web application By living and existing in a specific file location called static like the same way we have a templates folder We also want to have a static folder So inside that static folder, you'll have the location of files like master.css or style sheet.css or font.ttf stuff like that I like to actually organize my things into like image directory or CSS directory or font directory stuff like that So once those all exist we can actually have those locations in there We'll go ahead and create a new style sheet. I'll call mine style sheet dot css and Let's just have the HTML of the page kind of shrunk. So we'll have the width be just 600 pixels and Put it in the very center of the page right cool Let's have a body with borders on it. Let's say the border left Can be One pixel solid silver and we'll do the same thing with right There's I'm sure there's a neater better way to do that So forgive me, but I'm sure you'll bear with me. I'm like crappy CSS files Cool, whatever now that we have this CSS file. Let's go ahead and Give that to our application. So the base page that HTML which is our template Remember are like global template and layout we can change in the head of every single page to include a new style sheet rel equals style sheet type equals text CSS and Href can equal now we use a special syntax It's actually taking advantage of some of the Ginger template engine to be able to load this specific file because flask is Peculiar with how it like actually has URLs and locations of things it can be passed by using the function at URL for and That will actually build out the path for the file name that we're trying to get at so URL for you'll see in Other use cases it'll actually determine like what is the URL for that function or something specific that we're trying to look for We'll use it eventually, but we don't particularly need to in this case But if you were to give it like a function name as a string argument It will actually determine that okay Here is the route or the URL to actually get to that location. You can see it explained here in the example You can pass in variables like username that will exist again in the context of that URL route or Arguments passed to the specific function and that's pretty neat We'll do that for when we have to do like log in and special sessions and keeping track of like user information But for now we'll just need it in the case of a static file Which will use static as the special string arguments the location that we're looking for and specify the file name as a keyword argument so Inside of a template we have to access that with those special Jinja like notifiers right of the indicators here those curly braces so you can use a URL for static and our file name would normally be Style sheet Dot CSS if it were in the like top of the static directory But since we are in CSS Forward slash because it's the folder that that lives in as you can see static could be in any of these directories But it's in CSS so That's the location that we can pass it Now that home.html will obviously include that when it's rendered out so we can go back run our application and Check out that page Which now should have that CSS intact So we've got cheesy borders we can add padding we've shrunk the center of the page and put it in just in the middle So that looks okay kind of nice We can expand on that and do more cool things with it But that is the basics of loading a static file You can do this like for JavaScript files that again we can create a new directory for that in our static directory Just make dr. J s so we don't have to have JavaScript in line in our HTML We can have input that an external file same thing for fonts, etc. Or images. Let's go ahead and add an image to this In our home.html we can say it is presented by YouTube videos and Then we'll include An image caps lock Based off of a URL here remember URL for Static and image or file name. We'll have to equal image dot YouTube dot PNG and we'll go ahead and put a File in there paste that in If I load this now as this page refreshes We have that image just displayed just like that So that is the syntax and technique for actually loading static files and they're awesome But that URL for function you'll see again and again, but that is how Flask takes advantage of like loading files that aren't relative to your path of the script or anything It has to go through that specific means of loading a static file. So cool. Keep that in mind Thank you guys for watching. I need to give a little bit of a shout out to my supporters here Thank you guys so so much for everything that you do on patreon. It's super duper helps me out I can't say it enough $1 on patreon will give you a little shout out just like this at the very end of every video $5 a month gives you early access to videos that are released on YouTube before they are gradually uploaded and I appreciate all the love it helps me put food on the table Hey, if you'd like to video, please do press that like button Maybe leave me a comment if you're willing to subscribe and if you want to support me check me out on patreon Thanks guys. See you soon