Type of CSS in React:

1. Inline CSS

2. Global CSS

3. Module CSS

Inline CSS:

• it is a type of css where we will be applying for individual inside one particular tag using "style" attribute.

• the css properties should be written inside an expression in the form of "Object".

ex:

Style.jsx:

const Style=()=>{
    return(
        <div>
            <h1 style={{background:"react",color:"white"}}>
            Inline CSS </h1>
        </div>
)}
export default Style

Global CSS:

• it is a type of css where we will be maintaining one CSS file for entire react project

• it will target all the components.

• we have to create a separate file inside src with an extension of ".css" and write all the styles.

eg:

App.jsx:

import Child from './component/Child';
import "./component/global.css";

function App() {
  return (
    <div className="App">
      <Child/>
    </div>
  );
}

export default App;

Child.jsx:

import React from 'react'

const Child = () => {
  return (
    <div>
        <h1>This is Global Css</h1>
    </div>
  )
}

export default Child

global.css:

h1{
    background-color: red;
}

Module CSS:

• in react this css is the most used type of css.

• we will be creating a separate css file for each component.

• the respective style required for the particular component will be written in the respective CSS file.

• Whenever we are using module css we have to create CSS file with an extension "module.css".

eg:

Spotify.jsx:

import design from "./style.module.css"
const Spotify=()=>{
    return(
        <div id={design.nav}>
            <h1>Hello module CSS</h1>
        </div>
)}
export default Spotify

Style.module.css:

#nav>h1{
    background:blue;
}