 Right, so hey guys and welcome back to another Python tutorial. So in this video we're going to be going through how to use CSS to pretty much make a website look pretty and similar to the websites you usually browse. So if you haven't already watched the Flask series that have been created, I really recommend you do as it's going to be linked in the description as a playlist. So go ahead and watch that because these tutorials are linked together. If you only want to learn how to use a few styling elements in CSS and make your website look pretty, go ahead and just watch this tutorial. So first off, what I'm going to go ahead and do is I'm going to go ahead and open up Visual Studio Code where I have going where I'm going to be having my website. So let's give this a moment to load up and I'm going to close my previously open file because I was working on it before and close this folder. And what I'm going to do is open my folder. So I'm going to go file open folder and then I know where it is. So I'm going to go on my desktop into YouTube and I'm going to have to find it in the last tutorial that I posted. So pretty much we're working with the my folder, my website folder, where all my website assets are. So we have worked in a way where in the last tutorial we were able to learn how to pretty much render static files. So we were able to render static images and static style sheets. So we were able to link a style sheet to pretty much all the web pages that we have, so all the templates. So in this tutorial, we're mainly going to be messing with the main.css file to pretty much add more styles to it. So as you can see, it's pretty much got only two different stylings. So for the body and for the different header tags, we're going to be changing that to make our website look a lot more decent. I'm going to zoom in, first of all, before I forget. And then what I'm going to do is apart from our main.css, I'm also going to open up my index.html page, which is the main page that I have going. And I'm also going to open up my layout.html page, which is pretty much used by all my HTML pages. So this layout page right here is inherited by each and every page that is in my templates folder. I'm going to go ahead and run my site to show you what it looks like currently so that you have a rough idea of what we're dealing with here. So I'm going to have to go to CD. I'm going to quickly open up my directory. So file explorer, I'm going to copy and paste it in here instead of having to manually browse to it because that will take me forever. YouTube, YouTube, part six. Code my website. Let's grab this. So control C. I'm grabbing the location of it. And then I'm going to change my location to that. Cool. So wait, first of all, I need to do that. And now we're in the folder. So what I need to do is type in set flask. And then I'm going to do set flask debug equals one so that we enable debugging. So this way, we don't have to keep refreshing the server and the server will pretty much run and handle the error by just showing it as an exception instead of crashing completely. Now, lastly, I'm going to do flask run and the server should be running now. Cool. So if I go ahead and open up a Chrome window, I should hopefully be able to show you what we got up to in the last tutorial, which is a pretty ugly looking website. So this is what we had in the last tutorial. I'm just going to press control F5 to make sure that these are all the changes. So as you see, we were going for a sort of store, online store that we're creating for my merge. Obviously, this is fake and just for the project. Now, it would be nice if these featured projects or the popular, popular products, I mean, were shown in inline. So instead of having to scroll through them, obviously these do fit horizontally instead of being vertical. So that's what we're going to be doing. We're going to be putting all of these products into a little box and then we're going to give the box a white color. And then we're going to place the box in the center of our screen while having this inline. So instead of having this in a row, we're going to have it in a column. Cool. Or however, if I've said it wrong, we're going to have it in a, let me see, row column. I usually get confused with this. So we are going to have it in a row. So we're going to have this show up in a row. So the products are going to be in a row in that box. So first up, what we have to do is go ahead into our layout.html. And in there, we have to, actually we need to go in our index.html because that's where the products are showing up. So in here, what we have to do is actually, I've already done it here for some reason. Why is that? Main.cs, it's okay. So what we'd have to do in here is I'm going to get rid of the bit that I've done already so that we can do it together. So this is the code that you should have by default. So what I'm going to do in here is as you see right here, this is where the for loop starts and this is where the for loop ends. And the section between them displays each product as its own entity which shows the price of the product, the name of the product and the picture of the product. So we want to wrap all of this into a div. So div is like a container that holds, that can hold multiple elements together. So we're going to hold all of these elements. So these elements right here, we're going to hold them in a div and we're going to give it a class name of, let's give it a class name of featured products, container and we're going to give it a class name of featured products container because obviously this is going to hold the different featured products that we have. And we're going to end the div right at the end of the for loop. So we're going to now go ahead and indent this appropriately so that it can look nice. Now inside there, what we want to do is we also want to have another div in there which is pretty much going to hold the different products. So we have a div for the products container and we need to have a div for the different products. So to do this you want to go inside your loop and in your loop you're going to create another div which is going to have a class name of featured products. Cool. So we have a featured products container which holds all the products and we have a featured products div which only holds each individual product. Now this needs to be inside the loop. So bear in mind you need to close the div tag appropriately so the featured products div should be after the for loop and the featured, I mean the featured products container is after the for loop and the featured products is inside the for loop. So it needs to match. Cool. So once you're done doing that what you want to do is we're going to be styling this. So let's go in our main.css file since we've already grabbed this together. What we want to do in here is we're going to be going to our featured products container and calling that class in here. So the div we just created, we can call it in here. So we just type in the name and when you use dots that just means you're referencing to a class. If you use hashtag it means you're referencing to an ID. Since we use a class we're going to use dots and then we're going to type in the class name which is featured products container. Now what we want to do is I'm going to set a width of 80% and then I'm going to set a background color of white. So these are different properties in CSS that you can set to your element. Now this is going to be an entire element of all the products that we have. Let me go ahead and show you what this does. So if I refresh, as you see right here it's gone ahead and put white background all around the featured products container which holds all the products. So nothing else is white, only this bit. And it's gone ahead and given it a width of 80%. As you see it's limited. It's not all over the page. It's only half, almost three fourth of the page. That's because we've limited the width. Now we also want to put it in the middle which is when we're going to be using the display block code. So I'm going to type in display block which means we want it to display in a specific manner that it can be, it's like in presentation or PowerPoint when you do text wrap into square or tight. It's something like that. It allows us to put it in the sensor. And then we set the margin to zero and then type in auto. So these two lines of code, line 13 and line 14 are going to help us put the div in the center of our screen. So I refresh my page. So remember control and F5. As you see right here, it has put the div in the center of my screen. So that's looking good as well. Now what we want to do is we want to grab the products, individual products and then put them in line, so in a row. So we want to put them in a row instead of columns because it looks a bit weird at the moment and it will also save a lot of screen space for us. So to do that, we are going to have to refer to the class that we created for the featured products which was featured products. So dot featured products. Now this may be different for you if you change the class name. So make sure you take that in mind as well. So to display it in a row, we're going to do display inline block because we want it to display inline and we want it to also be block. And then we're going to do text. Okay, let me show you what each line does. So if I do inline block, it will pretty much show up next to each other which is what inline block means. Now I will also, what I want to do here is as you see right here, this text is all the way to the left. So all the text is all the way to the left. I want to put it in the center. So what I'm going to do is I'm going to type in text align and then type in sensor. Now if I refresh, so control F5, as you see the text goes to the middle and it's looking a lot better than it did before. Now you might say it's pretty close to each other. So we might want to add a bit of spacing as well which is exactly what we're going to do. So before we add some spacing, as of now, these divs right here, so these divs that hold each product on a width of 100% which pretty much means that they're only going to take as much space as they need. We're going to specify a specific width for them so that they don't run over our main container. Now we're going to give it a width of 25%. So it's going to be 25% of whatever window size it is. So it's going to inherit 25% of the container div. And then what we're going to do is we're going to do a margin left. So it's going to leave some space from the left and we're going to do 5%. Now we could have done five pixels but pixels is a static amount whereas percent is dynamic so it will adjust according to the size of the window which is why we're going to be using percent. Let me refresh this. And as you see right here, it's going ahead and left a 5% gap from the left. So this product has left a 5% gap. This product has left a 5% gap and so has this one from the left. Now if I reduce my window size, as you see right here, the website is scaling as well. So the website is scaling. The divs go smaller and the products as well, they're shrinking. So as you see, the size reduces to only 20% of the container width. Now you might say the image looks messed up because obviously it is. That's because we haven't added any scaling to our image. We can fix that in a second. So to fix that, all you need to do is since we have only few images, we're just going to refer to it directly using the tag name which is image. Now this will target pretty much all the images that we have on our website. So what we're going to do is we're going to use featured products and then we're going to do space and then type in image. Now what this is going to do is it's only going to target images that are in the featured products class, not all of the images on our website, which is what we want to do. So we're going to do position relative so that it's relative to the div it's in and then we're going to set a width of 50% of whatever its parent's div is. So now if I refresh this page, as you see the images are reducing size to 50% of the apparent div. So the apparent div is this product, is this featured product div we have right here. So it's the 25% of this. So it's a lot of math being involved but as soon as you start coding in CSS, which is not really hard, you get used to the concept. Now obviously the text is a lot bigger than you expect because you can change that using media queries. If you'd like to learn about media queries and how to change the text and other elements, you can drop me a comment and I will do a tutorial on that. But as of now it's looking pretty good because we're scaling the website on different screen sizes and it is scaling perfectly fine. Cool. Now since this is looking fine, what we're going to be doing next in this tutorial is also going to be adding a navbar to the layout.html which is going to be applied to pretty much all pages. So the navbar which is going to hold like hyperlinks to go to your about contact and homepage is going to be on all the pages obviously. So we're going to add that to our layout.html page so that it can be applied to everything. So let's go to our layout.html page and then in there what we're going to have to do is actually add a new code block so that it can be inherited by or inherited by all the HTML files that we have. So where do we want to actually have hyperlinks? So for me I want to have my navbar at the very top over here. So I want to have the navbar on the left and then I want to have this Johann store and best merge in the game in the middle. So I'll show you what I mean by that in a second. So what I want to do first off is I'm going to, after the body tag, I'm going to create a block which is going to be specifically for my navbar. So I'm going to do block and I'm going to do nav just as a short form. And then I'm going to copy and paste that line and end the block for nav as well. Now in this, as I said before, I want to have the Johann store and best merge in the game text. So what I'm going to do is I'm going to go in my index file right here and I'm going to grab that text. So I'm going to grab this from content because right now it's in the content block. I'm going to grab that right here. Let's get rid of this. And what I'm going to do is go in my layout.html and I'm going to paste it in my nav. So I want it to be at the top instead of in the content. So if I refresh now, nothing's going to happen obviously because it's still on top. But if I add some color and the hyperlinks later, this will all make sense. So as of now, nothing's going to happen but we are on the right track. So obviously another change that will happen is since it's in the layout.html and we have a block nav, what's going to happen here is that it's going to be shifted to all pages. So if I do this on about, it's going to have it there as well. So obviously you need to have this because you'd have like basic information in your nav such as your logo, maybe socials and such other things depending on obviously how you want your website to look. Now if I do contact, it should have it as well. Cool. So what we want to do now is go back to our homepage and work on there. So what I'm going to go ahead and do is I'm going to add the links to my different pages. So I can do that by simply creating an anchor tag and we're going to be using URL4 which we learned about yesterday. So in the href we're going to do a code block where we're going to do URL4 and then we're going to do, now in here, if you guys remember and if you've been watching from the start we imported blueprint and then we called it app underscore blueprint. So if I go to my app blueprint file right here, as you see this is the app blueprint variable or which is initializing this class into an object. So we're going to be using this app blueprint object that is already rendered to pretty much access the different routes that we have. So what we're going to be doing is we're going to be typing URL4, app underscore blueprint. Now you have to call name, I mean you have to type in the name of your variable that holds the app blueprint object. So you use that and then use dot whatever page you want to access. So I'm going to do dot index because that's my index page. I want to access my index page at the moment and I'm going to give this hyperlink a name of home because that's my homepage. I'm going to copy this and I'm going to paste it twice because I have three URLs in total. And then I'm going to change this app dot blueprint to dot about because that's my about page. I'm going to change this to about and I'm going to change this to contacts because that's my contact page and this should change as well. Oops, contact with the capital C of course. Cool. Now let's put this back and let's see if this works. So refresh and as you see right here, this is on the top in the nav bar and this is two. So if I click on home, we are refreshing because this is the homepage. If I click on about, we have been reached to the about page and if I click on contact, we are being redirected to the contact page. So that's working perfectly fine. Now let's go ahead and style this nav bar just to bring kind of a nice end to this tutorial and make the website look a bit better. So let's go into our CSS files as you may have already guessed and we're going to be styling our nav bar. So before we do anything, what you actually want to do is create a nav container. So as we did for our products, featured products, we created a container. So we're going to do that. So let's go in and layout dot HTML. And in here, what we want to do is what I'm create a new class. I mean a new div. So at the start of the nav, we're going to create a new div. I can start a new div with a class by just typing in dots and then it creates everything for me. I could type in nav container because that's going to be the container that stores all the information for my navigation bar. And then I'm going to close it to the right intent indent which is right here. And it's going to store all of this content. So these two, this header tag, this paragraph tag and the anchor tags. Cool. Now I have something to call. So I'm going to go back in my main.css file and I'm going to call my navigation container. So dot nav container. Oops. And then what I'm going to do first off is I'm going to probably take off the text decoration. So as you see right here, this hyperlinks look a bit ugly because by default I have like an underline and all that. So if you want to take that off, you need to use a property called text decoration and you can set that to none and it should pretty much take off those ugly lines. Okay, hasn't. Let's refresh. Okay, that's because we need to access the hyperlink separately. So we'll do that in a second. This nav container is for the entire container. So it includes content from here to here. So first off, what we're going to do for this is we are going to add a background color. So that we know what the container looks like. So background color black. Let's refresh the page. And as you see right here, this is what the container looks like. And you might say there's a bit of space from the top and from the left. Now we can get rid of this space by going into our body and then typing in margin zero because by default they add a bit of margin. And if I refresh, that is gone. And I just need to find out why there is a bit more space right here which I'm going to find out right now. Let's see, body. HTML. Display block. We've got a nav container right here. We've got the center. And then we've got the URL. So I'm going to, what's the error? Okay, that's fine. What I'm going to do is I'm going to try adding a padding of zero as well. And then I'm going to try refreshing. Okay, so since that doesn't work as well, maybe there is some content there that we can't really see at the moment. Or we'll fix that in a moment anyway. So what we have to do right now is figure out how we want to display the nav container. So we've set the background to black and in there what we want to do is before we do anything in here, I'm going to make the hyperlinks in there white so that we can actually see. So I'm going to do nav container. And then A because A for hyperlinks anchor tag. And then I'm going to set the text decoration to none. As I said, that takes off the underline and ugly stuff from the default anchor tag. Set the font size to 20 pixels. So pretty obvious stuff. Set the font family to aerial, which is pretty much the same font family that's being used around the website. I'm going to add a padding. Okay, let me do a color of white and then I'm going to show you what it looks like. So if I refresh now, as you see right here, this is what the website currently looks like. So the links are very close to each other, which is why I'm going to add a padding so that they can be a bit spaced out. So I'm going to add a padding. Off to, not right, just padding in general, 20 pixels so that it's a bit spaced out from each other. If I refresh, as you see, they are spaced out from each other now. Now what I want to do next is, that's it for the anchor tag. What I want to do next is find out what tags are in here. So let's go ahead and highlight this. Highlight this and we're going to inspect. So what do we have in there? We have H1 and we have... Where's the other one? H1 and we have paragraph. So what we're going to do is go in here and then we are going to go into our nav container once more. And this time we're going to call H1 and our paragraph tag and then we're going to set the color to white. So this should technically overwrite the previous styling that it had unless, okay, nevermind. It doesn't do that. So what we can do is we can just get rid of the H1 right here. So what we're going to do is get rid of that and get rid of this. And we're going to do a separate one for H1 and paragraph. So H1 comma P where the color is going to be white. Now, obviously you could have used classes and stuff but I'm just running a bit. We have already spent a lot of time on this tutorial. So we're not going to do that. Now I'm going to have to also copy the font family in here. So I'm going to copy and paste that. And as you see, we have a nice looking nav bar right now. So you might say that there is some space we should probably give it a bit more height, right? So that's what we're going to be doing next. Let's go in our nav container right here and we're going to give it some height. So we're going to do padding top, which means it's going to give it some height from the top and we're going to do 20 pixels there. And we're going to do padding bottom to be 20 pixels so that it gives it some more height as well. Now, if I refresh, as you see the padding top pretty much covers the top bit. Now it's nicely hidden. And we have, this is nicely centered as well, whereas the hyperlinks are showing up nicely too. Now it would look nice if we had some kind of hover animation so that when we hover over the links it kind of shows something there. So that's what we're going to be doing next. Let's go ahead and main.css. And now what we want to do for the hover animation is that we want to go and type in a for anchor tag and then type in hover, which is the magic key word to pretty much create an action when the user hovers over it. So it's an event. And then what we want to do on hover is we want to create a border at the bottom of the hyperlink which is going to be red in color. It's going to be five pixels thick and it's going to be solid. So there's different options such as dotted and stuff but we want it to be solid. Now let's refresh. And as you see, there's nothing changed but when we hover over there is a little red line that is showing up which is the border bottom that we just created. Now if I go to my about page this is consistent on all pages. So this nav bar is going to be consistent throughout my website because that's just how the layout.html page has been made to work. So it is so that all the other HTML files inherit the details from it. So this is looking pretty interesting right now. So this is the basic website that we have going. It looks decent because we have a nice nav bar. This body could probably improve the bit but for now we'll roll with it. Obviously I'm going to show you a few more things that you can do in Flask and more fundamentals before we can jump onto an actual project. But I thought it would be cool if we made our store website look a bit better and then started working on it and treat it like an actual store. Anyway guys that was it for today's tutorial. Hope you have enjoyed it and learned a lot about CSS. If you guys have enjoyed this tutorial please make sure to like, comment, share and subscribe because sharing is very important. You guys have really smashed it in the last month when I was uploading every day. I'm going to try to upload at my six p.m. schedule as much as possible but it's going to be a bit difficult at the moment due to me starting my new job as well. If you guys would like to donate the channel directly you can do so by either signing up as a patron using the Patreon link in the description or you can purchase a Super Chat emoji or a highlighted message when this video premiers. Like always guys I would like to thank you for all the support you've been showing me and I'm very grateful for it. And I will see you beautiful faces in the next Flask tutorial. Peace.