XHTML and CSS Tutorial - 34 - External Style Sheets Video Lecture | Learn Website Designing with XHTML and CSS - Software Development

what's going on guys welcome to your
34th XHTML and CSS tutorial and in this
tutorial I'm gonna be talking to you
guys about something called an external
stylesheet and this is definitely the
most helpful lesson that I taught you
guys so far so so far if you only watch
one tutorial make sure it's this one
because it's gonna make your life as a
web designer so much easier so anyways
wouldn't it be cool if we could have one
set of Styles one set of rules that we
can apply to our entire website no
matter how many pages we have on it so
for example before on this webpage we
would need to list all our Styles turn
paragraphs read turn headers green turn
links orange and then we go to this web
page over here turn paragraphs red turn
headers green turn links orange and if
we have like 500 different web pages
then that would just be a pain in the
rear end
so anyways wouldn't be easy if we could
just say alright we had this one main
outline of styles that we want to apply
to our entire website every single web
page so we just go ahead and type use
that style use that style it's a lot
easier than trying to manage all those
styles and then say you have 500 pages
and then you decide you know what
instead of red paragraphs I want blue
paragraphs
well looks um looks like I'm gonna have
to edit 5,000 pages instead you only
have to go to one location change it and
edits the entire website for you so
anyways let me go ahead and make a
simple website um in her body let's go
ahead and add a header h1 h1 and just
really like this is the index page
beeyotch no don't write that in anyways
go ahead and like add a paragraph
my name is Perry the parrot I am a
paragraph I don't see any typos the and
last but not least just go ahead and add
a link href just go ahead and link this
to your second page and click me I dare
you to biatch no you don't want to say
that
so anyways go ahead and take a look at
our index and actually might as well do
this just go ahead and copy this in on
your other website or excuse me your
other webpage I always get those terms
max though you know actually a web page
is the individual page your website is
your collection of web pages so you know
I get a mixed up but now you guys know
so let's just go ahead and write this is
the let's just right second page and
this link can go to index.html and
actually this one go to second dot HTML
so now what we have is a simple website
with two web pages on it this is the
main page and you click this and it
takes you to the second page you click
it again it takes to the first page
second back to the first second back to
the first the second in the back to the
fire yeah I'm stopped in there right now
so anyways like I was saying and if we
wanted to apply styles to each of these
web pages we can go ahead and we already
know how to apply styles using CSS so so
we can go ahead throw those style tags
in there and go make a rule for the
heading the paragraph in the link then
we can go over here make a rule for the
heading the paragraph in the link but if
we wanted to edit it then we would need
to go back edit here and you go back
edit here here then here I'm getting a
headache already just thinking about it
so let me show you guys a super easy way
that's gonna you know it's gonna fix
your life forever
so don't even touch these files right
now go ahead and click file new or you
can just go ahead and click this button
right here to get a new and it's going
to make you a new file now here is where
we're gonna put all of our styles but
you don't need that style tag like that
the only thing you do need to do is
paste in all the rules that you want so
for example for our header one let's
just
go ahead and make this green or
something just make something noticeable
that will stand out now for our
paragraphs um let me just think of a
couple things real quick font family
Tahoma I think that's how you spell it
I'm not sure we'll see if it works um
color red and font size 20 pixels
there's a nice round number it's also my
favorite number did you guys know that
20 my cell Ted bit of information all
right now let's go ahead and make all
the links orange or something stupid
color orange so now we have all these
rules right here but how do we tell our
web page is that these other rules that
we want to use well the first thing we
need to do before I even think about
doing that is go up to here file save as
and we need to save this as a special
file you can name it anything you want
so I'm just gonna name mine donkey
because why the heck anon and you need
to save it as a CSS file and in order to
do that go to the drop down menu and
select CSS which stands for caste
cascading style sheet file or we can
just type CSS but you know who wants to
type when you can just click buttons so
go ahead and save this and now we have
this special CSS file that has only
rules in it it has three rules about
heading a paragraph and a link so now we
need to go into our webpages and tell it
that we want to use this file instead of
you know styles so in order to do that
and make sure that you don't put this in
style tags we don't need style tags any
longer what we do need is a special link
tags and it's a single tag so you know
there's no opening closing you need
three attributes for this the first is
this is your like relationship or
relative or something anyways you put
style sheet and that never changes so
you know you don't even have to worry
about what it means the next is what
type of file you want to link to and
that is actually called
text slash CSS this never changes also
so again we have two things that never
change the last thing is href and the
reference is what is the name of that
document in case you forgot is donkey
CSS so donkey dot CSS and make sure it's
stored in the same folder as your index
in your second webpage are so now if we
go ahead and save this and actually I
could type this all again but I'm Way
too lazy so go ahead and paste this in
the header right here and now instead of
all those Styles what it's gonna do is
say alright so you want to use a list of
styles huh all right where are those
styles in donkey says it so every time
this web page gets loaded it's going to
load all the rules in donkey CSS and
apply them to these right here and every
time index gets loaded it's gonna look
at donkey CSS and it's going to apply
them to these right here so let's go
ahead refresh this and see what we got
now in our index our headers are green
our paragraphs are two Homa red 20
pixels and our links are orange
pretty cool huh and we did this all
using an external stylesheet so let's go
ahead second index second index check it
out so now let's say we made a website
and now has like 5,000 different web
pages on it and your boss comes in and
he's like yeah you know all those
headers instead of green I actually want
those blue and he's thinking that he's
kicking you in the butt making you hate
your life because now you have to change
a thousand different web pages but you
know since you use external style sheets
all you have to do is go in this one
document and change that word green to
blue now save this and check it out
refresh refresh now all your web pages
have blue headers so how much easier is
that to manage than just a list of
styles pretty cool huh
so that is the beauty of an external
stylesheet how to use it in a why it's
so useful so anyways that's all I got to
say I was like gonna be rambling on
about something else but that's
basically all I got to teach you so
anyways thank you guys for watching I
hope you enjoyed this tutorial
super important one so anyways I'll see
in the next video and if you get bored
don't forget to check out my website so
I'll see you guys later