Métodos Avanzados / Redefiniendo Encabezamiento

Redefiniendo encabezamientos
Redefining the <h1>,..., <h6> Tags

Ahora observemos un ejemplo de como podemos re-definir los 6 estándares de etiquetas de encabezamiento  de HTMLcon css. (De hecho, este plantamiento es un ejemplo de como interpretar  "css", como abreviatura o lenguaje.  Vamos a demostrarte como estas etiquetas pueden redefinir utilizando páginas estilizadas en cascadas mostrándote ejemplos particulares en el  lenguaje de páginas estilizadas en cascada -css- que implementará las definiciones).  En este caso re-definiremos las 6 etiquetas pasa utilizar la letra en negrilla, en  san-serif face,y el color costomizado (rrggbb = cc3300); escogeremos 6 diferentes tamaños para cada etiqueta de encabezamiento. (Hasta donde estes cosciente de este concepto de css , incluiremos una mayor variedad en nuestras definiciones; podemos utilizar diferenctes tipos de letras, tamaños, colores,  etc. para cada  uno  de las etiquetas - <h1>,....,<h6>. Los diseñadores de gráficas pueden "temblar", si mezclamos las cosas así, pero css  nos permite hacerlo así).

He aquí  algunas instrucciones  css  que  pueden implementar en estas nuevas definiciones: 
     
h1 {font-family: Arial, Helvetica, sans-serif;      
     font-size: 24pt; font-weight: bold; color: #cc3300}     
h2 {font-family: Arial, Helvetica, sans-serif;      
     font-size: 18pt; font-weight: bold; color: #cc3300}     
h3 {font-family: Arial, Helvetica, sans-serif;      
     font-size: 16pt; font-weight: bold; color: #cc3300}     
h4 {font-family: Arial, Helvetica, sans-serif;      
     font-size: 14pt; font-weight: bold; color: #cc3300}     
h5 {font-family: Arial, Helvetica, sans-serif;      
     font-size: 12pt; font-weight: bold; color: #cc3300}     
h6 {font-family: Arial, Helvetica, sans-serif;      
     font-size: 10pt; font-weight: bold; color: #cc3300}
Luego de una pequeña inspección, puedes ver que utilizar el mismo tipo de letra ("font face or font-family) en cada caso.  También especificamos la letra en negrilla ( font-weight: bold) y el mismo color para cada encabezamiento. 

Nos referimos a las instrucciones que definen estas etiquetas como reglas css.  Cada regla consiste en un grupo de definiciones.  Una definición, consiste en 2 renglones:  el nombre de la propiedad y el valor  que le fue asignado. Estos son separados por una coma.

Por ejemplo, considera las reglas que comienzan con h1.  Esta regla  "reconfigura" la etiqueta  <h1>. Aquí una de las definiciones es font-size: 24pt, que establece el tamaño de la letra utilizado por el encabezamiento <h1> . Esta definición en  font-size  ha sido propiamente definido y 24pt es el valor definido a tener.

He aquí unas reglas en acción: Example 1. Ahora, consideremos dónde y cómo añadir estas reglas,  para que hagan lo suyo.