Welcome back.

So in the last few task we have put in all the contents,

including tax and image for our webpages.
So now it's time to work on the forming.
Now we could have put in all that information in the extra
Metaxas.
Well, that's not where they could practice.
One of the problems is if you want to change one
of the format, you have to repeat them in all the extra mile
tax, and that's not really efficient.
So a better way to do that is called using something called
a cascading style sheets or CSS.
So what is the CSS?
Let's go ahead and look at that.
So back in Adam, I've already created a CSS for you.
So if you go if you open and expand the CSS sub photo on the
left side, there's a file underneath that is called Master
that CSS itself.
You just double click that it will open it and Adam.
So now here you can see I've probably done a lot of work
for you, so we're going to look at a few examples here,
so it's just because we have limited time.
It's not possible to go through all these formatting options
you can study on your own If you want this attack, this
a link in the supplemental information.
Talking to that you can follow or just search it
on the weapon.
Study it yourself.
Now we're going to go over some of them.
Let's take a look off an example.
Here, Footer s O.
This is the name of the X TML element that you want to format
and is going to be followed by a pair of curly markets
on then, inside the curly park.
It's their pairs off attributes that you want to modify
with, followed by a colon and then the value and innocent
Michael.
They separate all the attributes.
So there's a basically, this is how you fought.
You modify the footer element so you can see
that it is modifying margins for footer and also each one x
two et cetera.
It's after a lot of them is already done for you,
By the way, all e m.
Right Here it stands for root.
Uh, e m.
It is a better way to specify phone size because it based,
um, it is based on the wood element size.
So it is better because webpages coming to displace
that be displayed on different devices until they have driven
resolution different screen sizes.
So always bear them in mind.
When you created Web pages that users will be looking at your
page, your your pages on different devices with different
screen sizes and capability and resolutions.
So how are we going to apply this style sheet toe our extra
mile file?
So go to index that extra aml Um, it goes under the header.
So let's go to heaven.
It could be anywhere, but let's just put it under title,
Okay, let's not the new line.
So go ahead, type along.
Um, you're going to type link r e l e crudes style she
and then a rough people's T s s Fastow dark C.
S s. And then you can just close it.
It's not really posing Link.
So we're going to do the same thing for estimate that x TML.
So let's just copy this line and the scare hit control
as to save this one, and then we're going to rescue mate
again. We're going to go under title, and then we're just
going to pay step line and then we're gonna do Head control
asked to safe.
And now we're going to test it.
We're going to go to Firefox, go to the patient
you were working on hit with flesh.
Now you can see some of that.
Margins are already applied, especially if you go to my
western.
Me? You can see some of that, um, margins are already
applied, so you can see some spacings here.
So I have a little assignment for you.
So let's go back to Adam and let's go back to master.
Got CS s.
So, um, I love the eggs to blank because I want you to do it
yourself.
Let's see if you can set the margin for the bottom and top
margin for X two.
I want you to set both off them too.
2.5 r e m two won five aria just like this.
So don't worry about this one for now, we're going to do
that next, So let's see if you convict, just change
the lodging you can.
You can copy from above and pays it and change the valley
if you want.
So go ahead past the video, give it a go.
And when you're ready.
Just hit, was it?
Welcome back.
I hope you figured it out.
Um, your screens, It looked like mine.
So, basically, you can just You could have just copy from X
one and just change the values to 2.5.
So it's it just like that.
Now let's test this.
Let's hit control as to save with the Firefox we flesh.
Now the spacing looks a lot better.
Okay, so let's put in a few more changes.
Let's go back to ATHM.
Let's go back to a style sheet.
Um, let's change the background color to be age just
like a finished product.
So that goes into body.
So we're going to find this line here.
It's except the background color.
So let's click right here.
You can just follow along and type along with me.
Eso back ground s color.
It's the American spelling for color.
Um, and page, we're going color by name.
Okay, um, so we're going to add a few more things that we've
only change.
We're going to specify the farmed color on the next line.
So just hit color colon black.
It says the fund colors don't now do it.
Why do we have to specified black even though the tax
over the black So you have the bear in mind that devices
the user can change the default color.
Um, and houses so and then also a lot of devices have dark
mood right now, so you might end up getting white tax
on a white background.
So if we always wanted to be black, we want to make sure
that we were put in this line.
So the next thing we're going to do is we're going to see
except the phone collar off X two, Slightly different.
So on all of you Remember in the final products the extrude
a little blue.
So we're gonna find this right here next to the first line.
We're going to type color now.
This time we're going to use the hacks of maximal ah
specification, which is basically the red, green and blue
components zeros of Palantine 07 Dr A.
B. And did some Michael.
Okay. And then we're going to change the font.
We want to use a farm to knock the one
that that has been showing now specifying fart.
As will be tricky when it comes to his Web design
because user will be requesting your page from different
machines that may or may not have to fonts that you want
install.
So we're going to have to specify foreign families in said,
um and left the brows who picked the closest to what we want.
So this is how we do it natural, unless do that in the next
task. But we're going to see how changes first.
So we're going to hit control ass right now.
We're going to go to Firefox, make sure it is the page
that you are working on and then hit with flash.
Wow, look much nicer background speech.
And we have x two.
And now blue eso.
It's looking pretty close to what we want in the next chance
we're going to finish for meeting it.
Okay, So see, in the next task.