3.1 Text and Buttons
Let’s get started with our custom stylesheet as we override Bootstrap’s basic styles for font choices and buttons.
1.Introduction2 lessons, 05:34
2.Structuring Your HTML9 lessons, 1:03:52
3.Styling the Page5 lessons, 43:27
4.Conclusion1 lesson, 00:31
3.1 Text and Buttons
Hello, and welcome back. In this lesson, we're gonna get started styling our page. And I want to get started by overriding Bootstrap's default styles for our text and for our buttons. So I've created a new folder called site010, and all of the changes we make in this lesson will be saved in that folder. And if you remember, we added the Roboto font to our website using a link tag using Google Fonts. But we haven't actually applied it to the page yet, so let's start by replacing all of our font choices with Roboto. So, let's jump over to our text editor of choice, open up index.html. And here we can see our link tag for the Roboto font, and this is the font family name that we'll be using right here. So I'm gonna jump into our css file, site.css, and we're going to point to the html, and I'm gonna go ahead and point to body as well. And I'm just gonna set the font-family, the default font family for everything to Roboto, comma, space, sans-serif as a backup. So I'm gonna save that, and then we'll jump back into our browser and refresh the page. And we see that that's just a very subtle change, but we did see our text change a little bit, and everything still looks good there. Now while we're dealing with our fonts, I also want to go ahead and address our h1s and h2s and set up the sizing for those. So let's jump back into our site.css file. And in addition to setting the the font-family for our html and body, I also want to set up the font-sizes for our h1 and h2 tags. So for h1, I'm going to set font-size, and this really just takes some experimentation to get it where you want it. But for this particular project, I want to set it at 58 pixels. Now, as I've mentioned before, we're not going to go into a whole lot of detail on making this responsive, I'm going to leave that up to you. Once you're done watching this video, I want to challenge you to make this more responsive. And one of the things you might do is you might adjust that font-size for smaller browsers. 58 pixels might be a little too big once the browser size gets a little bit smaller, but it will work for the purposes of this course. I'm also gonna set the font-weight here to a value of 400, and while we're here, we'll go ahead and do our h2s as well. We're gonna set font-size to 40 pixels here, it's going to be a little bit smaller, and our font-weight is going to be a little different as well. It's going to be a little bit lighter at 300, so we'll save that. And if you remember, if we go into our index.html, we have a few different font-weights that we used here, or that we included. 100, 300, 400, and 900, so on our css right now, we're using 400 and 300. So with everything saved, let's jump back into our site, and refresh, and there we go. So now we can see our h1s are not only larger, they're also a little bit bolder than our h2s, and that's a good starting point. So that's really all the text I want to tackle for now, we will be changing some more text sizes and weights and things like that. But we're gonna tackle that as we move forward in each section. For now, the only other thing I want to tackle are the buttons. We can see the default here on the page, and scroll down to see that all of our buttons look like that. And the blue buttons are the ones that we gave a class of btn hyphen primary. And then the Subscribe Now button, l believe that's btn-default. But we want to change that, if we go back to our Photoshop file, we can see that our buttons have rounded corners. They're more pill shaped buttons. Now we do have a couple of buttons that just have slightly rounded corners. But most of our buttons, our default buttons, have these rounded pill-shaped edges, so I want to change that in our code. So let's jump back into our CSS and I want to apply some default stylings to our buttons. Now the button class that we're using in Bootstrap is .btn, and that's the one we're going to be overriding here. Now, when you're overriding styles like this, remember this btn class is defined in the bootstrap style sheet that we're linking to. So if you want to be able to override those styles. Then in your index.html file, you need to make sure that your style sheet here comes after the Bootstrap style sheet. The Bootstrap style sheet is up here, and ours comes after it. If ours came before it, then all of the Bootstrap styles would override ours, and obviously, that's not what we want. So let's go back to site.css, and for our buttons, I want to specify a height for these buttons, first of all. I want to make them 63 pixels tall, and I'm gonna set the line-height to 63 pixels as well. The reason I'm doing that is because that will vertically center the text in our buttons. By setting the line-height to the same height as the button itself. Now also in order for that to work, there's going to have to be zero padding on the top and bottom of the button. Otherwise, it will have a line-height of 63, but it will be nudged down a little bit so it will no longer be centered. But before we get to the padding, let's go ahead and apply some border-radius to our button. So we're gonna do border hyphen radius, and I'm just gonna set this to a large number, and that will round off the corners. And let's just go ahead and take a look, before we get any further with it, we'll refresh our page. And there we go, we've gotten a little bit further. You'll notice that the text is not vertically centered right now, because there is some default padding applied to these buttons in Bootstrap. So now we can jump in, and I also want to apply some padding to the left and right. Now, that line-height trick won't work if you have multiple lines of text inside your button. But if it's just one line of text, then that line-height trick should work for vertically centering your text. Okay, so we have our border-radius, and then after that, I'm going to apply some padding. Now I'm going to use short hand here, I want to apply 0 padding to the top and bottom, so we're going to put that number first. And then the second number will apply to the left and right padding, I'm gonna set that to 50 pixels. Save that and refresh our page, and there we go, now we see that our text is vertically centered. Because we took off that extra padding from the top and bottom of the button. And we have a lot more space around the edges because of the 50 pixels of padding we added. So we can scroll up and down and look at the rest of our buttons to make sure everything looks okay. And that looks pretty good, so let's jump back into our code, and it looks good. I want to change the font size a little bit, and make it a little big larger. We're gonna set that to a value of 16 pixels, refresh that, and that looks a little bit better. And we see that the text is already centered in these buttons, I believe. Yeah, everything looks good as far as the centering of the text, so that looks good. So then one more thing I want to do with the buttons is I want to style the color of the buttons. And I'm just going to copy some styles that I already have here and paste them in, and we'll take a look at them. So we have this btn-primary, remember, this, if we go back to our browser. This dark blue color is the default color for the btn hyphen primary class that is applied to this button. And we're simply going to override that default color, and we're doing that using this color here. This is 0090ff shade of blue, and we're also turning off the border, just setting border to none. And then for the hover active and focus states of that button, we're just changing that background color a little bit. Making it a lighter shade of the same blue. Now let's save that css file, jump back on to our page and refresh. And now we get a color that's closer to what we see in our Photoshop file. So if you're using Photoshop here, you can easily get the shade of blue there by clicking here on these color pallets. And you'll get this Color Picker, and then if you hover over that button and click, then you can see the color value there. And there are several different shades of blue on this page, and in this particular instance, they're not all the same shade. So sometimes it's safe just to pick one color and go with it, and that's what I've done here. So that wraps it up for some of the basic styles I wanted to apply to our website, things are already starting to look a little bit better. We obviously have a lot of really cluttered content that we need to clean up, but we'll get to that as we move through each section. So thank you for watching, and I'll see you in the next lesson.