Hello and welcome in this lecture, we are going to be styling our hate HTML that we created for our
app.
So I'm inside my text editor on this is the scissors file.
So this is where we're going to define the styling for our app.
So we're going to use the IDs where we've got IDs to use.
If not, we'll use the actual elements to style the HTML.
I have added some basic styling here for the body of the actual email, 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, and the text alone is a property and I want the
text to be centered on a property called background color, and I'm giving it a hex value background
color.
If 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 white.
This color here refers to the color of the text you use for the body, not the actual, not the actual
background.
OK.
If you want the 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 I'll just add 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 saying here, this is my first choice here.
That font is now available default to that.
So most computers should have either both or either.
I did a chunk more of styling from Line eight here to Line 18 notes here I've used the ID attribute.
This idea here is derived from this idea.
Inside here we've got an ID here called Add.
That's the idea I am referring to here.
All right.
So that's the target.
And these are the properties and these are the values.
So you separate the property from the value with a colon.
OK.
So again, this is the ID I'm signing.
The background color I've given it read both are set to zero I don't want, but our color is white,
which is a color of its referring to color of the text padding.
OK, padding is the space inside the element, while margin is a space outside it.
So these are the values are specified for the padding cursor.
The cursor property basically specifies the type of cursor to be displayed when pointing on an element.
That's what that is.
I've just said pointer margin again refers to this space outside what I'm seeing here from the top.
I want, I want.
You want there to be a space thirty five 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 the class, so I'm styling that class.
This class will be added automatically with our JavaScript bomb.
I'm just preparing this styling for that beforehand.
So again, the class here is the select.
We've got the property margin, I'm saying from the top one to drop 13 pixels.
Background color.
I've said that two x color x value float means float.
Basically, if you've got it means I want the element to move to the right.
OK.
Where you have elements moving to the right, you need to also specify a clear.
So when you use float, you need to use Clare.
Clare 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, so I'm saying the space inside from the right, I wanted to move
20 pixels.
Body radius is what gives the around it corner.
So if you've got a square, the border radius kind of like makes it around a bit.
So that's why the border radius property does.
All right.
I followed a couple of more properties to this class here.
Give it a whiff of 60 pixels and a height of 20 pixels, both as tall as 32 none so that there are no
shadows or nothin on the borders.
I've added some more styling to this I.D. called wrapper, which if we go into our HTML here, we'll
see that we've got an I.D. here code wrapper, which is the main div does that you want?
I'm targeting here.
These are the styling of applied to that ID.
Again, the width of, say, the width of 450 pixels, a background color.
I've given it a hex value.
The margin of 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 two nine five 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 radius 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've added a chunk more of styling from line 43 to 57, so forth.
I'll explain 43 to 48 first.
That is the UL, which is the on ordered list which I will insert using the using JavaScript.
Basically, these are the styling, the lists, all I want.
I don't want it to have any styling on the list and I've said that text aligned to the left line height
is the space between each text.
OK.
And then 949 the ID code task.
So that's where we will actually input the the task we want to carry out.
So the task, Heidi, here on Line 49, giving a width of 320 pixels, a height of 30 pixels, the margin
from the left of Tony to move 17 pixels and line 54 is the H1 tag, which I've given a margin from the
top.
I said I wanted to move 30 pixels from the top.
That's what that means.
OK, so that's all our styling done.
I just save that and we can try and view 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 the styling, for this project in the next lecture, or be doing the actual JavaScript
writing JavaScript code that will make all this work.
Thanks for watching.
Bye for that.