In this video.
Let's get started with the CSS file.
In the previous video, we did the inline style.
So what is the CSS file?
It simply means that you are going to have some separation of content.
We are going to create a file for the CSS and then we are going to require it in any component that
we want to use the style.
So this way we left.
So maybe thinking that, okay, where should we put the CSS?
So this is how we structure at project is based on the preferences.
So if you open a component for the component, we have one folder which is called the CSS in React component
or folder and we have one file so inside that we can create it's a CSS file in the same folder where
we have the component.
So CSS in react dot CSS.
Is that so for this?
Let's make use of the same syntax we use.
So for example, so let's get back to the component here.
So because of that, this one I'm going to or we can remove this one or become in copy and paste.
So let me copy and paste it here and let me name this one as in line so that it will be different from
what you are going to talk about as that we name the component.
Okay, you can remove it by font, make reference the future, you have access to that.
So now let's start with the CSS in React.
All right.
So now let's remove the inline styling from here from all the elements that I apply this.
Yes, wait.
Remove that and now remove that.
All right, so let's save it now.
Let's see.
All right, now it's back to normal.
So how can we use the case file externally?
Well, here comes.
We need to give a class name to the element that you want to style.
And we have a special attribute for any element or react element, as we did for the style.
Apart from style, you to have a special attribute for any element called class name as that.
So you see that we have is common case in in normal CSS because of class or HTML is class, right.
But react is called class name as that and it's equal to and we can give this one a class name of my
Dave.
As.
Container.
And now they might.
My title here, too.
Let's give it a class name of, say, header.
Here the title.
And now my p are.
So let me give it a class name of C description for short.
Okay, so now let's target the container to come back to my CSS file here because a class name begins
of Dot VERRASTRO, you can also use an ID.
Let's say ID is equal to something like the value here.
Okay.
So here inside that we can write any valid CSS here, you don't need to use the common case because
are not going to write CSS in React.
So we are going to stick to our normal CSS syntax.
So let's say that let's get the background color of say red for the meantime.
So coming back now, I have my CSS file and this component, they are not related, they are independent.
So to be able to use this CSS file here, we can use this file in any of my component.
So here I want to use this particular case file inside my CSS add component.
So if I save this one better so you don't have the color being applied because again, this component
and the case file, they are independent.
So to get to use that one, you need to require the CSS.
And if I'm going to do an import, no name and then code reference where we have the CSS, make sure
you add dot CSS the extensions when I save this one.
And now let's refresh it and let's see the magic that you are going to get and indeed it has been applied.
I can also target my header title here and now the header title and let's give it a color of, say,
a blue or white.
And now I have it.
I can increase the font size of, let's say 80 pixels as before, and now we have it as that.
So that's pretty much of how we can use CSS with React.
All right.
So let's talk about the cons and pros for this one, too.
As you can see, this one, the columns is that unless you write the class names by yourself.
Right.
And the most advantageous part is that we have four is called separation of consent and we can really
use this particular style in any of my component I want to use.
For example, if I want to use this inside my app, our thing to do is that I need to require the file
as before.
You require the CSS file and I'm good to go.
So guys, that's how you use cases in React.