Best way to implement css

Question

In some parts of my code I need to use the same css for some elements, but it is repetitive and the same code is used several times, and it looks meshy in html it looks something like this.

<p style="color: red; height: 50%;">orange</p>

<p style="color: red; height: 50%;">apple</p>

It is the same code repeated several times, so I would like to know the best way to implement a css, which is easier and more understandable.

const ItemPage = () => {
    const item = ({name}) => <p style={{
        color: 'red',
        height: '50%'
    }}>{name}</p>;

    return(
        <div>
            <item name='orange'/>
            <item name='apple'/>
        </div>
    )
}

Answer 1

I think the best way to use css more efficiently is to create a separate file and then use it wherever you want to use it instead of repeating the code over and over again

Answer 2

I would suggest you create a new CSS file

Write this in the CSS file if you want to style all <p> tags.

Example:

p {
color: red; 
height: 50%;
}

If you want to just style those two <p> tags implement a class and name it whatever you want and add it to your <p> tag.

Example:

.style-p {
color: red; 
height: 50%;
}

<p className="style-p">apple</p>

Then you just import the file to your current .js file

Answer 3

I would suggest doing the same as the previous answer, but if you're looking for example to make all paragraphs center aligned add this code to your HTML File:

<style>
    p {
    text-align: center;
    }
</style>

And that will make all paragraphs center aligned. Best Of Luck