CSS External Styling in React

• Create Components folder under src folder
• Add CSSExternalCss.js file and add below Code

import React, { Component } from "react";

import "./CSSExternalCss.css";

class CSSExternalCss extends Component {

render() {

return (

<div>

CSS external Styling<br />

Styling React components with CSS stylesheets

<div className="mycss">Style!</div>

<h5>Style!</h5>

</div>

);

}

}

export default CSSExternalCss;

• Add CSSExternalCss.css file and add below Code

h5 {

background-color: rebeccapurple;

height: 50px;

font-size: 20px;

}

.mycss {

background-color: red;

height: 30px;

font-size: 30px;

}

• Open index.js file and update code as below

import React from "react";

import ReactDOM from "react-dom";

import CSSExternalCss from "./component/CSSExternalCss";

import "./styles.css";

function App() {

return (

<div className="App">

<CSSExternalCss />

</div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Output: