How to Style a Modern Website (Part Three)

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 of the

CSS properties that we're using to style these bandweb 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 style sheet 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 into our header

here and we need to style our header to be exactly like our home page and 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 and add the class of main nav

and then nav and there we go that looks good. Let's remove this HR and then

finally style our band name here with band name and band name large. We save

that and there we go we have the same header that we have on all of our other pages and luckily for us this is the only thing we need to do in our header

here. The next thing we can do is move on to this section and work on this music

cart 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 save 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 the

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 inset from the sides of the album image. So in order to do that let's

first add a class to this div that wraps all of this content here and we're just

going to call this shop item and this is just going to represent a single item

that we have 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 div 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 one 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 going to 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 of 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 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 we can actually go into our styles.css and start styling these

elements. The first thing that we're going to want to do is we're going to

want to give some margin around our shop items so they don't run up right 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. To 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 of 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 be 1.5 em so it is

also slightly bigger and then lastly add a color that is slightly darker

than our current color here. We save 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 we'll make that about 15 pixels and we save that and now we see it's 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 so that our 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 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 a width 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 flex 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 and 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 align all of the items inside 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 of 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 styling the actual price of our shop

item so we'll do shop item price and this doesn't take many styles all we

want to do is make it so that 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 save 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 taking

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 we put 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 can actually select that shop

items div 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 line 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 make 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 end 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 what we want 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 will 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 spacing 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 our 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

too on a line when our screen was very small so now what we need to do is do

the same thing to our merch section that we've done to this section here by

wrapping 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 merch section

since it's pretty much exactly the same as this music section here and as you

can see if we increase our screen size to 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 flex

box 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 is go back into our HTML and style the different HTML elements that we need

with classes so that we can style that 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 we can do content section there we go we can also style

this header here with content or 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 this spacing in using CSS and same with these strong tags we can replace these with

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 and 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

that 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 column class

which we're going to give to all of our different columns of our cart section so

that way we can do consistent styling between all of our columns without having to copy and paste it 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 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 1.2 em and 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 em here we save that you'll see that now there's some space in between our

different columns we're also going to put a padding on the bottom so there's spacing between the column and the actual underline so we'll 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'll 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 to 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 cart 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 we say this is our item

column and they're also give it 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 then

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 flexbox again in order to align these items properly so

if we go back to our styles.css 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 we go for the price we're going to use a width of 20% and lastly for the

quantity we'll 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 they equal 100% but if

you remember from our first video when we are styling actually our second video

I'm sorry when we were styling the homepage 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 and inline block elements have a

spacing around them here we're using flexbox to align our items so we can

actually use widths that add up to exactly 100% because flexbox does not

add any spaces in between the items inside of its container this is why I

almost always use flexbox when laying out elements as opposed to inline block

flexbox is also great at aligning 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 sorry 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 align items center in order to

center 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 minus 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 we'll want to

style here is a span tag with the title of the element so we'll do here is we'll

add a class we'll give it the title or the name of cart item title to specify

this is the title of our cart item we also want to add a class here to our image so we'll just use cart item image to 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

cart quantity and then our button will have the class of 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 save 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.css

and actually start selecting and styling these elements so let's go down here and

first let's style the actual title the t-shirt title here by using cart item

title selector and then inside of this title selector we'll 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 0.5 em for this and then lastly we'll increase the font size slightly to

1.2 em if you save 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 cart item image we'll 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 and if we save that it's now within perfect

aspect ratio that it was before 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 10 pixels if we save that 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 we'll increase the font

size slightly to be 1.2 em 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 to our input and our button are

going to take a little bit more work let's go down 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 just paste that in

here that'll be a red color and if we save that we'll see that we now 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 increase it 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 bluish 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'll 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 incrementing

and decrementing the number inside of here the next thing we want to do is we

want to give it a border radius so it has slightly rounded corners we'll get a

border radius of five pixels we'll give it also a border that's going to be one

pixel it's going to be solid colored and we want it to be the same exact color as

our buttons up here so we'll just copy that background 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 up together we just

want to move our text to the center and make it slightly bigger here so we'll do

text align center in order to center align our text we use a font size here of

1.2 em 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 row properly now I'm going to copy these styles from this row onto

the second row and see what we have from there and 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 our 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

a 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 is the last child so let's wrap the rows of our cart here inside of a 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 the last child of the cart row it'll be this cart row right here since

it's the last child of this cart items container so now let's do that inside of

our styles.css here first thing that we're going to do is select the cart

row last child of it and in 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 save 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 save that you'll see that now we have

removed these individual borders and all we have is this solid lined 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 style this total section and 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'll use the class here of cart total that'll wrap our total

and the price of the total and then we'll also use class here of cart total

title 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.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 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 so we'll change that to bold we'll increase the font size

to 1.5 em 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 save 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 em if you save 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 total is going to be 10 pixels we'll

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 cart section is now exactly as 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 since this 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 have styled here from

the primary button class and if we go into our styles.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 you'll 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 em so that is a much larger button and there we go that looks great

and that'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 we 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 home page 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 removing 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 the 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