I have two CSS classes on one HTML element: .c-headline-1 and .c-hero__headline. In my external style sheet, I'm using .c-headline-1 and in an internal style sheet (<style type="text/css">) I'm using .hero__headline, but for some reason the .c-headline-1 property values are overwriting some of .hero__headline's property values. For example, if both have a font size declaration, .c-headline-1 is behaving as if it has higher specificity since it's overwriting .c-hero__headline's font size.
I thought internal style sheets had higher specificity than external style sheets or no?
All stylesheets are treated the same, what's important is the order in which the styles are declared. For visualization, imagine it this way: The browser takes all CSS files and combines it in one big css file (in the order that they appear in the source code). Then it should be clear why a style is getting overridden if you know how specifications in CSS work.