Hello and welcome to this lecture in this lecture we are going to be creating the styling for our calculator
using CSX.
So we'll be using a combination of external CSX and in line CSX.
So this is what the calculator looks like.
Have a moment.
So by the time we're done with this lecture it should look a little bit prettier.
So this is my text and it all.
And this is my style sheet where we will implement the external styling for the calculator the way I'm
going to structure this lecture is to add a chunk of code at a time and then explain it to you.
OK.
I have added some code from line 1 to line 10.
So let me run through these some of these you may already know the line one here.
I've got input input.
This is known as the selector.
So you must have something that you want to do something too.
For example if you're going to have a haircut your hair will be the selector and then you have to tell
the barber what to do to the head.
So CSF works in the same way.
The input here is the selector and the items in blue here.
This on the the items on the left of the colon is known as the property.
The property is what we want to apply to the selector.
And the values outside the call on here is the VAT is what we want to have for example I want the width
which is a property of the input to be one hundred and fifty pixels wide.
OK so you separate the property from the value with a colon and then you end up with a semicolon without
a semicolon.
It will not work.
So make sure you end with a semicolon once you've finished the height.
I have set it to that the font size which is the size of the text I have set it to this the border radius
but outrageous is what gives it a bit of rounded corner.
So this is a broader border retail property and I've said it to 10 pixels.
These values.
Feel free to play around with them so that you can see how they work.
The beauty of browser development is that you can see what the result of what you're developing straight
away.
OK.
The margin of given it 10 pixels margin refers to the space outside.
So for example you've got a box.
So the space outside is known as a margin.
Why the space inside is known as padding.
So where you've got where the margin is usually Four Corners you've got the top the right the bottom
and the left.
That's how the styling is applied.
The way I remember it is by using the word trouble and then taking out the vowels which are the cause
that leaves you with Top Right Bottom Left.
So when you have just two one values specified a tool use that value on all the four corners like Top
Right Bottom Left the background call I've set it to this I have used hex color hexadecimal colors you
can also use the name of the color if you know it for example this means black.
So I could use black instead of that and then color this color here offense refers to the color of the
text.
So this is white in x values and then borders style is not I don't want any shadow anything on the borders.
So this is a styling for the input.
The input basically is the Yeah.
This is the styling for the input tech have added some more CODE HERE FROM line 12 to 24.
Line twelve here.
I've got my I've got an idea here.
You identify an I.D. with the hash tag so I.D. Here is my form.
So they form here.
These are the styling I have applied to it.
I don't need that.
This is just a comment.
So if you want to write a comment on a on a CSF page.
This is how you implement a comment.
So anything that you've got to comment on will not reflect on the styling.
OK.
So comments are quite good.
You can use them for troubleshooting or trying things out.
So this idea here this is the styling I'm giving to the I.D. I want the margin from I want the margin
on the left to be two hundred and twenty five pixels.
So what I'm saying is that from the left of the book from the left I wanted to move two hundred and
twenty five pixels and then from the top I wanted to drop down twenty pixels.
That's what that means.
And then this here is the styling for the h1 tag which is the head in tag.
Again the text a line one the text to be centered.
I've given it a font size of 80 pixels.
That's how big I want it to be.
And the margin of said from the right.
I want it to move feet 150 pixels and from the top I want you to drop 20 pixels.
So let's save that and see what it all looks like at the moment.
So this is our calculator.
If I refresh this is what you can see is looking a little bit prettier.
OK.
So this is what it looks like at the moment where the styling we have you next we are going to use some
inline styling.
That means we're going to go inside the hasty AML document and apply the styling in line with the actual
tag.
OK.
So I am on the actual history AML document which is the index hit hate e-mail here and on line 17 which
is the actual input for the display which is the screen that will display the results of the calculator
have attached form into in line styling.
So this is inside the actual tag itself.
I have added a style tag so you begin will you use the style as an attribute.
So the actual style becomes an attribute and the value would be the become the property and the values
for that input tag.
So this input tank here I've given it a whiff of six seven five pixels have given a height of that the
text aligned to be centered.
That means any text that is that it displays.
I want it to be centered I've given a background color of this and this break Tokyo basically creates
a space underneath it.
So if I save that and refresh you should see the display should be blue.
Now you can see here who is now blue.
So this is what we have just applied styling to
I have added some more in line styling inside the HMO document.
So on line 21 here I want the buttons for the operators.
That means the plus the minus the equals the Times and the division.
I want them to all have different colors so that's the styling I have implemented.
Line 21 here.
Notice I've used that style here as an attribute and then the value of course to the properties the
property.
I want a style and then the value for the property.
So the background color here basically set the background color for the plus I've said the background
color on line 25 for the miners and on line twenty nine for the Times on line thirty one for the C which
is a clear function.
Now we clear the screen and on line 33 for the divisions.
I've said that green so I'll save that and if I launch the browser you should see the difference.
There you go.
So you can see all the operators have different background colors.
I so I've made the C here and given a different background.
So this is what we'll clear.
You can use to clear the values.
So if I press on the button you can see nothing is happening at the moment.
The javascript will create the functionality for that.
So for this lecture we have done the styling of the calculator ready in the next lecture will implement
the javascript to make the buttons actually work and perform some calculation.
Take care bye for now.