Hello everyone and welcome back.
In today's video we will learn about different ways we can style on extremist elements using C Ss.
So let us begin.
There are three ways you can add styles to the exterior elements which are inline CSX internal CSX and
external scissors.
Let's try it out first one which is in line scissors.
So this is when you are a style property to the extreme element.
So let's write an example.
So let's bring about good editor.
So this is the demo document that you've got.
Let's try adding some in length standards.
So let's say it's going to be ordered just by using the style of property.
So style.
Let's give it a within height C with 100 percent on height or do let's say that it's as you can see
now that I just didn't rid of the screen but there is a little margin in the body so let's remove that.
So again let's use in line styles.
So style on margins say 0.
Let's save it.
And as you can see that margin is gone now.
All right let's item signs for this heading.
See starting form size say 48 pixels let's say it.
Let's bring it in the center.
So text align center.
David now you can see text in the center similarly let's add some sites for these paragraphs so style.
C font size same 24 pixels.
Let's save it.
Let's give it a line height say one point for let's say a on text line.
Let's bring everything to the center.
Let's save it.
And as you can see no I got a graph.
Text is in the center and the font is a bit bigger with the line height a bit bigger.
Other do more.
All right let's have some more stylings.
So let's just copy the study for the next paragraph as well.
Let's see that here.
And as you can see both of our graphs have the same styling let's add a bit of spotting on both inside.
So I mean my cue let's give it a parting sea bottom left 32 pixels.
Let's save it.
Let's give it a bottom right.
Say 32 pixels
let's add this fighting to the next paragraph as well let's say with so as you can see now the are some
custom styles and change of on size 9 height alignment et cetera et cetera.
Don't worry even if you don't know about these properties at the moment we will be gathering all of
this in the coming videos.
The purpose of this video was to show you different ways we can add sites to each demon element.
So the first one was in nine states on Dragon land science.
We just use this same property on the final stage here.
So the next method is internal sciences.
So this is when we use the style element inside the hashtag of which team beach.
So let's of the statement here.
It requires a clothing dog as well.
Now we can move our sights here.
So this would be internal status.
Okay.
So we've got some sites for the image so let's remove these from here.
Do move it up there.
We need a selector for that image.
So it's demoed provides I.D. and class for that purpose.
So we use I.D. for uniquely identifying extreme elements.
So this is just one element so we just use I.D. here say galloping and to use a glass views dark and
class names so in our case which is color make let's face the states who let's say it okay so the states
aren't looking so the problem is we've added I.D. here but we've used the glass selector to use I use
hash so let's say that and not as you can see on images back to normal.
Similarly you've added some science for this headache.
So let's just remove these from here.
Let's give it an identifier so let's say containing
coming up here because this is an I.D. So hash
on let's face those lines here.
Let's say that now we've got both the fact that a graphs.
So as I mentioned earlier there are two ways to select each team element.
One was I.D. and another was plus.
So we use glass when you want to add the same style to multiple extreme elements.
So in our case both the four paragraphs have the same style.
So we can use glass you select all this.
Let's give it a glass.
Say
country description let's save it.
And as you can see the states have one.
So to use glasses we use dark colored by last name.
So dark and then the plus name was country description let's face the science.
Let's save it.
And as you can see the Stones are back
similarly.
The other paragraph if you just remove these stains from view if you save it.
So as you can see the states are gone.
But now I've seen signs that we added to the above paragraph you can just use plus the last name was
country description.
Let's say that and as you can see all states are back.
So this is how we are in the United States.
So we are all are CSF inside this state element in extreme heat down now moving on to the third method
which is external statements.
So for that we need to create a new finds and we will do that so Explorer file index doctor.
So these see as a science have extension dots yes yes.
So let's create this new file.
Now if you see here these are all the states that we've used for the beach.
So just cut all these states from Europe and based it you.
All right.
Let's save it.
Let's remove this empty state element let's see what so coming back here.
And now as you can see all the states are gone.
They may just be going to the next islands.
Everything is gone waste like so we did create a new.
Yes that's fine.
But we did not link it to that extreme beach.
So for that so delaying external finance means the link element.
So let's adopt.
So this is a sense using other means we don't need a global dog you know it requires a property to define
the location of next a most vital.
So it's left on because this is the local finance so we be using the relative but so forward slash.
And as you can see with brother and Nick's I see as a slight.
So let's send it back now.
Thank you guys.
Another property good value in relation to this property is used to define the relationship between
this you know document and text a file in our case it is time sheet.
So let's write that but saved some houses also required a file type suit.
For now let's just add it.
So type text slash uses.
Let's save it.
Let's bring it up here.
As you can see both sides are back so that's how you got external to see those files.
Do you know each All right.
Now let's say you have a defined status what an age gender element using all three methods.
So the question arises which style will be used.
So in that case the priority goes something like this in line status.
Well what I am doing those statements internal.
Over right next to an old style.
Let's write an example to understand this better so let's just bring this up here so if you see this
country name this heading has a font size of 48 pixels and next alignment of center so if we use the
same I mean and adding more styles internally.
So let's create a style element here
and let's use that idea here.
So let's say font size the 60 pixels.
Let's say that as you can see the font size is bigger.
Or let's say you want a smaller size say 20.
Let's save it on as you can see it's just bigger.
But still if you look at your next item find the font size is what you want internally on the page.
We have you in the font size that's 20.
So this 20 overrides the 48.
Similarly as I mention the inland stands all right then Donald states.
So this is the country name heading.
So let's add some states.
Let's say you want a bigger font size so font size the police sticks pixels.
Let's save it.
And as you can see the font size increased by heading so let's compare.
So next only five the I just want you pixels for they internal assessment but the font size adds to
the pixels.
But for the nine states we've got the fun saves us 36 pixels.
So as you can see the line stylistic the priority over.
But the other options now another thing to remember say you are the more science for the same plus.
So you can do description and use the same property and you update developments in sort of center.
Now you see that if you say it you can see all your description is left alone.
So even the sequence matters.
So what they will sign is that you've defined the last is what is going to be Linda on next you know
beach that's all for today guys.
If there's something that you do not understand will you drop a comment and we will discuss it see you
in the next video by anti-gay.