CSS Tutorial for Beginners - 10 - Using an external style sheet Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

welcome to the 10th tutorial on
beginning CSS today we're going to look
at external stylesheets now previously
we've been using an internal stylesheet
and there are three ways to insert your
CSS into your HTML document the first
way as I just said is an internal
stylesheet the second way is to use an
external stylesheet and the third way is
in line and we'll get to that in later
videos now in the last video we had four
different HTML documents that we created
we're just going to use the HTML
document called normal that we created
in the last video and what I want you to
do first is rename that to index and
I'll explain this later and what we're
going to do then is open this up and of
course here are the style tags that we
are using for our internal CSS so again
today we're going to create an external
stylesheet so we're going to pull all of
this out and put it into our external
CSS stylesheet and it'll look the same
actually if we if we open this up just
make a mental note of this it'll look
the same we're just inserting it in a
different way now to explain briefly an
internal stylesheet is good if you just
have one page and you want to just use
some CSS for that individual page but
that is not realistic the more realistic
way is to use an external stylesheet
because your website will have several
HTML documents and it makes sense that
you want to share some of that CSS so
that's why you use an external CSS
stylesheet and that's what we're going
to do actually for the rest of the
series so let's go ahead and open up a
new notepad file and we're just going to
call this stylesheet all one word pretty
simple and then what I want you to do is
open back up our index.html document and
we're going to go ahead and copy and
paste all of our CSS into our external
stylesheet now we'll copy this but
notice we do not need the style HTML
tags now right because this is going to
be its own CSS stylesheet it's just
going to have CSS in it it's not an HTML
document is just going to be a CSS
acumen so we don't need these style tags
anymore this is just if you're embedding
it into an HTML document so let's open
up our stylesheet and we'll copy and
paste our CSS into there and there you
can see we just have our CSS now and you
can see how this is a lot easier to read
actually it's easier to manage your CSS
in an external stylesheet so let's save
that so we're going to do a save as I
want you to select all files and we're
going to call this dot CSS and we're
going to save this and there you can see
we've got now our style sheet that has
all of our CSS in it now we can go ahead
and delete the file we just made here
that was just a placeholder and let's go
back into our HTML document because we
can delete all the CSS now and again we
don't need the style tag so we can just
get rid of that and there that's a lot
easier to read actually to now we've
just got pure HTML but there's a problem
this stylesheet is by itself so we still
have to point to this style sheet within
our HTML document and we do that again
within the head HTML element so let's go
ahead and do that and actually I'm just
going to copy and paste this in here
because I already type it out and this
is what I want you to type all of this
right here so it'll be an angle bracket
you'll type in link space arielle and
this just says that it's a CSS style
sheet and this is the type which of
course is CSS and this is the most
important one the href this just points
to where our external CSS stylesheet is
now we're going to put this in the same
folder in a minute here so we don't
actually have to specify a folder
because all of our files are going to be
in the same folder so type all this out
and then I want you to save our document
we're going to close that out and then I
want you to create a folder called
website and then I want you to go ahead
and drag our files into there and now
we've got all of our website files in
one folder and actually when I get to
the series where we develop a full
website this is how we're going to do it
we're going to actually have all of our
files within one folder and so now if we
open up our HTML document and by the way
the reason I call that index is because
that is always the first page that gets
loaded that's always the first page in
your website all other pages will be
named something else it's usually either
index or default but we're going to name
it index so if we open that up and you
can see it looks exactly the same as
when we use the internal stylesheet but
now the only differences we're pointing
to an external stylesheet and in our
future videos we're going to keep this
exact format and it'll be much easier
for us now to edit our CSS that's much
more readable in my opinion okay so that
is it for this tutorial in the next
tutorial we will start to look at
properties again