Hello and welcome.
In this video I'm going to position and style our page title already applied some basic styling already
pumped is going to add more to enhance the page title.
So this is a page title at the moment.
It just says hello world.
And this is a stylin.
I've already applied to it's got a font size of six to five pixels and line the text to the centre.
So I'm going to add margene and more so going to add some padding.
And when I give it a colour and I'm also going to apply teks Shadow propertys.
So you may notice there's a gap here at the top of the body from the page title.
Basically this happens because the Web browser applies its default styling to the one element it is
also not just at 81 and the minute it does that all the elements as well.
So even when you haven't applied any thesis at all there is some basic default CNS that web browser
applies.
So that's why it's important to add your own success to override that.
So let's get rid of this gap here.
Other top to do that.
I'm going to set the margin to zero.
So inside my head each one element here I'm going to type in margin which is this here and I'm going
to send that to zero and that should get you can see here it's got rid of that space the massive space
at the top the body element it's got rid of that.
So that's what that does next and I'm going to do is apply padding so padian refers to the space inside
the elemental content.
So our typing pad in and I'm going to give it two values going to make it 20 pixels and zero.
So when the padian has two values the first value is applied to the top and the bottom then and the
second value is applying to the left and the right side padding 220 pixels will go to the top and bottom.
Why is there were two left and right the next and I wanted to give my title I want to give it a call
unicol.
So colour is different from background colour background colour.
It's this one here applies to the background so Quello if you want to change the colour of the text
you the property is this colour.
So I'm typing colour and high one and make this.
Let's look at the colours they have here.
I want something sky blue something deep sky blue right.
I like this once I make it deep skyblue you can see there that's the deep skyblue just going to see
that.
Okay.
One good thing about this Ed is that as you make changes it reflects straightaway in the web browser
will do doesn't actually save it on to you save it but it can enable you to see the impact of your success
immediately.
The next property I want to add is called Text shadow.
What that does.
It applies a text shadel to the text content of the element.
It basically has four values.
So to haddi Text the property just type in text.
That's shadow.
And I'll give it the values I make is three pixels three pixels one pixel and give it a black colour.
So you can see the fact that the effect of the total shadow you can see here how it impacts on the title.
So let me go through the values with the first pixel value which is this one here.
The first three Pixel the first picks of value sets the horizontal offset of the shadow from the text.
Basically it indicates how far it moves across a negative value should move it to the left.
Now the second pixel value which is the second three pixel here is used to set the vertical offset of
the shadow from the text.
How determines how far it moves down.
In the example I've given a negative value we'll move it up the third peaks of value which is one pixel
is used to set the radius of the shadow.
All right give it a kanimbla a bigger value we mean it gives it a more blurry shadow and then the fault
here which is black which is a colour.
It says the bees call for the shadow.
You can see the core is said to be black.
But you can set it to anything so that's basically the values for this teks shadel property.
You can try experimenting yourself with different values to see just to see what you come up with.
It's always good to try and play around with different values and see what takes your fancy.
So in this video I played around with some Seer says for our page title and I applied some extra Seer's
as properties like texture.
I give its colour property applied padding and also some margin sit for this.
Who do you think you for watching and by phone.