Hello and welcome.
In this lecture we are going to be styling our hasty e-mail that we created for our app.
So I am inside my text editor on this is the says fall.
So this is where we're going to define the styling for our app.
So we're going to use the I.D. where we've got I.D. to use.
If not we'll use the actual elements to style the T.M..
I have added some basic styling here for the body of the actual hate mail.
So this style would be applied to the body when you're styling.
You need to have a selector.
In this case the body is a selector.
And then in between the curly braces this one and this one here you specify the properties and the value
you want to apply to the selector.
So in this case I have got several properties here in the text line is a property and I want the text
to be centered quite another property called background color.
I've given it a hex value background color.
You don't have to use hex value for example if you know the actual color name you could specify that
in place of the hex value.
Here again the color I specify a white this color here refers to the color of the text you use for the
body not the actual not the actual background.
Okay.
If you want a background color you need to specify background color font family refers to the font the
type of font that you can use.
It's always good to specify more than one.
So objects and area just in case the first font is not available on the machine that is viewing this
page.
So it can default to the other one.
So what I'm seeing here this is my first choice here the font is now available.
Default to that.
So most computers should have either both or either.
I have that a chunk more of styling from line eight here to line 18.
Notice here I've used the I.D. attribute this idea here is for I have from this I.D. inside here we've
got an I.D. here called and that's the I.D. I am referring to here.
All right so that's the target.
And these are the properties and these are the values that you separate the property from the value
with a colon.
OK.
So again this is the I.D. I'm styling the background color.
I've given it red border set to zero.
I don't want a border color.
It's white which is a color that it's referring to color of the text padding.
OK.
Pattern is the space inside the element while margin is the space outside it.
So these are the values are specified for the padding cursor the cursor property basically specifies
a type of cursor to be displayed when pointing on an element as well that is.
I've just said pointer margin again refers to this space outside.
All I'm saying here from the top one.
I want you to want there to be a space 35 pixels from the top.
That's what that means.
I have added some more styling from line 19 to 25.
And this time I am styling a class.
So if you got a dot followed by a name that is a class.
So I'm styling that class.
This class will be added automatically with our Java script but I'm just preparing this styling for
that beforehand.
So again the class here is the selector.
By the property Margene I'm saying from the top.
I want it to drop 13 pixels background Clive's set that to X color x value float means float.
Basically if you've got a means I want the element to move to the right.
Okay.
And where you have elements moving to the right you need to also specify a clay.
So we use float you need to use Claire.
Claire basically is used to clear any obstruction on either side.
And then the background color.
So we've got padding padding refers to the space inside time same space inside from the right.
I wanted to move 20 pixels border regions is what gives the around it corner.
So if you've got a square the border radius can likes makes it browned a bit.
So that's what the outrageous property does.
All right.
Did a couple of more properties to this class here giving it a with of 60 pixels and a height of 20
pixels border style I've said it to none so that there are no shadows or nothing on the borders.
I've added some more styling to this I.D. called wrapper which if we go into our hasty e-mail here we'll
see that we've got an idea here called wrapper which is the main div.
Does he want.
I'm targeting here.
These are the styling up applied to that I.D. again the width of said a width of 450 pixels a background
color.
I've given it a hex value.
The margin I've set it margin from the top.
I've said I want it to drop a hundred and twenty pixels margin from the left.
I wanted to move to 4 2 9 5 pixels padding from the bottom.
Remember padding is a space inside the element while margin is a space outside the element.
So padding from the bottom 30 pixels padding left 50 pixels padding top 30 right.
65 body radial 25 pixels.
By all means play around with these values.
You don't necessarily have to stick to my values.
Just play around and experiment and see what works for you.
I have handed a chunk more of styling from line 43 to 57 so forth.
I'll explain 43 to 48 first.
That is the U L which is the on order list which I will insert using the using JavaScript.
Basically these are the styling the lists all I want and don't want it to have any styling on the list.
And I've said that text aligned to left line height is the space between each text.
OK.
And then on line 49 the I.D. called task so that's where we'll actually input the task we want to carry
out so the task idea here on line 49 giving it a with of 320 pixels a height of 30 pixels the margin
from the left told you to move 17 pixels and line 54 is the hate one tag which I've given a margin from
the top.
I've said I wanted to move 30 pixels from the top.
That's what that means.
Okay.
So that's all our styling done.
I just save that we can try and review our app and see what it looks like.
All right.
So this is what the app looks like before the styling.
So I'll just refresh.
And this is what it looks like now after the styling so it looks much nicer more presentable with the
styling.
So that's it for this styling for this project in the next lecture or be doing the actual java script
writing javascript code that will make all this work.
Thanks for watching.
Bye for now.