Hello and welcome.
In this lecture we are going to create some very basic inline styling for the form we created for our
web app.
So inside our visual studio.
Make sure you've got the identity or aspect selected.
OK.
Which is this.
Here in the solution explorer and you should feel double click on and you should see it.
And then you should see the code here.
While you are in the code go to we need to activate the formatting toolbar so you get to view
and you go to toolbars.
There's an option here for toolbars and there's one for formatting.
So we need to look for the formatting.
There you go.
That on click on that and that should activate the formatting toolbar you notice here.
It has appeared here so he says this now becomes a target rule.
So we're going to switch to our design view by clicking on this design tab here so we can see what the
styling will look like in the design.
All right.
So what I'm going to do.
Why when the design of you I want to click on the first box here I just like to expand that a bit.
So I just drag it along to make it bigger.
Notice as I'm dragging the pixels is also increasing.
I'll do the same for this one and just drag it along to make it slightly bigger.
Next hour click notice the whole area here.
The div notice I've got noticed the DB they're highlighted which is the one highlighted here.
That's what we're looking at.
So the styling we're doing and we are applying it to this DB.
It did is a division on a web page.
All right.
Notice the Davis highlighted.
So while we've got it we've highlighted these are some options here.
It says New Line style.
If I click on the dropdown it's got new inline style new auto class automatic but we're not going to
focus on the default here which is the new inline style because we just want to apply some very basic
styling.
So let's just go through the options here.
Here you've got reuse existence style sure overlay.
And he has got dropdown gives you paragraphs and so I'm gonna skip that and yeah he's got different
font size so the font size here is the default has been used.
If you want to make the font size bigger we can come here and make it X X which is small small large
it in pixels is large.
Let's see what it looks like.
Large.
Okay.
Does the default.
Sorry.
That is large.
So we live it at large and see what happens.
So we're just doing some basic formatting here and CSX.
Next we'll go to.
We can make it board if we wish.
So this tabs here they just like in the Word document.
So really simple.
So next I don't want anything on the line here we've got foreground color is the color of the actual
text.
I'll leave it for that color the moment here.
The background color.
Notice the styling I'm applying this style into the deep notice that Davis highlighted there and that's
it.
So I'll go for the background color.
Our click on this for the background and then it gives me color thing.
So I just need to select a color.
I would like so that's I like that color.
So I just click OK and notice it as I apply the color to the div.
All right.
So the div is actually the form itself.
So we've got that covered next.
I want to target this button here.
The clicked me button actually before I do that I want to make this a bit.
Well no it doesn't.
Okay.
I was trying to make it a bit wider actually.
Let me see if I can bring that down a bit.
Okay.
I'll leave that as it is.
Next I'm going to target notice I'm just we're just trying to apply some basic styling and formatting
it doesn't have to be perfect.
We're just trying to find out where things are and how to apply them.
That's basically what this exercise is about we don't have to make things perfect.
Next thing I want to do I want to change this button here.
I want to make you red and I also want to make the text inside White.
All right.
So I click on the button just drag down to make it a bit bigger and drag along to make it wider.
All right.
So one needs to do not why the button is clicked ahead of are here to the properties for the button.
Notice why the button is clicked.
I can come here and change the background color where's go foreground color foreground clothes different
from background color foreground refers to the foreground and background paper.
So I click on the background one here which is this.
And I won't make it red click Okay.
And notice it has now applied the red color to the button but the text is black.
I want to make the text black so we go over here and go to the foreground color which is gonna be the
text so we're going to use white OK.
Notice this is a current color showing.
Click white notice now the text is now showing as white.
So that's all we can do for now.
I just wanted to show you just some basic styling so why we've got that.
I will go if I go back into my source code you see that the styling and the formatting we've done has
been added to the code so let's click on source.
There you go.
So on that the form here we've got div style limits inside the DB is applied an inline styling which
is this one here is giving it that font size of large background color is giving it to this color.
All right.
And in the button notice is given the button a height here a scroll and giving it a style color and
a background color.
OK.
So it's actually inserted the styling.
We applied in line with the HMO element and the ESB.
So that's this organ is going to save.
Notice all these yellow strips here means I have got code that I have not saved.
I'm just going to click save and they should all turn green.
OK.
So they both turn green now.
I'm going to do is execute the code again so we can see the changes we have made.
So I click on the Google Chrome here.
If you don't see Google Chrome it will display whatever web browser is your default click.
So it's currently building the project at issue launched the local server to display the project so
soon issued display.
All right.
So it's a display so this is just the basic styling we've applied.
So let's try and typing something there first name last name and click.
You can.
This is hello.
Rick Williams.
So the code is to working as designed.
We just applied some basic styling to the D.
Notice the styling has not extended to the rest of the page.
It's only applied to the div I wanted the whole page to be this color.
I would have applied the styling of the background color to the body and not to Dave.
That's the difference.
The styling was applied to the div.
That's it for this lecture in this lecture we styled and formatted the web form we created earlier.
Thanks for watching.
I hope it's been useful.
Bye for now.