Need up to 30 seconds to load.
today I'm going to teach you how to set
up a style sheet to your website which
basically means that right now we have
this beginning project that we created
in the last video but once we actually
start putting in content into the
website we want to be able to style it
so that we can actually have it look a
certain way inside our website so the
way that we can create a style sheet is
first of all we're going to go up inside
our folder here where we have our
website and I'm going to go and create a
new folder so I'm going to say click new
folder and I'm going to call this one
CSS
which means that all the CSS files that
we have inside the website are going to
go inside this particular folder here so
inside this folder I'm just going to
make sure it's selected and then I'm
going to say new file and then I'm going
to go and call this one main dot CSS
now you don't have to call it main.css
this is just kind of a name that I
decided to give it you can pretty much
Call It Whatever you want to but the
main thing about style sheets is that we
can actually have more than just one
inside our website so in some cases I
might have one style sheet for all the
overall styling of the entire website
but then I might have a particular style
sheet for a particular page inside the
website in case I want to do something
like that you can also if you want to do
that just have one big style sheet that
does everything inside your website but
when it comes to Performance it's just
kind of like a better idea to like split
it up into different files for now we're
just going to stick to this main.css and
then maybe later on we'll actually talk
about splitting up The Styling but for
now we just can keep everything inside
main.css so with this style sheet
created we now have it inside a folder
so what I can do is I can go back inside
my index file but now whenever we want
to have any page inside our website have
the styling actually loaded into it we
do need to link to it from within that
particular page so in this case here I
have my front page but I don't actually
have a link to the style sheet so that's
very important we do otherwise The
Styling is not going to work so what
I'll do is I'll go down to the next line
inside my hit element and I'm going to
go and create a link tag and something I
didn't mention in the last episode is
that with all these different
suggestions that pop up here to
autocomplete things we can go and click
it with our Mouse so we can select any
of these but we can also if it
highlights one of these just click tap
on the keyboard and then it's going to
autocomplete for us just to show that
there is a keyboard shortcut to do this
so within this element you can see that
we have a couple of different attributes
this is what we call these different
things inside elements so we have an
attribute here called Rel that is set
equal to a style sheet which means that
this is a style sheet link that we're
linking to and then you can see we also
do have a hyper reference or ref for
short and basically this is going to
link to a particular style sheet that we
have inside our website folder and from
this document where do I need to go to
go to my style sheet well right now we
need to go inside a folder called CSS
and then we need to select the one
called main.css which means that we go
inside the path here and we say I have a
folder called CSS
forward slash by going into that folder
and then we have our main dot CSS and
with that you now have a link to your
CSS file so you can actually start
styling your website so with that I hope
you enjoyed and I'll see you guys in the
next video at the end here I'd love to
say thank you to all the different
patrons and YouTube members who is
actually supporting the channel as well
as a special thanks to Kelly korvey
who's actually sponsoring the channel
for the month so thank you so much uh
the channel wouldn't be here if it
wasn't for all the different members so
thank you so much and I'll see you guys
next time foreign
[Music]
![How to Link a CSS File to a HTML File [Web Tutorial]](https://i.ytimg.com/vi/gr7kzZchs7k/mqdefault.jpg)
