All language subtitles for 5. Scoped CSS Files3

All right.

Let's start to add in some sea assets to limit the width of this card.

Now we've already seen once the ISIS file inside of our code editor that was inside the S.R. sea directory

we saw the styles Nazi SS file and we read that comment at the top.

It said something like you can add global styles to this file.

The term here global styles means that we should add sea assets inside of here that we want to be applied

to our entire project.

Like every last single element inside of our project right now we are trying to add in some styling

that's going to affect specifically this card thing that we are displaying so we're not really trying

to add in some global styling right now.

Instead we want to affect one element that is created inside of specifically that app component.

Each team will file but turns out that with angular we really have two different types of CFS files

to different places to put any custom CSX we want to write the quick diagram to explain these two different

types of files now in the left hand side.

I'm showing some kind of imaginary application when this imaginary application.

You can kind of picture that maybe there are different parts of the screen that have some different

content inside them.

Everything inside this gray box right here might be created with some H smell coming out of the app

component HDL file and then maybe all these other regions are created by some other thing.

In this case I'm calling it a component.

We'll discuss exactly what a component means in just a moment but we're essentially saying here these

other boxes are being created by something other than the app component.

Each team will file now inside of our project.

If we flip back over really quickly and open up your app directory you'll notice inside there there

is a app component dots ISIS file so what is that other file about.

Well these styles don't see SS file just like we saw inside that comment contains CSX that is going

to apply to every last element inside of our application.

So for example if we want to style every single button element every div every table every each one

you would add that styling to styles Nazi SS and so anything we put inside there would affect content

in that area.

And over here and over down in here and so on you get the idea if we ever want to style anything that

is created by some specific HMO file like our app component HMO file we are always going to place that's

the SS inside of the similarly named CSX file.

So because we want to style some HCM El that was created by app component dot HCM El we're going to

place the styling for that in app components.

SS Now it might seem like this is just like an organization thing like Hey in order to manage CSX on

large projects let's just come in a pair are CSX files with the H team l let's not quite it.

You see angular has a little bit of magic built into it as you're going to see very quickly it turns

out that any CSX we put inside this out component dots the SS file can only affect the styling of elements

that were created inside of app component H2 UML.

In other words we can not possibly in any way shape or form right.

Any styling inside of this file that would affect any elements created by other things inside of our

application.

So in other words app component C Ss can not contain styling affecting these other regions.

Now this is 100 percent contrary to how normal CSX works in the browser.

Remember CSX stands for a cascading style sheet essentially means that any styling we write is going

to affect all the elements throughout our application.

The angular has a little bit of trickery and like I said a little bit of magic to make sure that CSX

that gets placed inside of here only affects content created by its accompanying H2 mail file.

Now that I've given you a exhaustive verbal description let's actually test all this stuff out.

It's going to go back over to my editor and I'm going to find that app components ISIS file again that

is inside the app directory inside of here.

We can only affect elements created inside of app component each team out.

Let me prove that to you inside of app components.

Yes.

I'm going to try to style the body element on the body element.

I'm going to try to apply a border of 10 picks solid red and I'll even put importance on tier on here

just to make sure like 100 percent we are really trying to add that styling in I'm going to save this

file.

I'll then look back over my application.

We're going to see.

There is no border whatsoever visible inside of here.

No border around the outside edge.

If we open up our element inspected and click on elements you can find the body element right there

and click it and you're going to see inside the styling panel.

There is no reference whatsoever to that rule that we just added in.

So again total magic on the part of angular it is not going to let you affect any element outside of

elements that are created by the app component HDL file so now with that mind going to delete that rule.

We're going to try to add in the actual CSI as we need to limit the width of that card element back

inside of app card H.M..

You'll notice that the top element right here has a class of card.

Let's try to just write a selector that's going to get that element right there and then apply a width

property to it or with real excuse me working with the SS now inside of app components.

Yes yes I'll do Dot card.

I'll say width of 350 pix but now this is going to try to find some element inside of our accompanying

H.M. file.

It's going to find that thing right there and apply the width rule to it going to save but these files

look back over now I'll see that my card is of a very reasonable size down to 350 pixels and you'll

notice that I'm at 100 percent zoom right now.

So you should see something very similar on your screen as well OK.

That's the basics of CFS files in angular.

Remember we've got these two different types of CFS files.

One is can have global styles.

One is gonna have stuff specific for our different components.

Now we've got all the stunning fixed up.

Well let's continue with their application in just a moment.