Hello and welcome to this mini project.
Part two in this part we will be spile in the form we created using hastier male in part one.
So this is the hastier male quote used to create the form and this is the output from this hastier male
code.
So we've got the structure of the form.
Now we want to start styling it our style sheet is blank at the moment.
So to begin styling we need to pick out the elements selector's that we want to style.
So we start from the top of the page look up what we want to style.
Make sure your link to your style sheet is correct.
So now scroll down.
Okay.
I want to style this.
This is a container that wraps around it's like a border.
So we named out a few set older doors copy that feels set to my style sheets and just put it there.
So plus on Selecter a scroll down the head in head in which is this one log in with your e-mail.
So I want the hate to Hard Copy that
is that until my CNS is good down again.
Well a class here full input.
These are the input boxes here.
So we've got a class causa bra for the input compeer head so let's sipa.
Notice this is a class so you must have a dot beside it.
And then let's go back to that document again.
What else do we need.
Of course this class will style all be all the inputs we don't need to study checkboxes.
These aren't teacher books.
This is a check box.
We don't want to style that our leave that as it is for now to save time radio button These radio buttons
I'm going to leave that style.
But you can if you want to know.
I like to sound the log in box which is this one here.
It's got an idea off logging school.
Copy that log in into my salchow it because this one Heidi you need to put the hash tag before the name.
So hash tag make sure to log in.
So we've got one two three four so we've got our selector's.
We want to style.
So we just need to ship them out properly in the stylesheet.
So we need to create some curly braces to place the csx code so to create calibrators each of the curly
braces on your computer.
Some got the ped want make sure they are paired and then just tab in between to create a space and just
check to make sure they are properly paid.
You see the highlighted and come here and do the same and separate them come here in the same vein as
separate.
And then finally eidy come here and separate.
So I'll go on my quarterly basis in place.
And I got my selector's in place or will start styling.
All right.
I have just written some could here to start with fieldset.
Phil said.
Is our trial border here.
The box the container have given it a background column of both and I've said I don't want any border
to show I have given him board a radius of 10 peaks.
This will make it a bit round in the corners and the margin at torday to create this space from the
top 55 pixels from the top and nothing from B right now to him from the bottom but from the left I've
told it to move 250 pixels.
What this box here will move 250 pixels have given it with course currently is the width is quite long.
So I will let me show you what the corrin with look like.
This is how longer these Handelman meant it as the and the size of BP.
So I'm going to reuse that and then a set the weight to 450 pixels wide and I'm one to make it 350 pixels
long in height.
So that would be this box here so.
I saved the quote.
You should see the changes reflect here.
Our goal is to save the fair refresh.
Okay.
So it's giving us liars around the corner.
Around it is done using the body radius property.
So we've got a nice colour there.
So this is for the fieldset the actual container that we apply this time into next we are going to apply
styling to the hatch to which is this here.
The title log in which Are you male.
That's what we're going to start now.
I've written some style so I'm going to give it a background colour of this music the hex value.
You can always change things.
Change things around you know use yeong collars and experiment with some of the values you don't have
to stick to my values just experiment and see what works for you.
So I've given the background quite a lot of this and this colleague here refers to the colour of the
text so this is white collar or white and then I'm giving it a margin margin basically So space.
So I've took it.
I've given it a negative value you keep with margins you can apply a negative value.
That means it will it will go in the opposite direction of movement.
All right.
So this is I've given this a value of negative and then this is for the this is the top is zero right.
Given the negative of 11 pixels top red bottom zero and then left of giving it a negative pixel value
padding is the space between.
So I've given it 15 pixels or round top right bottom left and then position I've set the position to
be relative the value of giving it toward it to move four point five pixels from the bottom.
It will move up 4.5.
Giving the body's radius of 10 pixels to give it coalesce around at corners just like this fieldset
here.
So if I say this you see the changes to the hitch too.
All right so this we've got to now stalled up right which is in these values.
Next I'm going to apply styling to the input boxes.
This input here this is email and then the parsable section and will apply styling to them.
So I've given it a week to be three hundred and thirty pixels a height of 40 pixels that here's how
long it will be said.
I don't want anybody to give me the body radius of 10 pixels or he has slightly rounded corners.
Said the text.
I want the text to be centred.
So that's what this value is giving the margin from the left.
So I've told it to move 50 pixels from the left so from the left ear I've told you to move this way
will do that with 50 pixels to the font size to be 15 pixels large so this text in between will be 15
pixels.
And I've also specified that the text should be in bold.
So if I save that around that you should see some changes in this input boxes see that soon has the
stylee applied using these values.
Finally our final select on to start will be the submit button which is the log in boxier.
This one here.
So this is where we're going on target now.
So this is the stylin.
Giving it a with 150 pixels how wide it will be.
I've given it a height of 45 pixels how long it will be given by the radius of 10 pixels.
That is to give it a slightly rounded pitch and then I've told it I'll give it a margin from the top
of giving it a negative margin to to negate seven pixels from the top.
Give me a background Kelong of this value and the cholo of the text will be white.
That's what this file is falsely told it to have a margin from the left margin from the left.
I've told it from this left here to move 145 pixels.
There's font size given the size of 20 pixels I love to do font to wait to be bored so this text will
be bold and it be 20 pixels.
If I say.
You'll see fair refresh.
Excellent.
Nice red button there.
So this is the log in.
Got it.
So we are done with the stylin of the fall slide Pookie.
Notice there is no space between this import and these.
This check box here and this radio so this shoebox and this way there's no space or I'm going to go
back to my history airmail form and try and adjust that.
So let's go to the phones to this is a fun.
So when I use it break tag to me to create space.
So right click on that break and I'll look for where the input tag NC it and then so a concert on another
break there say that refresh.
Excellent.
I think this is all right.
So has created a space so if you want more just certain and break.
So we are done with a stylin of the fall or you may be able to do better.
In fact you should do better.
Play around with his values and see what suits you.