CSS Tutorial for Beginners - 50 - Strategies - Selectors Part 3 Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

we've talked so much about selectors in
this entire CSS series and that is
because they are so fundamental to CSS
so in this video we're going to talk
about some strategies about where you
can place your CSS rules what might be
the best approach now for this video
I've created three content areas three
div sections and each one of them has
their own separate CSS code as you can
see the left the center and the right
and that's fine if you want to do it
that way you can certainly do it that
way you can place all the CSS code
individually into each section you don't
have to share any of the code but you
might ask the question well take a look
at this bottom line of code here we're
using the same exact CSS property and
rule for each one of these sections so
does it make sense to keep each one of
these lines separately or maybe we can
make another CSS rule so that we can
control it easier we can control it from
one centralized location so let's go
ahead and do that so I'll just go ahead
and copy and paste the new rule set and
there you can see now we've put each one
of our ID selectors in here for all
these sections and then let's just take
our border property and go ahead and
copy and paste it into here and now we
can go ahead and get rid of the border
properties that we set in each of these
sections down because we have it in this
new rule set that we've created and so
now we're controlling this from a
centralized location so let's go ahead
and hit save we'll refresh our page and
there's no difference as you can see now
what makes this easier is let's say we
want to change this color to green now
we only have to do it in one place we
don't have to go into each section and
update the rule three times over that's
kind of a waste of our time so it's much
easier to manage this from one
centralized location now you may ask the
question well when is it appropriate to
do this because I only have three
sections here and yes we probably could
just keep the border property in each
one of these CSS rule sets but imagine
we had 50 sections or 50 HTML elements
that we needed to update what we really
want to have to go into each section and
update the same line of code over and
over
over again does it make sense to do it
in one area so that's really the
question you want to ask yourself but
again it's really preference some people
find it easier to understand their CSS
code if they keep all the code in the
same rule set and so each content area
has its own code and nothing is shared
so again it's how you prefer to do it
but it's very easy to do mass changes if
you do it like this now one other thing
that I want to talk about that we
haven't talked about in the series is
precedence and that is let's say I
create the same exact rule so let's go
ahead and just copy and paste this over
again and let's change this now to
orange and we'll hit save
we'll hit refresh and there you see all
the borders are orange and what happens
here is the last rule in your CSS style
sheet takes precedence so if you have
another CSS rule up here that's doing
the same exact thing the last rule will
take precedence that's the way it works
so if we move this green now down here
and we get rid of this we'll save this
and there you can see the borders now
are green because this rule now gets
precedence okay that's going to do it
for this video see you guys in the next
video