Comenzando con CSS
Al hablar de CSS, estamos sintetizando las palabras hoja de estilos en cascada (del ingles, Cascading Style Sheet), mientras que por otro lado, sabemos que sirve para especificar cómo deberán presentarse los documentos HTML, en cuanto a la disposición de sus elementos, colores, tipografías, formas, transiciones, animaciones y otros efectos.
Cuando abrimos un documento HTML, el navegador se debe resolver ciertas cuestiones, antes de que el usuario pueda visualizar correctamente el documento estilizado. Por lo general, pueden existir varias fuentes de estilo, lo que nos lleva suponer que existe una manera de proceder.
Los estilos pueden definirse en archivos con extensión .css o pueden estar embebidos en el documento HTML. En el primer caso, los archivos se deberán invocar a partir de un elemento link en el cual se especifica la URL de locación de la fuente.
<link rel="stylesheet" type="text/css" href="theme.css">Mientras que para el segundo caso, existen varias formas de que se comentarán más adelante.
Por otro lado, los navegadores incorporan sus propias hojas de estilos (que son utilizadas por defecto), y a su vez, omiten aquellos estilos que no puedan resolver, evitando que tengamos que tratar con el manejo de errores.
Todo esto se debe a que CSS se define bajo el término de cascada porque trabaja con reglas en base a un orden de prioridad, lo que da lugar a suponer en un principio, dos cosas:
- En algún lugar hay reglas, que existen o que hay que definir.
- Que las reglas siguen un orden de prioridad, por el cual una regla es más preponderante que otra.
Y quien interprete todas estas reglas será el navegador.
Reglas
Las reglas son el cómo de todo este universo y para entenderlas, debemos entrar en el campo más técnico de CSS, definiendo lo que son y cómo se componen:
- Una hoja de estilos es un conjunto de una o más reglas que se aplican a un documento HTML
- Una regla se compone de un selector y al menos una declaración
- Una declaración se compone de una propiedad y un valor
La sintaxis de una regla básica en CSS sigue un modelo, donde se especifica primero el selector y luego el cuerpo entre llaves. Dentro, la declaración se indica con una propiedad seguida de dos puntos y un valor, terminando la sentencia con un punto y coma.
Una regla de mayor complejidad, podría contar con múltiples selectores y múltiples declaraciones. CSS nos permite agrupar selectores y declaraciones, y este es un punto fuerte del cual nos podemos abrazar para hacer pequeñas hojas de estilo con mucha personalidad.
La prioridad de las reglas
En CSS ocurre una “competencia entre reglas”, que el intérprete deberá resolver en base a ciertos criterios bien definidos. Una hoja de estilos puede tener reglas que compitan entre sí, como así también puede ocurrir una competencia entre reglas de distintas hojas de estilo.
Al momento de diseñar nuestra hoja de estilos, tenemos que tener en cuenta cuáles son los factores que hacen a las reglas que definimos, más o menos prioritarias.
Un modelo general que explica el orden de prioridad de las reglas sería el siguiente:
- !Important es una palabra reservada que se aplica en una declaración y significa que dicho estilo es el más prioritario, sobre las declaraciones que apliquen a la misma propiedad del mismo selector.
- Los estilos inline son aquellos que por alguna razón de diseño se prefiere declarar directamente en el documento HTML bajo la propiedad style de un elemento HTML.
- Si bien media es un concepto avanzado para este post, prácticamente se utiliza para declarar estilos que se activan bajo ciertas condiciones. Se suele usar mucho para manejar distintas resoluciones de pantalla.
- En este punto, hay que separar la idea de quién es el usuario y quién es el diseñador. Por un lado, quien elabora los estilos del documento HTML es el diseñador, que existe en un tiempo previo al usuario. En cambio, el usuario existe en el mismo momento en que se está viendo el documento estilizado (o a lo que se llama comúnmente, página web renderizada). Si hacemos una analogía, podemos ver que hay un rol de productor y otro de consumidor.
- Aquí es donde toman fuerza las reglas de las hojas de estilo definidas por el diseñador, y son estas las que sobrescriben las reglas heredadas provistas por el navegador en las fuentes de estilo por defecto. La especificidad de los selectores aplicará más o menos prioridad a la regla.
- Este caso lo encontraremos muy visible en las hojas de estilo que vayamos definiendo. El orden de las reglas es un mecanismo muy útil para darnos idea de por qué algunas declaraciones pueden parecernos no tener ningún efecto sobre el estilo que queremos especificar. Su funcionamiento se puede resumir diciendo que la última regla tiene la mayor prioridad.
- En cuanto a la herencia en las reglas, digamos que en la omisión de una regla, se aplica el estilo heredado del padre.
- Último en la lista están las reglas provistas por el navegador en las fuentes de estilo por defecto.*
Pongamos los conocimientos en práctica
Simulemos el caso en el que nos proponemos hacer una publicación para nuestro blog. Sabemos que los elementos básicos que tenemos que tener en cuenta son la tipografía, el tamaño y el color del texto, y el formato de los títulos.
En el siguiente bloque, se puede ver el documento HTML en crudo. Para los que no están familiarizados, recomiendo investigar un poco sobre el tema (les aseguro que no es nada complicado).
<h1>Titulo 1</h1><h2>Subtitulo</h2><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eum libero facere dignissimos nisi quia incidunt blanditiis veniam nemo minus quis.</p><h3>Título de apartado</h3><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquid provident illum, doloremque repellat, molestiae odio quisquam laudantium saepe reprehenderit quibusdam earum esse hic eum commodi nostrum totam odit, maiores tenetur quasi quam iure! Sed beatae, vero quasi officia doloribus dolorem?</p><ul>
<li>Lorem, ipsum.</li>
<li>Lorem, ipsum dolor.</li>
<li>Lorem ipsum dolor sit.</li>
</ul>
Se puede observar que nuestro documento no tiene más elementos ni propiedades que los acordados. Sin embargo, iremos introduciendo algunos conceptos que serán útiles en ciertas circunstancias.
Como resultado, el navegador estará renderizando una página web a partir de lo que tiene y lo que no. Si nos ponemos en el rol del diseñador, hasta ahora no hemos definido ninguna hoja de estilos, y es por esto que el navegador deberá resolver a partir de los valores por defecto que él mismo tiene incorporado.
Si lo vemos desde los ojos del usuario, estaremos frente a una página web de lo más sencilla, estéticamente hablando.
Con todo esto presente, podemos empezar a definir nuestras primeras reglas.
Empezaremos trabajando sobre el documento HTML (todavía no haremos uso del elemento link del que se habló al comienzo). Para agregar estilo al post, utilizaremos el elemento style, en el que podremos empezar a escribir nuestra propia hoja de estilos.
<style>h1 { font-weight: 400; }
h1 { font-family: Helvetica, sans; }h2 { font-weight: 200; }
h2 { font-family: Helvetica, sans; }
h2 { color: gray }h3 { font-weight: 200; }
h3 { font-family: Helvetica, sans; }
h3 { color: gray }p { font-family: Helvetica, sans; }
p { font-size: 14px; }
p { text-align: justify; }ul { font-style: italic; }
ul { font-size: 14px; }
ul { list-style: none; }li { margin: 10px 0px; }</style>
En CSS, todos los elementos de HTML pueden ser referenciados por un selector. En nuestra primer hoja de estilos, podemos observar que hemos agregado estilos directamente a los títulos, a los párrafos y a la lista.
Como primer resultado, obtenemos algunos pequeños cambios respecto de la versión inicial.
Sabemos que podemos agrupar algunos selectores y declaraciones a fin de sintetizar un poco nuestra hoja de estilos.
<style>html { font-family: Helvetica, sans; text-align: justify; }h1 { font-weight: 400; }h2, h3 { font-weight: 200; color: gray; }p, ul { font-size: 14px; }ul { font-style: italic; list-style: none; }li { margin: 10px 0px; }</style>
En esta segunda versión, aparece un nuevo selector llamado html, que hace referencia al elemento raíz del documento HTML.
Como un dato no menor, existe un selector que funciona como comodín, se indica con un asterisco y sirve para hacer declaraciones que afectarán a todos los elementos del documento, sobrescribiendo los valores por defecto, pero no así con otras reglas si su posición en la hoja es menos prioritaria.
Ahora supongamos que queremos que el párrafo bajo el subtitulo tenga un estilo diferente al del párrafo bajo el título del apartado. Por ejemplo, queremos que como resultado, el primer párrafo tenga un color más claro y además esté en itálica (cursiva).
Actualmente, nuestra hoja de estilos no puede diferenciar entre un párrafo y otro, y para estos casos es que podemos optar por utilizar otros tipos de selectores, como los identificadores o las clases.
Identificadores y clases
Identificadores
Como lo indica su nombre, se utiliza para identificar un único elemento, en este caso un elemento HTML y su valor debe ser irrepetible en todo el documento. Esta propiedad tan particular, puede ser referenciada como un selector para aplicar reglas de estilo.
Para definir el identificador de un elemento HTML, basta con agregar la propiedad id y asignarle un valor único.
<p id="parrafo-subtitulo", ipsum.</p>Mientras que para invocar un identificador en la hoja de estilos, debe estar precedido por un símbolo numeral (#), sin espacios.
<style>...#parrafo-subtitulo { font-style: italic; }</style>
Clases
En primer medida, podemos darnos la licencia de decir que una clase es como un identificador, con la única diferencia de que el nombre de la clase puede estar declarado múltiples veces en el documento HTML, en varios de sus elementos. En otras palabras, una clase es un conjunto de declaraciones cuya definición puede referenciarse más de una vez desde el documento HTML.
Por lo tanto, si queremos definir una clase en la hoja de estilos, el selector debe estar precedido por un punto, sin espacios.
<style>....parrafo { font-style: italic; }</style>
Mientras que en el documento HTML, basta con agregar la propiedad class a los elementos que quieran referenciar la clase.
<p class="parrafo">Lorem, ipsum.</p>¿Cuándo una clase y cuando un identificador?
Elegir entre un identificador o una clase, es parte del juicio del diseñador. Sin embargo, existen situaciones en las que conviene más uno, que otro. En lo que a mí respecta:
- Si el estilo que debemos definir aplica únicamente a un único elemento, se recomienda utilizar un identificador.
- Si el estilo que debemos definir debe poder ser reutilizado por varios elementos, se recomienda utilizar una clase.
En el último caso, podemos recurrir a la especificidad del selector para acotar el uso de la regla a unos pocos elementos que cumplan cierto criterio.
Retomando el caso con el que estábamos trabajando, se ha requerido que el primer párrafo deba tener un estilo distinto al último.
Aquí estamos en una situación de diseño, se puede hacer uso tanto de un identificador como de una clase. En este caso trabajaremos con un identificador al cual nombraremos “parrafo-subtitulo”.
Las modificaciones serán las siguientes:
- Agregar el identificador al primer párrafo del documento HTML
<p id="parrafo-subtitulo">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eum libero facere dignissimos nisi quia incidunt blanditiis veniam nemo minus quis.</p>2. Agregar la regla del selector cuyo nombre hace referencia al identificador
#parrafo-subtitulo { color: gray; font-style: italic; }Supongamos que ahora los elementos de la lista del ejemplo llevan un titulo en negrita y el texto consecutivo mantiene el formato. Pero el primero, a su vez debe estar subrayado. Como resultado, se pretende obtener:
Para definir la regla, el selector para el primer elemento de la lista, debe ser más específico. Solo si se cumple la secuencia del selector, se debe aplicar el estilo correspondiente.
ul li span.negrita {
font-weight: bold;
};ul li span.negrita.subrayado {
text-decoration: underline;
};
El estilo se aplicará solo si pertenece a un elemento de una lista sin orden, bajo el cuerpo de un elemento span cuyas clases sean negrita y subrayado.
En resumen, vimos que el uso de los identificadores y de las clases nos da una ventaja sustancial frente a los selectores comunes que hacen referencia a los elementos HTML, y que la especificidad de la regla aporta enormemente a estilizar elementos particulares del documento.
Aún con todo lo que fuimos viendo, CSS tiene mucho más que darnos, pero eso quedará para otro post.
Para aquellos que quieran ver el ejemplo funcionando, lo dejo a disposición en CodePen
Resumen
En este post pasamos por aspectos básicos y fundamentales de CSS, los que podemos adoptar como primeras herramientas para situaciones futuras y más reales.
Ahora sabemos por qué CSS hace alusión a la palabra cascada, cómo es su sintaxis, la existencia de reglas, su forma de interpretarlas y de procesarlas, y el uso de identificadores y clases como nuevos mecanismos para estilizar de forma más óptima nuestro documento HTML.
Sin más, espero que les haya gustado el post, siéntanse en libertad de comentar o escribirme.
Saludos.
