All language subtitles for 090 Refactoring our Website Part 2.en_US

All right. So in the last lesson we looked at what this syntax means and we learned all about how to combine

selectors in CSS code.

Now if you haven't taken a look at that then I strongly recommend you do because it's really really

useful so that you can understand what exactly is going on over here.

But now we're going to continue to refactor our code.

So the next thing I want to do relates to the fact that we've got certain sections on our web site that

have a colored background where the text is white and then we have other sections where the background

is white and the text is black.

So this is a repeated pattern across our web site.

So I want to capture that and refactor our code to make it a little bit more modular and reusable.

So what I'm going to do is I'm going to look through my code and give each of these sections a class

based on whether it's a colored section or if it is a white section.

So the first title section is a colored section,

the second section, features section, is a white section, and then testimonials was colored, I think,

and then press was also a colored section, and then pricing was a white section,

and finally the cta was a colored section, and the footer was a white section.

All right.

So now all of our sections have a class depending on whether they should be white or if they should

be colored.

And if I hit save I can now go and create some of these sections up top so just below containers.

I'm going to add another comment that's called sections, and I'm going to add our classes here,

the colored-section and the white-section.

All right.

So now if we take a look at our code you can see that for the colored sections we tend to add a background

color of that bright red pinkish color and then we give the text a white color.

Now for the white sections we tend to just give it a background color of white and maybe a little later on

we decide that we want to add other changes to our different sections,

but at the moment that's basically all that each section has.

So let's put that in here.

So I'm going to remove these two bits of code and I'm going to put it inside the colored section and

then the white section is simply going to have a background color of white.

And now I can go through my code and remove some of the repeated declarations. So, in the case of the

testimonial section, even though it's a colored section because it has white tags and has a background

color and we've already given it a class of colored-section,

it is slightly different from the other colored sections because it has this kind of peachy color rather

than this bright pinkish red.

So what we can do here is we can delete the part that's repeated, which is the

white text, because it's already inside a section that has a class of colored-section, which has that

text color that's applied, but we can override the background color by applying a style to our id.

And it's important to remember that there is a hierarchy between different types of selectors,

as we mentioned before. So ids are the most specific and their styles get applied preferentially over

everything else,

then next comes classes, and finally comes these HTML elements.

So if I right click and inspect to go into the Chrome Developer Tools and I select our section here

which has an HTML element of section,

class of colored-section, and an id of testimonials,

you can see that even though colored-section is applying the background color of that bright pinkish

color and id testimonials is applying this more peachy color,

you can see that this one gets overridden and it's shown as being crossed out in the Chrome Developer

Tools.

So if we didn't have this style that's applied in the id, which as we said is more specific, has higher

ranking, then it would default to the colored-section background color, but because we do, then this one

is going to override the other color. And it's pretty much the same thing

inside the press section as well.

All right. So the last one that we have is the cta section which we can now basically delete because

the section already has a class of colored-section so we don't need to write out that code again.

So let's hit save and refresh our web site and hopefully absolutely nothing has changed.

So we're doing a good job with our refactoring.

Now another thing that you might have noticed up here is that, because we're targeting the container that's

inside the title section, we don't actually need this extra title id.

We can actually just combine these two into the same selector and we can delete that specific title

id selector.