Jerarquía de Estilos en CSS

[Ivano93]

¡Buena noche a todos, explorers!
Para quienes tenían curiosidad acerca de cómo se van sobrescribiendo los estilos al declararlos en CSS, van así (mayor a menor importancia):

1. !important tag
   .first-class { color: pink !important; }
2. inline styles (declaración del estilo directo en el bloque de HTML)
   <h1 style="color: red;"> Hello World! </h1>
3. Id tags
   #id-tag{ color: orange; }
4. clases (clases subsecuentes sobrescriben clases previas)
   .first-class { color: pink; }
.second-class { color: blue; }
5. Estilos generales de bloque (tipo body, h1, etc.)
   body { color: green; }

Por ejemplo, si tuviéramos todos estos estilos juntos:

La salida del texto sería en color ROSA, por la declaración del !important tag en la clase ".first-class":

Espero les sea de ayuda.
Saludos,

H. Iván Hdz.

Referencias: Larson, Q. (s.f.). freeCodeCamp. Obtenido de Responsive Web Design, Basic CSS:
https://www.freecodecamp.org/learn/responsive-web-design/#basic-css

[JuanSalvador73]

Gracias por la info.