Cabecera: header

Realizar en el siguiente HTML 5 declaraciones de estilo CSS que afecten al mismo elemento, el titular h1, con diferentes puntuaciones de prioridad, e indicar su puntuación como un comentario en el propio HTML:

				body {
					font-family: Verdana;
				}
				div {
					padding: 40px 40px 40px 40px;
					display: block;
					background-color: Gold;
					color: FireBrick;
				}
				#caja {
					padding: 50px 50px 50px 50px;
					display: block;
					background-color: Green;
					color: GreenYellow;
				}
				header {
					padding: 20px 20px 20px 20px;
					display: block;
					background-color: Indigo;
					color: IndianRed;
				}
				.cabecera {
					padding: 30px 30px 30px 30px;
					display: block;
					background-color: LightSeaGreen;
					color: LightSalmon;
				}
				h1 {
					padding: 10px 10px 10px 10px;
					display: block;
					background-color: LightSlateGray;
					color: LightSkyBlue;
				}
			

Los estilos se aplican con el siguiente orden:

1. BODY
2. DIV
3. #CAJA
4. HEADER
5. .CABECERA
6. H1

No porqué los haya escrito en este orden, sino que este orden lo he movido para que coincida con el que aplica el navegador siguiendo la heréncia de CSS.

Haciendo clic derecho en el "Cabecera: header" superior y seleccionar "Inspeccionar elemento" puede comprobarse, que cuando afecta al mismo elemento, el que se cargó con anterioridad tiene propiedades tachadas si el identificador o el class modifica las mismas propiedades del componente.

NOTA: El juego con los padding en cada estilo es para que se vea más exagerado que este está siendo aplicado porque al irlo reduciendo se ve cuando se solapan y cuando se sobreescriben.