Now you may notice, if you compare what we have with the design we need to implement, you can see that we're using a custom font. Now that font is called Roboto Slab. We can go to fonts.google.com and we can pull that up.

I'm going to type in Roboto Slab and you can see that this has a few nice little designs that really make the font stick out a little bit more than if we just use Roboto by itself. I'm going to click on the + sign. Let's add this.

This is good practice, just because it allows us to repeat the same type of task. You'll really get in the habit of knowing what you have to do whenever you want to bring in a custom font. So I'm going to bring that in and what I want to do now is I actually want to have all the headings on the entire site to use this font.

There's a cool way of doing that. I'm going to go into common.css here and let's grab this font-family call. The way that you can have multiple elements all using the same style is just by listing them all out.

I want all of the headings that I might use to all use the same font. I can say H1, then H2, H3, H4, H5, and H6. I have never gone any further than an H6 and it's pretty rare that I even do anything beyond an H4.

This just makes sure that all of our headings are going to use the correct font. Now if I save this and switch back, if we hit refresh, we should get the correct font. and there you go. Now you can see that our headings have that cool font.

Now let's go back to the code and inside of our homepage, let's add the other styles. What we're going to do is we're going to add that blue and then that gold type of wrapper around. Just to make these pop out a little bit more. Let's see what we need to do in order to get that done.

We have our .hero-section and then the next element we want to select is the .top-heading.
The top heading, we want to add a background-color. I'm going to use the hex color of #11122B. You'll see that gives us that dark blue. For the color, I want to go with that off-white once again, which is #CBCBCB. Then I want to have a width of 290px.

homepage.css

.hero-section > .top-heading {
    background-color: #11122B;
    color: #cbcbcb;
    width: 290px;
}

We're going to talk about a new attribute that we've not used before called the border-radius. If you've ever seen some kind of element on a page that has nice, little-rounded corners, a border-radius is how you can do that.

So I'm going to say `border-radius, and we're just going to go with a small one. The only reason for this is because I just don't want to have a sharp edge around these boxes.

homepage.css

.hero-section > .top-heading {
    background-color: #11122B;
    color: #cbcbcb;
    width: 290px;
    border-radius: 2px;
}

Now if we come back here and hit refresh, you can see that that's working. Now it's not perfect yet, and in order to get this exactly to the final version, we just need to add a little bit of padding.

HTML headings, by default, have a few padding elements and margin elements that they are going to come with. What we need to do is just to add onto those. So I'm just going to say padding here. I want to add 1px to the top and bottom, and then I want 20px on the left and right.

homepage.css

.hero-section > .top-heading {
    padding: 1px 20px;
    background-color: #11122B;
    color: #cbcbcb;
    width: 290px;
    border-radius: 2px;
}

Now if I come back, hit refresh, you can see that that is working really nicely. That's exactly what we wanted to implement. Now that we have that, now let's come and let's grab the next one. This is going to be the hero-section once again, and then it is going to be the bottom-heading.

I'm going to use a background-color with that kind of goldish color, which is #CEA135. From there, I want another color, so for the actual font color, let's go with #11122B.

homepage.css

.hero-section > .top-heading {
    padding: 1px 20px;
    background-color: #11122B;
    color: #cbcbcb;
    width: 290px;
    border-radius: 2px;
}

.hero-section > .bottom-heading {
    background-color: #CEA135;
    color: #11122B;
}

Now if you're curious about how I seem to know those, I have these written down on a different screen so that I can always reference them. Do not feel like you have to have hexadecimal numbers memorized.

The process that I personally follow is before I build out a project, I usually will pick out kind of a style guide. I'll pick out the colors that I want to use throughout the project, and then I just keep those handy. I just have those as some notes as we're going through and we're building this out.

This gives you as you can see, pretty much the exact same background color that we have here, which is also our navigation color. That is going to be the color for the font and then from there, we just need to add some padding.

Once again, I'm going to go with the same 1px top and bottom, 20px left and right. I need to have some margin to separate the bottom heading from the top headings. So I'm going to say, margin-top and for this let's add just a little bit, so 15px.

homepage.css

.hero-section > .bottom-heading {
    background-color: #CEA135;
    color: #11122B;
    padding: 1px 20px;
    margin-top: 15px;
}

The width here is going to 107, which is something that I played around with when I was building the original version of this and 107 was the perfect one. We're also going to use a border-radius of 2.

homepage.css

.hero-section > .bottom-heading {
    background-color: #CEA135;
    color: #11122B;
    padding: 1px 20px;
    margin-top: 15px;
    width: 107px;
    border-radius: 2px;
}

Once again, that is just to give us a little bit of a rounded edge. If I hit refresh, you can see that that is working really nicely. This is going to be all we need to do for the entire hero-section.

In review, what we covered in this guide is how we can add custom fonts or really any kind of styles to all of the different elements, so multiple elements. We did it for all the headings on the entire website, but you could do it to any other kinds of tags or classes just by separating them with commas.

Then we styled those headings with some custom colors and background. In the next guide, we are going to keep on moving down the line. We're going to now build out this cool little grid right here.