Las Clases en CSS y la Apariencia de Nuestro Blog
Seguramente ya has escuchado en algún tutorial para personalizar el blog algo como esto:
-Vamos a crear una clase para darle estilos a nuestras entradas-. Y sin muchos conocimientos de CSS o HTML, tal vez te preguntaste: ¿qué es una clase?
Una clase en CSS nos permite definir y asociar determinados estilos o CSS para que puedan ser aplicados a uno o varios elementos en HTML. Hacerlo así nos evita tener que repetir los estilos una y otra vez en el HTML.
Pueden aplicarse a la mayoría de las etiquetas de HTML, y se hace usando el atributo "class". Es muy común que se use en un div. Un div en HTML es simplemente un contenedor (imagina como un bloque o rectángulo) que puede "contener" cualquier otro elemento.
También puede usarse en la mayoría de etiquetas de HTML como la etiqueta <a> que sirve para crear un enlace, la etiqueta <ul> que sirve para crear una lista desordenada. La etiqueta <h2> que sirve para definir un encabezado.
Bueno, para no liarnos mucho, empecemos por una necesidad, para poder ver un ejemplo práctico:
Vamos a pensar que tenemos un blog de recetas, y que queremos destacar los apartados o encabezados que siempre se repiten, por ejemplo: Ingredientes y Preparación paso a paso. En ambos casos queremos usar el mismo encabezado, pero queremos que luzca distinto.
Para lograrlo hay dos caminos, hacerlo con HTML, y para ello tendríamos que repetir los estilos una y otra vez en la entrada, cada vez que necesitemos aplicarlo a los encabezados, o hacerlo con la ayuda de CSS.
Optando por hacerlo con CSS, lo primero que hacemos es agregar la clase, a la etiqueta del encabezado que usaríamos, que en nuestro ejemplo sería la etiqueta <h3>(*Blogger ya permite agregar encabezados fácilmente). Entonces, lo haríamos así:
h3.subencabezado {
background-color: #ACFA58;
display: block;
width: 480px;
padding: 2px 0;
text-align: center;
}
Como puedes ver, estamos definiendo la clase subencabezado en la etiqueta h3. Primero ponemos la etiqueta, y enseguida el punto "." y luego se pone el nombre para identificar a la clase.
Luego, para poner en acción a nuestra clase, y sean aplicados los estilos que hemos definido en ésta, en el HTML agregamos el atributo "class" a la etiqueta h3 y como valor ponemos el nombre de la clase que definimos en el CSS anterior, y que es "subencabezado".
<h3 class="subencabezado">Ingredientes</h3>...y el resultado se vería así:
Ingredientes
Y para "Preparación paso a paso", que en nuestro ejemplo queremos que tenga fondo naranja y el texto a la izquierda, crearíamos entonces otra clase para la etiqueta h3:
h3.subencabezado_naranja {
background-color: #FACC2E;
display: block;
width: 480px;
padding: 4px 0;
text-align: left;
text-indent: 5px;
}
Luego, para que sean aplicados los estilos que hemos definido es ésta, en el HTML agregamos el atributo "class" a la etiqueta h3 y como valor ponemos el nombre de la clase que hemos definido en el CSS anterior, y que es "subencabezado_naranja"".
<h3 class="subencabezado_naranja">Preparación paso a paso</h3>
Y el resultado se vería mas o menos así:
Preparación paso a paso
Bueno, tal vez los colores no sean los más bonitos o adecuados, tampoco que tengan alineación distinta pero, lo que quería es ilustrar lo mejor posible el ejemplo ;)
¿Cuáles son las ventajas de usar clases?
Primero, que nos ahorraremos muchas lineas de código, si se pretende usar varias veces los mismos estilos en distintos elementos, ya que no tendremos que agregarlos cada vez que lo necesitemos en el HTML. Siguiendo el ejemplo anterior, si quisiéramos dar ese estilo a Ingredientes y Preparación paso a paso, con HTML, lo tendríamos que hacerlo así:<h3 style="display: block; background-color="#ACFA58"; width:480px; padding-top: 2px 0; text-align: center;">Ingredientes</h3>
Y para el caso de Preparación paso a paso:
<h3 style="display: block; background-color="#FAAC58"; width:480px; padding-top: 4px 0; text-align: left;text-indent:5px;">Preparación paso a paso</h3>
¿Ves la diferencia?, si usamos clases, solo tenemos que escribir las propiedades solo una vez.
Además de poder dar estilos a cualquier cosa o elemento que necesitemos en nuestra plantilla, podemos usar las clases todas las veces que queramos, es decir, sin límites a diferencia del selector ID, que solo se puede usar una vez para identificar a un elemento en una página.
Un poco más sobre las clases y sus usos
También es posible usar más de una clase en un solo elemento, escribiéndolo en forma continua dejando una separación entre cada clase, ejemplo:<a class="fondo marco" href="#">Mi enlace</a>
En el ejemplo anterior estamos aplicando la clase fondo y la clase marco a la etiqueta a, que sirve para crear un enlace. En el CSS se declararían así las clases:
.fondo {/*todas las propiedades*/}
.marco {/*todas las propiedades*/}
También es muy común usar clases dentro de las listas:
<ul class="mi-lista"><li>cosa 1</li><li>cosa 2</li></ul>Y para declarar los estilos o propiedades de la clase mi-lista, con CSS, sería así:
.mi-lista {/*todas las propiedades*/}
...y en un div, en HTML pondríamos la clase así:
<div class="mi_clase">Lorem ipsum</div>
Y el CSS para aplicar el estilo sería:
.mi_clase {/*Aquí todas las propiedades con su respectivo valor*/}
Conclusiones:
Definitivamente, el uso de las clases facilita el trabajo para crear estilos que se repiten, y dar la apariencia que queramos a cualquier cosa o elemento a mostrar en nuestro blog, es mas práctico que agregar los estilos en el HTML, ya que no tenemos que repetir las propiedades cada vez que los necesitemos.
Referencias
Puedes leer más sobre las clases en:
Esctructura y reglas de CSS (en español)
Hojas de estilo en cascada (en español)
Selectores básicos
Etiquetas:CSS,Tutoriales