OK so it's time that we actually write some C S S.
Very exciting.
Before we do that though we need to have some aged him Al that we can style.
So I'm going to go ahead and in sublime make a new file save it just put on my desk top for now and
I'm going to call it about me.
HMO.
Use that little trick get the skeleton the boiler plate and this is going to be a very simple page.
I'm telling you now is not going to be beautiful when we're done here.
We're just going to change some colors.
We're just going over the basics of how all of this works together.
So I'm just going and each one about me and then let's say an itch for
my hobbies.
Feel free to adapt this to yourself.
Let's add a list and a few allies and let's do flying tar cooking and origami and save that file.
Let's just double check.
Let's open it up.
Great.
Here's our wonderful site that we're going to style.
So before we start actually writing success we have to decide where to put the success.
And there are actually a few choices.
So in the notes there are two that I'm referencing on this page and the first one I'll tell you right
now is not a good idea.
I'm showing it to you just so that you are aware to for two reasons.
One this is the only way that used to be able to style elements before separate style sheet and before
CSSA you actually did this in every single element.
So let me show an example.
I want to make this first lie purple.
I would say style and then in the quote say Color Purple and that will work.
And this changes to be purple.
So there is a problem though which is if I want all three of these to be purple I need to go ahead and
duplicate this every time.
Which is a lot of work.
And then if I decide oh no I want them to be green then I need to go and change three different places
to be green.
And obviously that problem is much worse when you have hundreds of the same element with the same style
on a given page.
So this is a bad idea.
And the other reason this is not a great idea is that we want to separate our h tim L from RCA.
It's this idea of the separation of concerns.
We want our CSSA to be self-contained in its own file.
We want to age him to be its own file with just the structure.
C Ss is just the style.
So right now this is kind of a weird blend of the two.
So I'm gonna get rid of that and the other way in the notes is something called a style attack.
So a style tag lets us write C Ss syntax where we actually select things and we have the curly braces
which we couldn't do here.
But what we can do is do this inside of an h t m l document.
So up in the head if we go ahead and just create the tag called style
and we can give it this attribute type equals text slash C Ss we can now write some C Ss tags and selectors
inside of here.
So remember we have this is the general rule selector and then we have property inside the curly braces
and then value and then a semi-colon.
So I'm going to comment this out by the way to do comments.
SS use slash and the asterisk and then asterisk and slash.
So I mean I'll leave this here.
And let's start by changing the H-1 to be purple.
So the way that we write that if we follow this pattern we select it.
So we're going to write each one and again and we will be spending a lot of time on different types
of selectors.
So right now we're learning about one called the elements selector which led to select based off of
an element type which is H-1.
So now we're going to add a property in here and in this video we're just going to keep it extremely
simple and use color.
So I'll say color and then purple and save this reload or page back up and we get a purple H-1 So the
next thing that we can do is change all allies to be orange and to do that we select with an element
selector again and we can just do this right after.
We don't need any commas or any other punctuation.
We just do another rule here apply curly braces and this time we're going to say color is orange.
So the reason we're doing this is I want to show you that this Elyse selector it doesn't just select
one selects all lies.
So we refresh all three of them are now orange.
Likewise with the H-1 if we had multiple h ones.
So I'll just add three.
They would all be purple.
One other thing I'll show you over here is if I need to find another style for each afterwards and I
say it should be blue
it turns blue.
All of them turn blue.
And so this gets at something that we'll learn a lot more about which is what happens when there is
conflicting style information.
And in this case we changed them all to be purple.
And then afterwards we change them all to be blue.
So the one that came later won the battle I guess.
OK.
So the problem with what we've just been doing though looks fine but unfortunately it's still in our
HMO.
And I just got done saying a few minutes ago we want to separate or h him out and R C S us we don't
want them to be connected.
Well we want them to be connected we don't want the CCs to be nested inside her HMO.
So functionally it works exactly the same way.
We don't see any visual difference but well what we actually want to do is use a link tag.
So what a link tag lets us do is write or see SS in a totally separate file and then connected with
the link tag instead of our head which will basically go get the contents of that file and soul and
style everything in our age.
Tim L. given the contents of that file.
So to write that we can either start by making a new file and we're going to put RC SS in here so we're
going to save it and I'm just going to call it up.
C Ss you call it whatever you want but needs to be dot C Ss and I'm putting it in the same directory
as my HDMI file.
The next thing I'm going to do is just define a few styles and here so H-1 let's say color is red and
lies color is green.
And while we're here let's change it for as well.
Color Purple.
Great.
So we have CSSA defined here of course and I'm going to comment out this for now.
Of course though they're not connected right now.
So we made a file but it's not connected.
So to do that we need to use the link tag.
So I'd like to just type link and then hit tab and you can see that there's this important attribute
that sublime text wants us to fill out which is called A-Trak and it works just like the trough on an
anchor tag and that would give it a arrival.
We give it a place to find the file.
So in this case this file is just called apt us so we just write abducts yes us save and refresh.
Now you can see we have read H-1 a purple page 4 and green allies so let's all we're going to do.
As far as styling for now.
So to recap here the first thing that we discussed is using the style attribute to add style in line
which looks like this style equals and then give it a property and this is a bad idea for two reasons
.
The first of which is that we don't want to clutter or H Tim L with a bunch of styles.
We want them to be separate.
And the second reason is that it's a pain if we want to change things.
It's a lot of duplication if we want to make all 3H one thread.
We have to copy that code to three different places.
The next thing that we learned about was using the style tag and the style tag lets us write C S us
inside of our h Timo.
And it works well.
It does let us use the CSSA syntax where we can select all each one at once.
The problem with it is just that we don't want to put R C S S directly enraged him.
But you will use this occasionally if you're just debugging something you want to quickly add some styles
you don't want to make a new file and then connected.
You're just going to delete it afterwards.
So that's really the time where I use it.
It's just for quick demonstration purposes.
But what we actually want to use is the link tag the link tag.
It's just a reference to another file.
So we need a file filled with styles needs to end with Dotsie assess save it and then connect it with
the H ref attribute and that's all we need to do.
One thing I forgot to mention is that you definitely want to put link tags and styles in your head.
That's really the point of the head it's where you put the stuff that isn't actually on the page not
the elements but things that have to do with those elements so fonts that you're including style sheets
and then eventually javascript's