XHTML and CSS Tutorial - 35 - Overriding Styles Video Lecture | Learn Website Designing with XHTML and CSS - Software Development

alright guys it's lucky and welcome back
to your 35th CSS tutorial and in this
tutorial I'm gonna talk to you guys
about overriding styles so for example
let's go ahead and take a look at this
website that we built before every style
on every single page is the same but
what if you come across a situation
where you have all your web page is the
same but there's one web page that you
might want to do a little something
different maybe you want all the
paragraphs bigger or maybe you want all
the headers to be a different color well
you don't have to you know throw fit
because there's a simple way that you
can override the styles on an external
style sheet using the old style tags
that we learned before and this is where
the term cascading comes into effect
when we're talking about cascading style
sheets or yeah that's what they're
called so anyways in order to override a
style let's go ahead and take a look at
our main Styles first we have our
headings blue our paragraphs red and our
links orange so say for example on this
page instead of our headings being blue
we want our headings to be green
well in order to change all our headings
to green all we would need to do is this
you know those style tags that I told
you guys take out before well go ahead
and throw those in again style and of
course remember type equals text CSS and
go ahead and put the ending style tag in
there too and now go ahead and write
your CSS rule so for example if we
wanted to change header ones go ahead
and change this to color green and now
check this out even though we have an
external style sheet saying that our
headers are supposed to be blue we went
ahead and we overrode that by throwing
in this internal style tags in our web
page right here and now when we go ahead
and refresh your website instead of
having blue headers we now have green
headers so the point I'm trying to say
is this in general this is like an
outline of rules we have to follow but
anytime that we want to change a
specific
on our web page we can just go ahead and
throw those style tags in and these
styles will apply to only this web page
and not the entire website so for
example on this web page we change the
headers the green but for the rest of
the web page they're going to be blue
still and that brings me to another
point the concept of cascading is this
you're gonna get all your rules right
here just like you imported them just
like you type them in directly there and
then later on it's gonna see our rate
actually I want my headers to be green
and since this was the most recent rule
that's why they're green so for example
if you went ahead and copy this and
paste it right here you'd have two
header rules the top one would say make
my headers blue and later on it would
say make my headers green well how does
CSS know what one you want to use the
way it determines what one you want to
use is it looks at the most recent rule
so check this out maybe this will help
clarify things if I go ahead and copy
this and paste it in at the top right
there give you a little space to work
with check it out now we're saying all
right make our header is green but later
on we're telling it to make our headers
blue so what happens when you save this
go to the index page in refresh our
headers are now blue so why are they
blue now even though we have this style
tag in this webpage it's because you
told it to go green first and then later
on you told it to go blue
so since blue was the most recent that's
where it went and again if we copy this
or cut it and make it green since it's
the most recent it'll change it to green
and leave the rest of your pages blue so
that is um how you override styles and
again you never actually want to put the
style tags above the external style
sheet because the only reason you would
have style tags is to override what's in
the style sheet so having any of these
style tags above would be worthless so
anyways the common practice of making
web pages of this go ahead and import
all the rules that you need before you
start doing the nitty
stuff and then all the fine changes that
you want to make you want to put them in
style tags and these will give you all
the custom differences for each webpage
so anyways that is how everyone always
sets up their CSS in the web pages and
this gives you a lot of control to give
your webpages exactly the look that
you're looking for so anyways thank you
guys for watching this tutorial in the
next tutorial we're gonna be starting to
talk about how to lay our websites and
make them look awesome but for now
that's all you guys so anyways thank you
guys for watching thanks for subscribing
and I'll see you guys next video