How to Style a Modern Website (Part Three)

Key Takeaways

hello everybody welcome to the final video on how to style a modern website in this video we're going to be taking the store page that we've designed earlier with HTML and style it to look exactly like this image on the right here before we get started I want to say if you have been enjoying this series let me know down in the comments which one of the CSS properties that we've used that you'd like me to cover more in depth in a future video I'll make sure to read through those find the best and most popular ones and cover those in later videos to go more in depth so you guys have a better understanding this CSS properties that we're using to style these banned web pages now let's get started here by opening up our store HTML page using live server to see what we have to get started with here we go and the first thing that we need to do is copy over the stylesheet that we've already created and link it so we'll just copy this link here from the index page paste it into our store page so we now have access to all the styles that we've already written and as you can see it's already taken effect the next thing that we need to do is go on to our header here and we need to style our header to be exactly like our home page in our about page as you can see here so to do that let's just add the classes that we've already created of main header and our nav gonna add the class of main nav and then nav and there we go that looks good to remove this HR and then finally style our band name here with band name and band name large we save that and every go we have the same header that we have on all of other pages and luckily for us this is the only thing we need to do in our header here the next thing to do is move on to this section and work on this music card section right here we can get started here by styling our section with the classes that we already have such as container and content section if we save that you'll see we get a little bit of padding from doing that and then we can also title our header here by using the class of section header which we've already created if we say that we now see that our header for our section is properly styled and now we can move on to styling the actual items that are going to be going into our cart let's first look at what we actually want style to look like over here in our image and we can see that we have the title of the item at the very top centered we have the image here and then we have the price and the button to add it to the cart on the bottom that are slightly instead from the sides of the album image so one order to do that let's first add a class to this div that wraps all of this content here and we're just gonna call this shop item and this is just going to represent a single item that we had for sale in our shop and this will be usable in the music and the merch section the next thing we can do is we can actually remove the divs that wrap this album since we can use CSS in order to make album on its own line without having to use a dip to do that so let's remove these divs here and then we can also change the strong tag to a span since we know that the we want this album 1 to be bolded but we don't actually want to put emphasis on it that the strong tag does for things like screen readers we just want to style that in CSS so let's add a class to this here we're just gonna call this shop item title since this is going to be the title and the name of our shop item that we have here next we have our image which we are going to add a class to as well we can just call this shop item image so that we can style our image to resize it as we need and then lastly we have this bottom div here which are the details of our shop item so we're just going to give this a class we'll call it shop item details and inside that we have the price of the shop item here so we can give that the class of shop item price and then we have our button here which we already have two classes for a button and button primary since this will be the bluish colored primary button that we have and then we'll add another class to it of a shop item button so we can style this button specifically for the shop item as needed and if we save that go back to here you'll see that some of the things in our page have already changed we got the blue button now and now if we can actually go into our Styles CSS and start styling these out the first thing that we're gonna want to do is we wanted to want to give some margin around our shop items so they don't run up writing next to each other as you can see that these two items are so if we go in here we select our shop item we can just give it a margin on all sides of 30 pixels if we say that you now see that we have spacing on the sides bottom top of these shop items so they won't run right up against each other the next thing we can do is style this shop item title right here do that we'll just select the shop item title and we'll get started styling it the first thing we want to do is we want to make it so that it is display:block so that way it'll be on its own line as opposed to being in front of the image if the width of our browser is large enough the next thing we're gonna do is we want to make this item 100% width so that it'll take up the entire width of the top of the image and that way when we do text-align:center the text will actually Center itself above the image just like that the next thing we can do is change the actual size and color the font so if we go in here we can make the font-weight:bold so it is a little bit larger we can make the font size the 1.5 en so it is also slightly bit bigger and then lastly add a color that is slightly darker than our current color here we saved that you see that we now have a great title but it's really close to our image so we'll just add a margin on the bottom here and we'll make that about 15 pixels and we say that and now we see it spaced out above our image which is perfect this is exactly what we want for our title the next thing that we should tackle is the actual image of our shop item right now this image is quite large and takes up almost the entire screen so what we want to do is we just want to change that to the shop item image is slightly smaller than it is right now so we'll just give it a height of 250 pixels if we save that you'll see that our image shrinks down a little bit and the width and the aspect ratio stays the same because dive by default the width will be automatically as large as it needs to be for the image to be the same aspect ratio when the height is 250 pixels this is because we didn't actually set it with so it defaults to auto next we want to work on this details row down here where we have the price and the button for adding it to our cart so let's go into here and we'll do shop item details to select the wrapper that goes around our details for our price and our button here and we'll make this display flex there we go the reason we're using display effects is because we want to Center these items vertically so that they are all within the same line as you can see this price is at the top of the line here we want it to line up with the text in our button so to do that we'll use align items Center in order to centrally aligned all of the items inside of this container and as you can see this looks perfect over here the last thing we want to do is add a little bit of padding five pixels on the top bottom left and right so that way it's slightly inset from the image and doesn't quite touch the image on the top next we can move on to style in the actual price of our shop item so this shop item price and this doesn't take many styles all we want to do is make us so the button is shoved all the way to the right side of the screen so we'll set Flex grow to one so that our price will take up as much width as possible if we say that you see that it pushes this Add to Cart button all the way to the end of our container right here next thing we want to do is change the color to make it slightly darker and that's really all there is to styling the actual item of our shop but what we want to do is we want to make it so these Shop items will all flow around each other and as you can see our shop item doesn't quite fit within the space of the image it's taken up way too much of the width of the screen in order to fix this we can go back to our HTML here and we can wrap all of these shop items inside of a div and we'll just give it a class of shop items so if we go up here create a div give it a class of shop items there we go look at the end of this div at the end of all of our shop items for the music section right here and indent everything so that it looks nice there we go and now we could actually select that shop items did that we created and we can give it a display of flex and if we say that you now see that everything's all in one wine and it goes all the way way past the edge of our screen we do not want that we want these items to actually wrap so we can use the property flex wrap in order to bake these elements wrap and we'll just set it to wrap so that if it goes past the edge of our screen they'll wrap down and as you can see now they all fill up in one column instead of wrapping all the way to the edge of the screen you'll also see by changing flex our display to flex here for the shop items our image is the total width of our item so that our Add to Cart button doesn't get put all the way to end here in our album one title is properly centered above the image this is exactly one the last thing we want to do is when our screen is larger these items will be right next to each other like this and we want to make sure that there's space between them in the middle left and right so we'll use justify content space around which we'll put an even amount of space on the left and right of every single element inside of our container and if we save that we now see we have space in between these elements and on the left and right of them that's exactly what we want for these shop items now all that's left to do is to create all these different classes and add them to all the different shop items which I'll do real quick here and there we go that's all the styles that we need for our shop item so now as you can see as we scroll down all of our buttons and prices are styled correctly everything is lined up properly and if we increase the size of our screen you'll see that our items will line up next to each other which means that our site is actually responsive to different screen sizes this is because we use display flex with the wrap property so that if it became too large for a screen it would just wrap to the next line and if our screen was large enough to allow multiple items they would all stay on the same line this is perfect for our situation since we didn't want our albums to only take up one line or be two on a line when our screen was very small so now what we need to do is do the same thing to our merged section that we've done to this section here by wrapping in our container in a shop items div and then adding all these different classes down to these elements here I'll do that real quick now and there we go I've added all the different styles to our merger section since it's pretty much exactly the same has this music section here and as you can see if we increase our screen size be large enough there we go our items will be side by side and if the screen size is not large enough they'll stack on top of each other just like this and this is a perfect example of our flexbox working because as you can see these are side by side but these are not because this coffee image is actually wider than these images up here so it needs a wider screen size in order for them to stack side-by-side like this now the last thing that we have to tackle is the actual cart down here which is going to be the most complex part of this page so stick with me the first thing we need to do let's go back into our HTML and style the different HTML elements that we need with classes so that we can styled it to look exactly like the cart down here so first let's take the classes that we know we already have for this section we can do container and we can do content section there you go we can also style this header here with content I'm sorry section header there we go and now let's get into the actual rows and headers of our cart right here we don't need these less-than and greater-than signs anymore since we're going to be putting the spacing in using CSS and seem like these strong tags we can replace these with spans so let's do that real quick there we go and now let's start adding the actual classes that we need the first thing that we want to do is style the wrapper that goes around each of our rows and we're going to just give that a class of cart row and then we want to do classes for our different items so we have our item column our price column on our quantity column since we want all these to line up and be the same width we'll give this a class and we're gonna give the at cart item and we'll also give it a class of cart header since this item is in the header of our cart and then lastly we'll use the cart call on the class which we're going to give to all of our different columns of our cart section so that way we can do consistent style in between all of our columns without having to copy and paste at other places let's do a similar thing for the price there we're going to give it a class of cart price class of cart header and a class of cart column and then lastly the same thing for quantity give it a class cart quantity cart header and cart column and there we go that's everything we need to do in order to style the header row of our cart let's start by styling that in our style sheet right now the first thing we want to do is style the actual headers of our columns so to do this we can use the class cart header to select them and then set a font weight of bold since these are going to be bolded we can set a font size to be slightly larger at one point to p.m. then lastly we want to make the color darker so we'll just use this color that's slightly darker and then we can move on to styling the actual individual columns themselves so let's use the selector cart column here and get started styling that in here we can use a border bottom we'll just use one pixel solid black border in order to put a border on the bottom here but we also need space in between our elements because if we go back here you'll notice that our borders are all running right up against each other and this image is even overlaying over the top of our borders in order to get around this we're going to use some margins around our elements here first let's use a margin on the right side in order to space our columns away from each other and we're just going to use a margin of 1.5 am here we save that you'll see that now there's a space in between our different columns we're also going to put a padding on the bottom so the space in between the column and the actual underline so we use padding bottom here of 10 pixels and then we'll also put a margin on the top of our columns in order to put a little bit of space between the top of our column and everything above it so in this case the actual border of the element for this column so we use margin top 10 pixels here and perfect now we need to actually add these classes to the rest of our items inside of our columns to do this let's go back to our store HTML and copy over all of these classes into these other different elements here let's do this for the first one we'll copy over this class cart row put it onto this div here we also have the card item which is going to include both the image here and this t-shirt name so we need to wrap this inside of a div with the class of cart item so they say this is our item column and they're also given a cart column class since it's going to be a column inside of our section here at the end of the div down at the bottom and now if we save this you already see that we started getting borders on the bottom which is perfect next we can move over this cart price to be inside of this span here since this is the price for item so we'll get of a class of cart price and another class of cart column there we go we can also remove these less than and greater than symbols here again since they're just used for spacing and then lastly we have our cart quantity which includes the input and button down here so we can do a similar thing where we wrap them inside of a div so if we paste this div here instead of cart item we want cart quantity and inside of that div we just want the input and the button and there we go now we have everything we need but you'll see that they're spaced out so that they're all on their line of their own in order to get around this we want to do is we want to use flux box again in order to align these items properly so if we go back to our Styles SCSS let's style that cart row and we use display flex in order to get all these items onto one line just like that that's perfect we're now running into the problem though where our columns are different widths as you can see this item column here is not wide enough to support all the stuff in it the price column doesn't line up with the actual price here and the quantity is way off in order to fix this we'll use these cart item class the cart price class and the cart quantity class that we applied to our different columns in order to style the widths of these columns so they're all exactly the same for our item let's use a width of 45% there you go for the price we're going to use a width of 20% and lastly for the quantity will use a width of 35% if you save that you'll see that now everything lines up inside of the columns that they should be inside of you'll also notice that if you add these numbers up the equal 100% but if you remember from our first video when we are styling actually our second video I'm sorry when we're styling the home page you'll notice that we had to not quite equal 100% when we were creating our widths this is because we are using inline block elements to style those an inline block elements have a spacing around them here we're using flexbox to align our items so we can actually use whit's the add up to exactly 100 percent because flexbox does not any spaces in between the items inside of its container this is why I almost always use flexbox when laying out element as opposed to inline block fluxbox is also great at lining content inside of its box to be centered horizontally or vertically which is a problem you'll notice on the right here where our content should be centered horizontally or vertically I'm starting in order to look like this so that all of our text is right in the center here but over here our text is either at the bottom over here or the top over here so to fix that we'll go back to our cart column here since if you remember all of our content for each of these columns has this cart column class around it and we'll make this display of Flex and then we'll use a line items Center in order to send our items along the vertical right here we save that you'll see that now all of our items are vertically aligned exactly as they should be and this is looking really close to what we have over here - all the coloring that we need to do for our different elements in order to specifically select the different elements we want to style let's go back into our HTML here and add some classes to our different elements the first element that won't want to style here is the spam tag with the title of the element so we'll do here is we'll add a class we'll give it a title or the name of cart item title specified this is the title of our cart item we also want to add a class here to our image so we just use cart item image specify this is the image of our cart item our cart price is already styled which is perfect and then we just need to add styles to our input and our button here so let's do class here we'll just give it cart quantity input in order to specify this is the input for our cart quantity and then our button will have the class a button which we've already defined button danger which will specify a red colored button and then also cart quantity button in order to specify this is the button for our cart quantity if we say that you'll notice nothing over here changes other than the button styles are applied to this button so then we can go into our Styles dust CSS and actually start selecting and styling these elements so let's go down here and first let's styled the actual title the t-shirt title here by using a cart item title selector and then inside of this title selector will put the color to be a slightly darker color we'll give it a little bit of margin on the left side so that it's not quite right up against our image here as you see so we'll just use point 5 en for this and then lastly we'll increase the font size slightly to 1.2 en if you say that you'll now see that our image is slightly pushed away from our item name which is exactly what we want next thing we can style is the actual image since our image is a little bit too large right here so we can go in here carte items image will change the width to be 75 pixels so this image is smaller if we save that you see our image is now smaller but the height is too tall so we're going to give it a height of auto so the height will automatically adjust to the width if we save that it's now within perfect Oxbow aspect ratio that it was four and lastly we'll just add a slight rounding of the corners here so we're just going to use border-radius and we'll just say for example ten pixels we say that and now rounds the borders just a little bit which adds a little bit of extra aesthetic to the image I think the next thing we want to target is this price over here and we already have a cart price selector so let's just do it inside of that will increase the font size slightly to be 1.2 e/m and we'll make the color slightly darker and if we save that we'll see that the price now looks good and we really don't have to do anything to that the last two elements throw our input and our button are going to take a little bit more work what's good on here and we can select that button danger class that we added earlier to apply this reddish colored button and we can start adding our classes to this the first thing that we want to do is change the color of the text to be white and we want to give it a background color here that is going to be a reddish color I just paste that in here that'll be a red color and if we save that well so that we not have this reddish button we want to remove the border from the button give it a slight border radius so that has rounded corners and then lastly increases so that it is a bold font here if we say that we now have a good-looking button but we have no hover that happens when we go over the button so let's add our hover effect using the hover selector here and we can just give it another background color that is going to be slightly darker here and if we save that and we hover we now get a slightly darker red color when we hover over the button which is perfect the next thing we can select is our cart quantity input which is going to take quite a few styles applied to it in order to give it a blueish border and a smaller size the first thing we want to do for this is to make it the same height as our button over here so to do that we use a height of 34 pixels save that and we'll see that our input is now the same height as our button we also want to change the width of this input to be quite a bit smaller so we'll use a width of 50 pixels which should be enough space in order to put our text and have these buttons for increment and decrement in the number inside of here the next thing we want to do is you want to give it a border radius so it has slightly rounded corners we'll get a border radius of 5 pixels will give it also a border that's going to be one pixel it's gonna be solid colored and we want it to be the same exact color as our buttons up here so we'll just copy that back on color from our button and we'll paste that in here now we say that you'll see that we now have the border around our element which is great we need to give it a slightly darker colored background which is just slightly darker than white and if we say that you can see that we want to change our text color to be slightly darker and then we want to make sure we have no padding around this element at all and if we say that our input element is starting to come both together we just want to move our text to the center and make it slightly bigger so we'll do text align Center in order to send our line our text we use a font size here of 1.2 e/m to make our font slightly larger and then lastly let's use some margin on the right here 25 pixels in order to separate our input from our button and if you save that you see that now this looks a lot like our mock-up over here for our button and input and that's pretty much all we need to do in order to style our robe properly now I'm going to copy these styles from this row on to the second row and see what we have from there there we go that's all the styles that I'm going to need in order to make this we can also remove the HR down here at the bottom and we can also remove this cart quantity button class since we never actually ended up using that class so let's remove that from both of our buttons here and save that and you'll notice that everything still looks exactly the same you will notice however though that are underlined borders here don't quite look the same as over here as you can see we have a solid border on the bottom for our last row and over here we have a separated border on the bottom in order to do this we can use the last child selector in our CSS in order to change the border for the last child but the child element selector only works for the last child inside of the container and right now these cart rows are not the last child of the container that they're inside as you can see this div right here's the last child so let's wrap the rows of our cart here inside of the container and we'll just give this container here a class of cart items move this div down to the bottom here now we can indent all this so it looks pretty save it and you'll notice nothing over here actually changes which is perfect but now when we select a last child of the cart row it'll be this cart row right here since it's the last child of this carte items container so now let's do that instead of our Styles dot CSS here first thing that we're going to do is select the cart row flash child of it hanging here we're going to use that border bottom property in order to set a one pixel solid black border that is going to go across the entire row here if we say that you'll see that we now have one solid border on the bottom but we still have our individual borders that we want to remove to do that we'll again select the cart row last child but we'll also select the cart columns that are children of that actual cart row and we'll remove the border from them and if we say that you'll see that now we have removed these individual borders and all we have is this solid line to border right here on the bottom and that looks exactly the same as over here which is perfect now all we need to do is title top style this total section in this purchase button and we'll be done with this entire band website let's first start by going into our HTML and adding some classes that we can select these elements with first we use the class here of cart total that will wrap our total and the price of the total and we'll also use class here of cart total title so this is going to be the title of total and then in here we have the class of cart total price since this is the actual total price and then inside of our Styles dot CSS we can select those so we have cart total which is the row that wraps all of these we'll give that a text a line of the end so that our text will go to the end of the line here just as it does over here and then we can use the selector for our cart total title in order to change the actual text here of this the first thing we want to do is make the font-weight:bold since it is bolded in our design let's go change that to bold will increase the font size to 1.5 en make the color black so it stands out and we'll give it a little bit of margin on the right side is that way it'll be spaced away from our actual price and we'll just say 20 pixels for that and if we say that that's starting to look a lot like over here which is great last thing we need to do is just style the actual total price so we can use cart total price to select that and give it a color that's slightly darker and a slightly larger font size just so it sticks out a little bit more of 1.1 am if you say that this now looks almost exactly the same as this but you'll notice that our total is very scrunched up here against the bar so we just want to add a little bit of margin so we'll say margin on the top here from our cart is going to be ten pixels will also add a margin on the right of 10 pixels so that our total isn't squished right up against the edge of our screen and instead it has a little bit extra space and that looks great right there our card section is now exactly is over here the only thing we have left to do is this purchase button which will be fairly simple since most of the classes we have are already defined let's go back to our store HTML here we can remove this div that wraps this section since we don't actually need that and inside of here we can add some classes of button and button primary so it's just has the primary colored button and we'll also add a class of button purchase since this is going to be a purchase button and if we save that you'll see that we already here styled here from the primary button class and we go into our Styles dot CSS we can add some styles specifically for this purchase button here the first thing we want to do change the display to block here so that way we can Center this button by using auto margins so we'll use a margin here on the top we want 40 pixels to space it away from our total section on the Left we want auto margin on the bottom we want 80 pixels and on the right we want another auto margin and if we save that to see that our purchase button is now centered with padding or margin I mean on the top and an even larger margin on the bottom to put it away from the footer the last thing we want to do is increase the font size to 1.75 e/m so that there's a much larger button and there we go that looks great and it's a huge button for them to click when they want to purchase their items now all we need to do is style the footer down here and this is going to be very easy all we can do is go into our index page here you can copy our footer since we know it's exactly the same and we can just paste that into our store HTML and if we save that we now have the footer down here and it looks amazing this looks exactly as the page over here and as we increase the size of our browser our elements will flow naturally around each other you'll see all of our columns stay lined up here no matter how large or how small our browser is everything looks great and that's pretty much all there is to creating this store page for our band website I really hope you guys were able to learn something from this video where we walked through the store page of this website and I hope you also learned some things from the other videos where we discovered how to do the homepage and the about page for this band website the next thing that we're going to tackle for this band website is making this form down here interactive so increasing the quantity here for example will increase the total down here we're moving will actually remove it from the cart and clicking any of these Add to Cart buttons will actually add elements to the cart down here this is going to be done through JavaScript which is the third and final element that we need to learn in order to understand everything we need to know about front-end web development so thank you guys very much for watching this video if you enjoyed it please leave a like and if you guys want to know anything more about those CSS properties as I mentioned at the beginning of video please leave a comment down below letting me know which properties you want me to delve more in-depth into and I'd love to do that in future videos thank you guys very much