Lesson 8 - Styling In React

8.2 - CSS Stylesheets

React also allows you to create separate CSS stylesheets, helpful when multiple components of your application share similar styling. You don't need to use camelCase in this case as the CSS properties are in a separate file.

With CSS stylesheets, Changes made in one stylesheet can update the design across the entire application. This approach ensures consistency and keeps your code neat and organized.

For example, we created a CSS stylesheet my_styles.css with the following styles:

p {
    color: blue;
   }
h1 {
    font-style: italic;  
}

You can now directly import the CSS stylesheet as follows:

import React  from 'react';
import './my_styles.css';

function App() {
 return (
 <>
 <h1>This is a Heading</h1>
 <p>This is a text</p>
 </>
 );
}