 Right, so hey guys and welcome back to another Python tutorial. So in this video we're going to be learning about how to pretty much beautify our website or make it look pretty using CSS. So for this we're going to be learning about a new method of rendering or pointing out to pretty much static files instead of using the static folder method that we have been using. So that's the proper method of doing it which is why I'm going to be introducing it to you guys in this tutorial. First off I'm going to go ahead and open up Visual Studio Code and bear in mind guys if you haven't already watched my series on this from scratch I really recommend you go ahead and watch a few videos before this because that will make really sense as this video will be in line with those tutorials. So in the previous tutorials we kind of worked on this dummy store that we were creating using Flask. So that's what we're going to be working on today and we're going to be using CSS to make it look pretty. So in the last tutorial we learned about how we could use blocks to pretty much use parent and child classes to allow the use of a layout template. Today I'm going to make the use of this file a lot more relevant and how it is more useful than it was in the last tutorial. So first off as I said before we're going to be learning about the proper way of rendering out or pointing to static files. So by default or by documentation wise this static folder that we mentioned right here in our Flask initialization is set to a folder called static. So instead of having to do this let's go with the default behavior. So what I'm going to go ahead and do is in my app.py since I've specified and changed my static folder to images I've only now realized that instead of only having images I'm also going to have static files such as JavaScript files and some of my CSS files too. And so they're all in an images folder because that just doesn't make sense. So what I'm going to go ahead and do is delete this off and once I delete this off what happens is that my static folder by default is going to be a folder called static. So what I'm going to do is go in my editor section right here and then create a new folder not in templates but in my main directory I'm going to go ahead and create a new folder and I'm going to call that folder static. Now in my static folder I'm going to put all these static stuff. So my images that are static to this website are going to go in this I'm going to drag it in my static folder and move it in there. So as you see right here so I've got my static folder and then in my static folder I've got images. So static folder and in the static folder there's images. Cool. So in my static folder I'm also going to have another new folder that's going to be called styles. So in my styles folder I'm going to be storing the different stylesheets that I'm going to be using or the CSS stylesheets that I'm going to be using. So let's go ahead and create a new CSS file by typing in main.css which is going to pretty much include the main styling for my website. Now we'll come back to that file a bit later. So as of now if I run my server so if I go to cmd, cd let me zoom in a bit. I'm going to go to cd desktop, cd my website because that's where my app.py file is and then if I do I'm going to enable debugging so that we don't have to keep restarting the server and then I'm going to run my server. Let's go ahead and quickly open up a Chrome window and let's go localhost 5000 because that's where my website's being hosted. So as you see right here if you refresh the first time due to the fact that Flask works with your cache that is being used by Chrome a lot you might be able to see that your images load up just fine but then what you want to do is every time you refresh your website make sure you're hard refreshing it by pressing control first and then F5. So you need to press control first and then F5 to hard refresh which pretty much resets the cache as well. So all the recent changes will show up rather than it being the website being stored in the cache and showing you an out of date version. So make sure you press control plus F5 and then you'll notice that your images have disappeared. Now this is because we changed the we have taken off the static folder name from being the images folder. So we can deal with that problem quite easily as I said before the proper way of doing this is by using URL4 which is a class that already existed Flask. So I'm going to go in my app.app underscore blueprint file which pretty much includes the different routes to my so I'm going to control be that includes the different routes so my home routes my about page routes and my contact route and it also includes the rendering of my files. So what I'm going to do is I'm going to go from Flask import blueprint render template and I'm also going to import URL4 which is another class we're going to be using to point to our directories or the files that we want. So once I'm done with that I'm done with my app dot blueprint app underscore blueprint file I can close that off. Now let's go back to my file explorer and in my templates I'm going to go in my index dot html because that's the main website showing all our featured products. So our featured products right now the images link is broken. That's mainly because we are trying to access this product.img which is a IMG is just the property of our product dictionary which is coming from here. So if I open this it's coming from popular products and it's running through all of these different key value pairs and then it's getting the IMG key value. So the value is pretty much the directory. So forward slash images forward slash images dot jfif so it pretty much gets that so I'm going to close that off since I explained that. Now since that doesn't work out very well since we changed the we got rid of the static folder being custom what we need to do is in this code block we're going to type in URL4 now this is due to best practice so URL on the score 4 the class that we just imported two brackets then in here we want to type in our first argument to be in double close static and then the second argument is going to be the file name. So now the first argument is static because we're saying use the static folder now don't change this to anything else because it won't work by default it just looks for what the static folder has been set to since we haven't set it to anything it just looks for the static folder which is right here so now if I set the file name I'm going to go ahead and type in the file name of my image now as I said it's hunting it from product and then it is going to do product dot IMG which will give it the image address since this is running through a loop now hopefully this works first time let's make sure everything's in there looks fine let's go ahead and refresh up page if I go back in my store and my hard refresh as you see right here that has worked out completely fine now you may have noticed that every time you're linking a new item such as a hyperlink or an image you would have to use URL4 because since we are not using a specific specific folder being made public so it's a lot better than doing that so that's how you do that and now to the actual bits of making our website look prettier by linking a CSS file to it so to link a CSS file what we need to do is as you notice here we don't really have a head section so the head section is where the CSS file would usually be stored now we don't have a head section because obviously we are inheriting that from the layout dot html page as that is the basic layout followed by all websites so we're going to use that so layout dot html is where this is being inherited from what we're going to do in the head section is go ahead and import a CSS file now this CSS file is going to be important pretty much all the child elements that extend the layout dot html file since if I open here it says extends layout dot html it's going to have the CSS file so every file that says that so I'm going to go ahead and type in a link tag so link rail equals style sheet type equals text fold slash CSS and then href equals now in the href you need to specify the directory to where you can find your spot find your style sheet so your style sheet is going to be found your style sheet is going to be found in your static folder and when you go in your static folder you have another folder called styles so you're going to do a forward slash styles oops styles and then you're going to do a forward slash and i'm called the main style sheet which is i am assuming main dot yeah it is main dot css so i'm going to type in main dot css in here and this should just load up the style sheet on pretty much all the website step all the website files that we have now let's make sure it's doing that by minimizing this and hard refreshing so ctrl f5 now let's zoom in a bit here i'm going to right click and inspect and we if we go to the head section as you see right here we have link rail equals style sheet text css and the href is styles and main dot css now there are a few areas here this is for our main dot css so i wasn't able to load it for some reason let's go ahead and see why it wasn't main dot css i might have spelled something wrong or it's just not refreshed i'm assuming okay let's try and restart our flask server so let's do that and then let's refresh okay it's still not able to grab the css file let's go ahead and see why maybe we need to add some content to the css file so i'm going to go ahead and add something in here so i'm going to go ahead and add a h1 tag oops where am i tapping in let's just get rid of that i'm going to go in my styles and in my main dot css and i'm going to set properties for my h1 h2 h3 h4 and h5 tags so all of these tags are going to have a font family of um aerial and then they're going to be colored in black cool so if these properties are applied to pretty much all these header tags that means it's working let's refresh and clearly it is not working so let's go ahead and see why that's happening um styles so if i go back to my layout.html and okay so clearly i have forgotten to use URL4 so this is the main issue every time you're linking any file right now you're gonna have to use URL4 so that the um so that it recognizes the URL we're going for so in here we're going to go ahead and add a code block by doing double curly braces and then we're going to do URL underscore 4 with a bracket in the start and a bracket in the end and we're following the same syntax so the static folder is still called static and then we're going to do comma file name oops file name equals and then we do not need beach marks yes we do need beach marks but single quotes actually so we need single quotes since this is not like a declared variable so let's save this up um refresh our page and it's still not found it for some reason let's go ahead and see why there is so it's still pointing towards the right address so URL4 um static file name equals forward slash styles main.css so let's go ahead and refresh our server i'm gonna do this flask run refresh and it is still not able to find it let's go ahead and see what we've done wrong let's see so i've got my static folder i've got my static images and then we've got the static oh i see so what's going on in here is my static folder the the styles folder is technically being placed inside the images folder for some reason so i need to move that out and i need to move that in my static folder so move that there and as you see now these two folders so images and styles are in the static folder before that the styles folder was in the images folder for some reason let's go ahead and hard refresh now and as you see right here the error has disappeared and my website text so all of the text that had h1 to h5 has changed to the right font apart from i'm assuming a specific yeah so this is a p tag that's what it hasn't changed so we can change that to i go ahead in our code in our style sheet so we can go in our main.css and do a comma p and now if i refresh the price has changed as well cool so i mean the discounted rate has changed as well cool so let's add a few more basic changes to the styling let's go ahead and do um body and for the body we're going to do background color off let's just do great light gray let's do light gray and then i'm going to do that should be fine let's go ahead and refresh so we've got a little bit of a change we've got a sort of um light gray background going and then we have our different products here now you can make different css changes in here to any element you have on your different websites because this style sheet right here will be imported into pretty much all your websites so including about and contact us so i do forward slash about it will show me that and as you see the changes have been applied so the css is being applied and then if i do forward slash contact the same applies here so as you see the changes have been applied background is gray and the font is being changed as well so that is working perfectly fine that is the main advantage of actually using a template because now we don't have to import the css file separately in all the files we just do it once in this layout.html file so it's quite basic and simple right so that was the end for today's tutorial guys hope you have been enjoying this entire series i'm really sorry about the miss on the upload yesterday but you probably did not realize anyway since this is not the biggest youtube channel in the world once again guys thanks for all the support you've been showing me in the recent tutorials if you guys have any new ideas on future tutorials drop them in the community tab under my post if you guys would guys would directly like to support the channel you can do so by either purchasing a super chat emoji or a highlighted message when this video premieres or you can also sign up as a patron using the patreon link in the description as this really helps the channel grow you can also consider following up my socials and joining the discord chat for a lot of fun and as always guys i will see you beautiful faces with another flash tutorial in the next video peace