Hello and welcome to this lecture in this lecture we will be creating the presentation which is the
SS for our app.
Before we start to apply the CSF our app let's have a look what it looks like at the moment.
So open up your project.
This is my project directory and click on this index which is what we created before double and a tool
display what the app looks like.
So this is what the app currently looks like.
There is no functionality because I've not applied the javascript yet JavaScript has not been implemented.
This is the structure.
So once we apply this ESFs it should look a lot prettier than it is at the moment.
All right.
This is R blank CSF file.
So what I'm gonna do.
I've already written out the C Ss for this app project to save time so you then have to watch me type.
I will paste the code inside a text editor and then explain the code to you a thing that helps Dowd
make more sense to you.
Then you watch me type so I paste the coding.
Okay.
I have now got my CSX added on.
So let me run through the code with you.
So the first line one here I got the body so we'll see it says you can start using the tag name or I.D.
or class.
Anyway you see the hash tag here.
That means it's an I.D. so I'm using the I.D. to style that element.
So every CSX malls have this format.
So you've got the tool.
This is what we are going to style which is a body and we'll place it in between this curly braces Darcy
opening that's closing.
And after we've ident we've defined the style we need to end that with a semicolon.
All right.
So this is a property we want.
This is a property we want to apply.
And this is the value we're giving that properties.
So we separate the property from the value using a colon and then we end it using a semi colon.
So here what I'm saying here is that I want the background for the body the background color to be this
color.
This is an hexadecimal value it's called hex value.
Anyway you see the hash with numbers like this is called a hex values or you can use.
I could replace this and just type in the word red so you could add I use color names if you know the
color names or you can use a hex value if you know the hex value so that's it for the body of a plus
giving it this color.
Next is the input the input is the actual box.
Are people typing this here is the input here.
This here that's the input.
So what.
That's what I'm styling here.
The margin from the top.
I wanted to be 100 pixels.
If you look at it at the moment it's it's kind of like joint today so I'm saying that from the top I
want it to move down certain level of pixels.
I say the margin from the top.
I want you to move a hundred pixels from the top from the left.
I want you to move to 20 pixels.
These values you can play around with.
So these are just my values so please feel free to experiment and change the values is really cool to
do.
So you can see how it works.
And then the width here how wide the box will be.
I've given it three fifty pixels all this I've got to semicolon here.
That would not work.
So again the height of given a height and display I want it to be in blocks.
That is the way it gonna be display as a block.
So everything in blue.
Here are the properties I want to I want.
I have defined purple are the values for the property and you separate the property from the value with
the call on here.
OK.
So again the same thing with the output.
This is an output.
This is where the actual length of the word typed into this box will be displayed.
Similar thing Marjane from the top I wanted to drop down 45 pixels from the top the with hundred pixels
with is how wide would be the background is like green margin less from the left 400 pixels.
And this is the button which is this button here.
All right.
So the button the width given that the height and given and that this is a color which refers to the
color of the text inside the button.
This is a background color.
I've given it blue here.
I've not used hex colors here.
I've used the actual color name border style.
I've said none without the border style.
Without this there will be shadows you can see is there will be there are some shadows around so the
bottom style will remove any shadow on the button that's what that does.
OK.
And then we've got border radios is what will make it round it.
So at the moment the button looks like a square.
The border regions will make it round it makes the edges rounded.
That's what border radius does.
And again these values play around with it.
I've used 15 pixels here.
You don't have to use 15.
Just try different values and see which one you like best.
Again inside this button idea here the margin from the top.
I wanted to drop a hundred pixels margin from the left.
I wanted to move from the left.
Three hundred and eighty five pixels again.
These values play around with them apply on values and see how it looks.
So that's the end of that one.
Then this head in tag here the hate phone tag which is this text here type a word does he hate on tag
here.
So this is the styling I've applied I want the text to be centered.
So this text align property centered the color.
This is a color which is black.
It's a hex value for black.
The margin from the top.
I wanted to move 50 pixels from the top.
So let me save that.
Save it.
Go back to the document refresh.
And this is what it looks like.
You can see it looks much better where the styling applied.
So in this lecture we have applied styling or presentation to how our app there is no functionality
because we have not applied any javascript yet.
So if I type in something nothing will work.
So if I say
typing hello and click that.
Nothing will happen because I have not implemented the java script which will be responsible for the
function.
That's it for now.
Thank you.
Bye for now.