text: Add style to components in React JS day#3
  Hello, guys welcome back today. In the previous article, we see components in react. In this, we going to see how to add styles to components.
  Add styles to components
  It very simple to add style to components. Let’s see the steps to add styles to react components.
  - Create the CSS file and write CSS code on it.
  - Import the CSS file in the component that you want to apply styles.
  Let’s understand with an example.
  Now create a style for our header component. We not going to cover and explain the style because I assume that you are good enough to understand CSS and don’t want to waste time on that. So in the upcoming tutorial, I simply insert the CSS code for each component.
  Add the following style in the Header.css file.
  Header.css
  .header { text-align: center; margin: 0; display: flex; justify-content: center; height: 10vh; align-items: center; background-color: white; border:1px solid #3bff41; border-radius: 10px; } .header p { font-size: 2rem; text-align: center; margin: 0; }
  We completed step 1.
  The next step is to import the style into the corresponding component.
  Import the style simply use the import keyword.
  Header.js
  import React from "react"; import "./Header.css"; class Player extends React.Component { render() { return( <div className='header'> <p> RPS Battle</p> </div> ); } } export default Header;
  Adding style to App component
  Now let’s add style to the App component as follow.
  Add these styles to the App.css file.
  App.css
  body { background-color: #3bff41; border: 10px solid white; border-radius: 34px; height: 90vh; width: 80vw; margin: auto; margin-top: 15px; } #title { display: flex; align-items: center; justify-content: center; background-color: white; } #title span { font-size: 1.9rem; font-family: 'Lobster', cursive; } @media (max-width:652px) { body { border:15px solid white; } }
  Now import the style in the App.js file.
  App.js
  import React from 'react'; import './App.css'; import Header from "./components/Header"; class App extends React.Component { render() { return( <div> <Header/> </div> ); } }
  After importing save our code and run the program you will get the output as below.
  Conclusion
  Ok guys that’s enough for today. We learn about how to add styles to react components in this article. In the next article, we learn about the state in react.
  All the best guys for upcoming days keep learning.