In this video we are going to learn about CSS Files.
Lets see how can we add css in React.
So, Switch to the project.
In previous video we have created this form.
Now lets add css for this form and make form look and feel better.
For that just create a new file inside the component.
Lets say file name is AddEmplyee.css.
Alright, Now add this css file to the AddEmployee Component.
So just open AddEmployee Component and here just write.

import './AddEmployee.css'; 

Now add the className to the form.
So in the AddEmployee component here just write.

<form className=\"empform\"> 

Now write the css for this class.
So go to the AddEmployee.css file and here just write the following css.

.empform{ 
    border-radius: 5px; 
    background-color: #f2f2f2; 
    padding: 20px; 
    width: 400px; 
    margin: 10px auto; 
}

Now save the file and Lets check so go to browser.
You can see the css has been applied on form.
Now add some css for the input field and submit button.
So go to the addemployee.css and here just write.

input[type=text], 
input[type=email], 
select { 
    width: 100%; 
    padding: 12px 20px; 
    margin: 8px 0; 
    display: inline-block; 
    border: 1px solid #ccc; 
    border-radius: 4px; 
    box-sizing: border-box; 
}

Now add css for the submit button.

button[type=submit] { 
    width: 100%; 
    background-color: #4CAF50; 
    color: white; 
    padding: 14px 20px; 
    margin: 8px 0; 
    border: none; 
    border-radius: 4px; 
    cursor: pointer; 
}
button[type=submit]:hover { 
    background-color: #45a049; 
}

Now save the file and lets check.
You can see the the form, input text and email and also the submit button all looks are now changed.
Now add css for the employe list so.
In addEmployee.css Just write.

.empitem { 
    background: #f2f2f2; 
    padding: 20px; 
    max-width: 400px; 
    margin: 20px auto; 
    border-bottom: 2px solid #bbb; 
}

Now add this class to the employee list div so go to the Employees component and here add ClassName = \"empitem\".
Now save the file and lets see the result.
You can see here the employee list css has been applied on it.
So in this way you can use css with component in react.