So, the first thing I want to do is, I want to structure our code so that we keep all of our HTML
element selectors together.
So we've got the body up here and we've got a row of red.
This is just something I like to do because it's so much easier to navigate.
And when you're trying to find things it can be such a pain when you've got things dotted all over the
place, especially in your CSS.
So, now that we've got all of these HTML elements up here, you'll realize that some of these are actually
doing very specific things.
For example, this section of code, even though it’s targeting all of the h1s, it's actually only really
applying the style specifically for this title here.
So these styles should not really be applied to the h1.
Instead it should be applied more specifically to a type of heading. The kind of styles that you want to
place across all of the h1, h2 and h3 are very very broad, things like, you know, font-family maybe, or
a particular color
if you have a color scheme. You don't want specific things like, you know, a font size or a line height, because
that's something that should really occur more specifically to a particular class.
So let's go ahead and change this. Instead of targeting the h1,
I'm going to add a class to the h1 and I'm going to call it big-heading.
So this is the biggest heading that we have basically and I'm going to place that class somewhere down
here and I'm going to have a section that's dedicated to headings and this one is the big-heading.
So the big-heading is basically going to be all of this code, so I'm going to cut it and then I'm going
to paste it in here.
So now what should we use the h1, h2, h3 selectors for?
Well, you might notice that a lot of these elements already have the font-family Montserrat-Bold inside
them.
So it's worth actually targeting all of the heading elements, so h1 through to h6, and giving it the
same font-family that you would want for a heading.
And we can do that quite easily by simply saying h1, h2, h3, h4, h5, h6.
And what this does is it applies the CSS rules inside these curly brackets to all of these heading
types.
And it's the equivalent of basically saying h1, font-family is Montserrat-Bold,
h2, font-family is Montserrat-Bold, h3, and instead all we need to do is just to put it inside here.
And that applies that font-family to all of the headings that we have.
And this makes a lot of sense because if all of our headings have the default font of Montserrat-Bold and
all of our bodies for the rest of the text has the font-family Montserrat, then it's very easy to customize
the appearance of individual headings from there on out.
So now we can delete all of this and this and this.
So less repetition,
much better structure, and more modular code.
So those are the things that we are aiming for.
Now if we go ahead and hit save and refresh our web site, now we're not expecting to see any changes.
We're refactoring the code.
We're not trying to change the style.
In fact, if it does change then we might have broken something,
and we have to check regularly to make sure that our refactoring is not breaking our web site.
So let's head back and let's look at the next thing we've got here which is the h2.
Now let's take a look at where they occur.
So we've got some of these which are the testimonials.
And then we've got other ones which are the section headings.
We've got another one which is the price in our pricing table.
So, instead of having an h2 where we add all of these styles, I would recommend to actually give each
of these h2s a specific class.
So, in this case, this class might be called price-text and we can add the same class to all three of
the price text h2s.
And then we can go into our styles.css, find the pricing section, and then target the price-text and
change its font-size to 3rem and line-height to 1.5.
And let's go back over here and refresh and just make sure that we haven't broken anything, looks exactly
the same,
so that's all good, and then we can head back and we look for the next place where we used an h2.
So the other place are these testimonial titles.
So let's go ahead and add a class here, and we'll just call it testimonial-text, and I'm going to add
that class to the other testimonial also, which is here.
And then we're going to hit save and we're going to go and find the testimonial section and we're going
to add the class selector testimonial-text, and we're going to say that the font-size is 3rem and the
line-height is 1.5. And the last place where we've got an h2 is this section heading.
So I'm just going to give it the class of section-heading, and this means that if we decide at a later
date to give our web site more sections, sections that require section headings, then we can apply the
same style by simply adding this class to whatever new section we need to create.
So now let's go in here,
and, in the headings section we've got up here, we've got a big-heading and we're now going to add our
section-heading, which is going to have a font-size of 3rem and a line-height of 1.5 rem.
So now we're able to delete this h2.
And you might be wondering why I'm going to all this trouble of essentially, you know, kind of going back
on what I said earlier, right?
We said, ‘Don't repeat yourself’,
and that's important when you're trying to refactor your code.
But, at the same time, say if you're looking at your web site and you realize, wait a minute, there's something
a little bit wrong with, you know, this part of the text.
Well, then it's as easy as going to Inspect and finding the class that we've got here which is testimonial-
text,
then scrolling to the right section, and we know exactly which part of our code affects the style of
that section.
And it's very unlikely that on your web site that’s the same at the h1 and h2 level.
So this is what we mean about modularity, so it allows you to drill down on a specific section very very
easily and figure out what the problems are or change the style of one particular section without affecting
the rest of the web site.
Now the last heading element that we've got here is an h3.
And in our case we're setting the font size to 1.5 rem.
So let's check the h3s that we've got on our page. And we've got some of these h3s for our card-header.
And then we've got some h3s for our CTA heading, which is actually overwritten with the cta-heading
class over here.
And we've got one more h3 which are the feature titles.
So it might be a good idea to add a class here and we call it feature-title, and we can
apply this class to all three of these feature titles.
And now, if we go into our features section, we can target the feature-title and we can update its style to
have the font-size 1.5rem, and we can now delete this rather specific h3 styling.
So now all of our HTML elements are pretty much doing very very broad stroke across the web site
type of styling, and there's nothing specific in here.
Whenever you're trying to apply some specific styles you probably want to ask yourself if you want to
use a class.
Now, in our case, I've been a little bit lazy about adding classes as we're going along with our coding,
all because I wanted to save up all of this juicy goodness for our refactoring lesson,
but normally what you would do is, as you go along, as you're writing the code and as you realize opportunities
for refactoring, you would do it there and then, rather than waiting for some large refactoring session
that's probably always going to be procrastinated on and it's never going to happen.
All right.
So the other thing that we noticed while we were scrolling through our HTML code was that if we look
at the CTA heading here, it's got a class of cta-heading,
but actually, if you look at it, it's basically the same as our big-heading.
So in this case this kind of repetition is not really necessary because we can simply give it the rather
specific class of big-heading. And you'll see that nothing changes here because the same CSS style is
specified inside the cta-heading and also inside the big-heading. And this is almost like, you know how
we're using Bootstrap classes which have defined specific styles for different types of headings or
buttons and all we need to do is just add the class,
well, we're kind of doing this for ourselves.
We want our big headings to look a particular way,
our section headings to look another way, and we can reuse these classes across our web site.
Now the next thing that will be a bit of an eyesore that you might have noticed while you're scrolling
through the web site is that you see text-align center. Let’s just control or command find that, and you
can see that there's seven instances where we had to declare text-align center, text-align center, all
over the place.
So if it's occurring this commonly, and it's pretty much in every single section that we've had
to add text-align center, then it makes sense to simply add this web site wide. So we can make the entire
body of our web site text-align,
and that way we can delete all of these other instances.
But remember to keep the one inside your media query, because that's a different use case, that's for
when our title goes into the mobile mode.
We still want to change it to text-align center.
So let's hit save and refresh and you'll see that not much has happened, which is good,
apart from the fact that our title section is now text-align centered and no longer text-align left,
which looks kind of weird. But that's no problem.
It's much easier to write text-align left once, rather than write text-align center seven times,
right?
So inside our title section we're going to set the text-align to left, and now everything is good as
gold.
The other thing that we see repeated pretty much across our CSS is this padding 7 percent 15 percent.
And if I hit find then you see we've actually specified it in four places and we’ve repeated our code sort
of needlessly like this.
So this kind of padding is usually the container's job, but in our case the container-fluid has kind
of been adapted specifically for our title section.
This is the only place in our HTML where we've used container-fluid so far, because we've made the
style too specific for this section, whereas it's meant to be something that you should really reuse.
So let's change container-fluid to 7 percent top and bottom and 15 percent left and right, and then let's
put some container-fluids around all of the areas where we had this particular padding style specified.
So the first one is inside features.
So let's scroll to the features section and let's add a div that is a container-fluid and move the closing div
down to the bottom.
All right. And then let's go on to the next one.
Next one is the carousel-item.
So let's find the carousel.
It should be inside the testimonial section.
So here's our carousel-item.
And instead of applying the style of 7 percent top and bottom 15 percent left and right to the carousel-
item, all we need to do is just add container-fluid to the list of classes for this div. And we're going
to do it over here as well so that both carousel-item divs also have this container-fluid.
Make sure that you don't have any typos like I just did just there.
So let's go to the next place where we've got our padding 7 and 15, so that's the cta and the footer,
and I think that's the last of it.
So let's go to our cta section and add a div that is going to be container-fluid,
and the same in our footer.
And I'm just going to beautify our code so that it's a little bit easier to see.
So now that we've narrowed down all of our padding 7 and 15 percent so all the places where this occurs
then it's a good time to delete it because we no longer need it.
It's now covered by the container-fluid.
And in fact if you do keep it you end up with two sets of paddings which is not what you want.
So now there's just one found and that's for the container-fluid.
So that's perfect.
So now if we hit save and refresh our web site still looks OK.
Now the only one that doesn't look the same is our title. Because the container-fluid has 7 percent top
and bottom padding, then it pushes down our nav bar by quite a bit at the top, which is not what we want.
So how can we change this?
Well, let's inspect using our Chrome Developer Tools, and you can see that we've got this container-fluid
here that has all of that padding at the top, 100 at the top, 100 at the bottom, which is roughly the 7 percent.
So all we need to do is to change this to a value that's a lot lower.
So let's say, I don't know, say 3 percent, right?
And we restore it to the previous look.
So how can we implement this in our code?
Well, one way of doing it would be, let's say that we decided, oh, you know what, I'm going to abandon this
class, container-fluid.
I'm going to give it a custom class like title-container or something else like that.
But remember container-fluid is actually a Bootstrap class, which is quite helpful when we're keeping
our web site responsive and all of that.
So we do want to keep it and we don't want to just, you know, give up and give it a custom class.
So how else can we do this?
Well, what if we changed the padding for title? What if we targeted this specific id instead of the container-
fluid?
Well that doesn't really work.
Let me show you why.
So, at the moment we've got the container-fluid selected, but now I'm going to select the title section
and, if I change the padding up here to 3 percent, you'll see that it'll actually add more padding on top
of the padding that we've got for the container.
So now the container-fluid has some padding and the the title section has some padding, so that doesn't
work either.
We're not overriding this by adding a padding to another HTML element.
So what can we do?
Well, we can combine some selectors in order to say that,
all right,
so the general container-fluid should have this padding,
but in the title section,
so let's make sure that we actually have a title section that's commented out and let's move our container-
fluid up here because it's no longer just belonging in the title section, right?
And we'll call this Containers, and I'm going to move the title section to below the navigation bar, say
around here, so that it's together with the title image and the download buttons.
All right. So instead of adding the padding to our title section, what we're going to do is that we're
going to select the container-fluid, but we're going to say that we only want to change the style of
the container-fluid, and we're going to set it to have a different padding of say 3 percent at the top,
15 percent left and right and 7 percent at the bottom.
But this is going to apply this padding to all of the container-fluids, and that will conflict with
our previous container-fluid selector.
But what we can do is we can say that for the container-fluid class that is contained inside the title
section then apply this specific padding.
And because this rule is more specific than the one that only targets the container-fluid class, then
this will override the previous one.
So now let's hit save.
And if you refresh, then you can see that we've gotten back our previous layout for our top container-
fluid.
And if you inspect, and you click on the container-fluid in this top section, you can see that the previous
padding was overridden by the more specific one that we created just now.
And I'm just going to pause here for a moment because I want to explain to you how you would combine
selectors in CSS. So, to learn about that and more,
I’ll see you on the next lesson.