How to Style a Modern Website (Part Two)

Key Takeaways

Hello everybody. Welcome to the second video on how to style a modern website. In the first video, we looked at styling the about page of our band website. And in this video, we're going to tackle styling the home page of our website to look exactly as this image on the right here. In order to get started with this, let's open up our index.html page with live server. And here we have all of the HTML with no CSS styling supplied to it. The first thing that we want to do is to go into our about.html, copy our link tag from the head, and paste this into our index.html file. This way we'll be able to load our styles in from our styles.css file into our home page here. As you can see, this already has made some changes by changing our font, font color, and etc. based on our everything selector. The next thing that we need to do is apply our styles to our header that we created in the last episode, such as the class of main header. If we save this, we'll see that on the right our header will update. And then we have our navigation, which we can apply the classes of nav and main nav to. And there we go. We'll get rid of this HR here, as well as these two line breaks, and our comment since these are no longer needed since we have a background image, and these line breaks will be taken care of using CSS. Let's save that. And then add our final class here for the band name and band name large. If we save that, our header now looks very similar to how our about page header looks, but we have these two buttons down here that we need to style still. The first thing we want to do is create a button class for all of our buttons. We'll do this in a similar way that we styled our navigation elements by having a nav class, and then another class to style what type of nav it is. But first, we'll just create this generic button class that all of our buttons will be able to use. Inside of our styles.css, let's add the selector for that button class and start applying the different styles we need. We know that we want all of our buttons text to be centered in the middle and center of our button, so we'll use text-align center to put our text in the center horizontally. And then we'll be using vertical-align of middle to put our text in the middle vertically. If we save that, we'll notice that no changes were made over here because our buttons aren't tall enough or wide enough for our text to need to be aligned in the middle yet. But as we start adding different paddings and different heights and widths, we'll see that our text will always be in the center. Next, let's add a little bit of padding around our button so that we have more space between the text and the edge of our button. To do this, we'll use padding and then we'll give it 0.67 em of padding on both the top, bottom, left, and right by just doing one number. And if we save that, we'll see that our buttons have gotten slightly larger. Last thing we want to do is when we hover over our button, we want our cursor to change to a pointer icon as opposed to the normal arrow icon. So, we're going to go into here, change our cursor to pointer, and save that. And now when we hover over our buttons, we'll get the pointer icon instead of the typical arrow icon. The next thing we want to do is apply our button specific classes for our header. We'll just call this button header. Now if we go into our styles.css, use the selector for our button header class, we can start adding styles that are specific for this get our latest album button. The first thing we want to do is use the margins around our button to be able to position it where we want. If we look at our image here, we can see that our button is positioned so it is slightly offset from the center and offset from the left edge of the screen. We're going to be using margins with percentages and ems in order to accomplish this. So, if we use margin, the first value, if we use all four values of margin, corresponds to the top margin, which we want to set to 0.5 em, which will be half the size of the font. We then want to use 15% to correspond to our right side margin, which will take up 15% of the total space our object can occupy. Then, we can use 2 em as the bottom margin, and another 15% as the left side margin. If we save this, we see that our object already aligns itself slightly offset from the left, and not quite centered in our space. This is exactly what we want. Next, we want to style the button to look like it does on this page. The first thing that we're going to want to do is change the text color to be white. And then we want to add a border around our object. It's going to be 2 pixels, solid, and we're going to use this color, which is a slightly bluish color, as our border color. Now, if we save that and go back, we already see that our text color has changed to white, and we have a blue border around the object, but we still have this gray background. In order to get rid of that, we just set the background color, and we're going to use a very, very opaque white color, which will be RGBA 255, 255, and 0.1. And if we save that, we now get a button that looks very similar to this button in color, but spacing is still not quite right. What we need to do is set the border radius of our object to be zero, which will remove completely remove the rounded corners of our object, so that we now have a perfectly square cornered object over here, just like in this image. The border radius corresponds to how rounded the corners are. So, by setting it to zero, we have no rounded edges to our corner. Next, we want to increase the font size. We're just going to set that to 1.5 em to be about 50% larger. And then we want to make the font weight to be lighter so that the text is slightly thinner. And if we save that, our button is looking very similar to our button over here. But you'll notice that we don't quite have the same padding on the left and right. In order to fix this, we'll set our padding on the left to be 2 em and our padding on the right to also be 2 em. Now if we save that, our button looks almost exactly the same as our button in here. This is perfect. But when we hover over this button, nothing actually happens. We have no way to know we're actually hovering over it. In order to fix that, we'll use the button header hover selector here and we'll set the background color. And we'll just make it a slightly less opaque version of the color that it already is, which is white. But we'll use 0.3 instead of 0.1 as our opacity. So now if we hover over it, you see that our button gets slightly lighter. So that way we know that we're actually hovering over top of it. One thing that you may notice is if we zoom out here on our image and we increase our font or window size to be even larger, our button will become very offset to the left and not as centered as we like it to be. In order to fix this, in our index.html page, let's wrap this button here inside of a div with the class of container. If we do this, we've already created this container class which has a limited width. This means the padding of our button on the left and right will be inside of that confined width space of the container. So if we save this and increase our size of our browser to be even larger, you see that our button will always stay similar to the center of the screen because it's inside of a container with a limited width. That's exactly what we want our thing our web page to react as. Now let's zoom that back in so it's easier for you guys to see. There we go. And now let's work on styling this button right here for the play button. We'll use very similar styles to our header button. But we'll also add a play button class to this. If we save that, we already see that this is very similar to our style over here. What we want to do is we want to make this button entirely round, and we want to make the icon on the inside blue as opposed to white. In order to do this, we'll go to our styles.css here, and we'll use our button play class to style our play button how we want. The first thing we want to do is center our button horizontally in the screen, so we're going to use margin with zero on the top and bottom, and auto on the left and right in order to tell our button to center itself in the screen. But as you'll notice, our button actually just centers over onto the left side. This is because buttons are not block level elements, and only block elements can have an auto margin. To get around this, we'll change our button to be a display block. Now if we save that, we'll notice our button is perfectly centered in our screen. The next thing we want to do is change the color of this icon to be our blue color here, which we can just copy from our border. Save that, and now we have that same blue color inside of our button. We want to increase the font size in order to make the icon larger. We'll use 4em. And then we want to change our border radius to be 50% in order to make a perfect circle. And there we go. But you'll notice that our button is more of an oval than a circle, and that's because our button has different padding on it. So we need to completely remove the padding from our button in order to make it a perfect circle. But you'll see there's a slight problem where our button gets really scrunched up, so we want to give our button a width and a height, and we're going to make these exactly the same, so our button is a perfect circle as opposed to an oval. We'll just use 100 pixels. And if we save that, you see that we now have a perfect circle button in the center of our screen that is slightly offset from our button up here, very similarly to over here. And if we increase the size of our screen, you see that our buttons will stay positioned how we want them, no matter what size our screen is. That's exactly what we want, and everything that we need to do in order to make the header of our page look exactly the same as this image over here. The next thing that we need to do is work on this section of our page, which contains our tour dates and is the main content of this home page. The first thing we can do is use our styles that we created in our previous video. We can use our class over here of content section in order to specify that this is a content section, and we can also use the class container in order to specify that we don't want the width to grow over a certain size. Next, we can use the class here of section header, just as we created in our other video. That'll mark this header as a section header and center and give it the right font that we want. Now, we need to tackle the individual rows of our tour date. The first thing we can do is remove the HR as well as these less than and greater than symbols, since these were only there in order to be used for spacing in our HTML, and we will do all of that with CSS now instead. So now if we save that, we see that our row is completely scrunched together, which is perfect for us to start styling. We also want to give our row a class of tour row, so that we can say each row will be styled in the same exact way. Let's go into our styles.css here, add that tour row selector, and get started styling it. The main thing we want our tour row to do is to give us padding between our different rows, as well as give us a border on the bottom of the row. So, to start, let's use border-bottom to give a bottom border to our row, and we'll make it 1 pixel solid black. If we save that, we see that we now have that border on the bottom of our object, similar to how the HR worked. But, we also want there to be a little space between the row and the row below it, as well as between the row and the border. In order to give us space between the row and the border, we'll use padding, since padding is space between the content and the border, and we'll set this to 1 EM. If we save that, we now have space between our content and our border, and in order to give us space between the content below and our border, we use margin, which is on the outside of our border, and we'll set that to the same 1 EM. Now, if you save that, we have space in between all of our rows here. Let's take this tour item or tour row class and give it to all of the different rows inside of our content here. We can just copy and paste that into all these divs, and after we're done with that, we save it, we'll see that we now have borders on the bottom here. Let's get rid of all of these HRs, so that it's easier to see, and you'll see now that we have borders on the bottom of all these different rows, very similar to over here, but you'll notice there should be no border on our last row here. And you may think, "Oh, we'll just remove the class, and that'll solve the problem." But, that will get rid of all of our padding and margins. In order to fix this problem, we can use what is called the last child selector. So, if we do tour row, last child, this will select the last child with this tour row class, and if we just give it a border bottom of none, to say that there should be no border, and save it, you'll see the border on this last child has been completely removed. Now, we can get started on styling the different elements inside of our row. Let's first start with the date element here, and we're I'm to give this a class of tour item, which we'll give to all the items in our row, and we'll give it a specific class of tour date. And this will work very similar to how we've done buttons and nav so far. Let's first start by styling the tour item element. In here, all we want to do is set very specific paddings, margin spacings, all of that we want between all of our tour items. So first, we want to add a padding right between all of our elements to give them a little bit of space of 0.5 em. If we save that, we'll see that now there's a little bit of padding to the right side of our date element here, which is exactly what we want. But we also want these elements to display inline with a specific width. As we know, inline elements cannot have any width applied to them. For example, if we were to apply a width of 1,000 pixels here and save this, our object does not actually become 1,000 pixels wide, and that's because it's an inline element. So what we want to do is change the display to be inline block, which will make this act like an inline element as in it won't break the line when it's done, but it'll also be able to have widths and heights applied to it like a block element. And if we save that, we see our element is now 1,000 pixels wide. We don't actually want that, so we'll remove that line. Perfect. The only downside of inline block is it does add a tiny bit of space between each element that we cannot actually remove, but that is okay for now. Now let's use that tour date class that we also assigned it and start styling that as well. First, we want to give it a slightly darker color than the rest of our row to match the styling in this page, so we'll give it a color of 555, which is a slightly darker version of our 777 color. If we save that, you'll see our color is a little bit darker. We also want to make it so that it's bold, so we use font weight of bold. If you save that, you notice not much actually changes, and that's because we used a strong tag over here for our element. Strong tags are meant only when you want to emphasize something. And in this case, our bolding is only for visual instead of for emphasis. So, we want to change this to a span tag in order to remove the special emphasis applied to it since it is only meant to be visually bolded and not actually emphasized for importance. Now, if we save that, you'll see it'll look perfect. Let's go back to our style.css and give this a specific width, and we'll just use 11% for our width here. Let's save that, and now it gives us a little bit of extra spacing, and as we increase the size of our browser, the spacing will increase with it. Perfect. Now, let's move on to the other elements of our tour item. Instead of our index.html, let's give all of our elements the tour item class as well as the specific class. In this case, this is our city, so we'll call it tour city. This next one is going to be our arena, so we'll give it tour item and tour arena. And this last one is our button, so we'll give it the class of button. We'll also give it a tour item class and a tour button class and save that. Now, our row looks a little bit better, has a little bit of spacing between our elements, but everything's not quite lined up how we want it. So, on our styles.css here, let's style our individual tour elements starting with the city element, which we're just going to give a width of 24% since this is slightly larger text than our date is. And we save that, and now it gives us a little bit of spacing. We'll go on to our tour arena, and we'll give this a width of 42% since this is our largest element by far. And then lastly, we use the tour button, and instead of giving this an actual width, cuz if we give it a width, for example, of 19%, and we save that as we increase our screen size we'll see that our button will get wider which we don't actually want to happen. So instead we'll use max width as opposed to width which means our element will never be larger than 19% of the screen. So now if we shrink this our button will stay exactly the same no matter how large or how small it goes because the width will always be the same as the content but it will never become larger than 19% of the screen. So if we make our screen very small you'll see that our button will break onto two lines instead of shrinking even further. That's exactly what we want. You also may be wondering by looking at these widths why they don't exactly add up to 100% because you would think we want to fill up 100% of the space and you are correct. We do want to fill up 100% of the space but as I talked about inline block elements add some amount of spacing between each other inline block element that we cannot remove. We have to account for this by making our widths slightly less than 100% when added together. To do this I subtracted about 1% for each of these widths after making them total up to 100%. This way we have 96% width taken care of so that way our screen won't break onto multiple different lines until it becomes very very small and in that case you'll see it does break onto multiple lines. But that is okay because our size our screen is not really meant to be viewed on mobile. This is mostly for desktop design. Let's make that size a little bit larger here. There we go and let's copy these styles onto all of our different elements over here and all of our different rows. I'll do that really quick. And there we go. As you can see now all of our rows are styled correctly and they all line up exactly so the spacing is exactly what we want it to look like. And if we increase the size of our browser, everything stays in line in all of our different columns and scales to be responsive with the size of our browser. This is perfect. The only thing we have left to do is style our buttons so that they look the same on this page as they do on this page. In order to do that, let's add one final class to our buttons, which will be button primary, since it'll be the primary button of our site. And this primary attribute really refers mostly to the coloring of our button, since our button base class already applies all of the styling for the different sizing, padding, and margins that we need. So now, if we go over to our styles.css, add this button primary class, and here we can now style the different colors we need to. Let's first start by adding the color of white, which will make our text color white, as well as our background color, which we want to set to this color. And if we save that, we now see our buttons are the exact same color as over here. We next want to remove all of the border from this element, so we don't have this gray border around here anymore. And then, we want to make our border radius to be slightly bent around the corners. As you can see over here, we have a slight bend in the corner. So we'll make our border radius be 0.3 em. And if we save that, you see that our button is already looking great, but our text is a little bit dull in here. So let's make the font weight bold to make our text pop a little bit. And if we save that, our buttons now look perfect and they look exactly the same as our buttons over here. The only thing we have left to do is add a hover element to this so that we can tell that we're hovering over our element. We'll do this exactly the same way by using our button primary with the hover selector, and we'll just give it a background color that is going to be slightly darker. So in here, we'll go background color, and we'll just set that to this color right here. Now, if we hover over a button, you'll see that it'll get darker to note that we are hovering over this button, and it is easier for our users to know what's going on. The last thing we have left to do is style the footer to be exactly the same as the footer on our about page. So, in order to do this, we'll just go to our about page, go down to the footer, and copy all the footer elements, IDs, classes, all of that, and we'll paste it over our footer here, since we know that we want them to be exactly the same. And now, if we save that, we scroll down here, our footer now looks exactly the same as our footer over here, which is exactly what we want. Now, if we zoom out our web page here a little bit to be 100% increase the size, you'll see that our content stays inside of these bounds, and that is due to the container class that we added. This is perfect for making our site responsive without stretching too far on larger screens, and also making it look decent on smaller screens such as this or this. That's all there really is to creating the CSS for this home page. You'll notice that this was much easier than doing our about page, and that is because all of the styles that we used in our about page, we were able to copy over and use in our home page. And we'll even be able to use those styles in our store page when we get around to doing that in the next video. If you guys enjoyed this video, please leave a like and comment down below what your favorite CSS property is that we learned in this video. Thank you guys very much for watching. I can't wait to see you in the final part of this when we style the store page of our website, which is going to be by far the most complicated and interesting styling that we have to do. Thanks for watching.