CSS - Two classes applying different styles [duplicate]

Question

Say I have an element on which two classes are getting applied with conflicting styles. How is the precedence of the styles chosen?

<h1 className="red blue">What color will I be?</h1>

css file:

.red {
   color: red;
}

.blue {
   color: blue;
}

Which color will be applied to the <h1> element?

I tried to experiment with it and what I have concluded is that the class that gets defined at the end of the file gets applied. But it's just an observation? Am I missing something here?

codesandbox: https://codesandbox.io/s/conflicting-classes-2jbi7

Answer 1

CSS will read from top to bottom.

So your text is blue, if you move red after blue in your CSS file, it should be red

Answer 2

The last class that is in the code will affect the h1. If they have the same specificity, the last one is the one that the h1 will be affected by.