Si tienes ya conocimiento de las declaraciones de CSS, este tuto te sera aburrido e irrelevante, te aconsejo te prepares unos Naños de carne asada que son deliciosos.  Pero si tienes poco conocimiento o nada, y deseas aprender algo hoy, entonces quedate, lo intentare hacer lo mas sencillo y fácil posible.

Iniciemos por saber que es el css, como lo definen en Maestros de la Web

Hoy vamos ver un poquito de las diferentes declaraciones en la hoja de estilo a la hora de agregar el css.

Las hojas de estilo se diferencian por una declaración.

h1 { color: #36c;}

h1 { font-weight: normal;}

h1 {letter-spacing: 04em;}

h1 {text-align: center;}

h1 {text-transform: lowercase;}

Pero imagina lo cargado que seria el código si tuviésemos o estariamos limitados a solo esta declaración.

Imagina como se escucharía si leyeramos nosotros estos códigos en un libro, esto le quitaria el sueño a cualquiera, no lo crees?

Vamos a ver como sonaria, "selecciona los elementos h1 y aplicales el color #36C" "selecciona otra vez los elementos h1 y aplicales un grosor de fuente normal " selecciona una vez mas los elementos h1 y asignales un espacio  entre letras de ......" y así seguiríamos, que agotador, no? 

Si este fuera el caso, madre mía, terminaría toda loca y sin querer saber nada de esto.

Imagina la sobre carga que esto ocasionaría a nuestra pagina, afortunadamente hay una pastillita para aliviar el malestar.

Las declaraciones múltiples para un mismo código, se pueden comprimir, con campos asignados por puntos y comas.

Veamos un simple ejemplo;

h1 {  color: #36c;

         font-weight: normal;

         letter-spacing: 04em;

         text-align: center;

         text-transform: lowercase;

}

Listo ! esto queda muchísimo mejor y alivia el estrés de sobre carga. Como vez podemos asignar varios propiedades de estilo a nuestro elemento h1.

Pero que pasa si queremos agrupas selectores

Que pasa si queremos aplicar el estilo de la regla h1 a otros elementos, como ejemplo h2 y(o) h3.

Tendríamos que seguir el anterior ejemplo, agregando el elemento correspondiente.

h1 {  color: #36c;

         font-weight: normal;

         letter-spacing: 04em;

         text-align: center;

         text-transform: lowercase;

}

h2 {  color: #36c;

         font-weight: normal;

         letter-spacing: 04em;

         text-align: center;

         text-transform: lowercase;

}

h3 {  color: #36c;

         font-weight: normal;

         letter-spacing: 04em;

         text-align: center;

         text-transform: lowercase;

}

Pero nuevamente estariamos cargando nuestra hoja de estilo, y la verdad que flojera tener que escribir lo mismo para cada elemento. Lo que queremos es mantener limpio nuestro código CSS y de no consumir tanto ancho de banda.

Si vemos las reglas de nuestros anteriores elemento comparten las mismas declaraciones, si? Bien pues lo que se puede hacer es agrupar y comprimir, te acuerdas que dijimos que "Las declaraciones múltiples para un mismo código, se pueden comprimir, con campos asignados por puntos y comas". 

vamos a asignar a nuestras tres declaraciones la misma regla, separada por comas y esto englobara TODO.

h1, h2, h3 {  color: #36c;

         font-weight: normal;

         letter-spacing: 04em;

         text-align: center;

         text-transform: lowercase;

}

Con esto haremos que todos los elementos tenga asignada las mismas declaraciones. El orden no tiene importancia.

Ahora te aconsejo que revises tu hoja de estilo y asegúrate de que los elementos que comparten las mismas declaraciones estén agrupados, esto hará mas liviana la carga de tu web.

Cuéntame en los comentarios, que te ha parecido, sabes que aprendemos de los aportes y experiencias de los demás.

Nos leemos pronto !