Aplicando una hoja de estilo CSS a un blog de La Coctelera

Las hojas de estilo en cascada (CSS) permiten definir cómo se va a mostrar por pantalla un documento HTML. Generalmente se usan para marcar el estilo de una página web de forma independiente a los contenidos, es decir, si modificamos la hoja de estilo CSS también cambiará la forma en la que vemos la web sin haber tenido que tocar su contenido.

La Coctelera no permite que los usuarios modifiquemos las hojas de estilo de nuestros blogs, pero sí que permite que la sobrescribamos. La principal pega de hacer esto es que primero se cargará la hoja de estilo original y luego la nueva, por lo que la web tardará más en cargarse y veremos como cambia el estilo mientras carga. Pero esto es inevitable debido a la restricción impuesta por La Coctelera.

La ventaja es que no es necesario escribir una hoja de estilo completa. Si generamos una hoja de estilo con sólo un pequeño cambio, esto será lo único que se sobrescriba, respetándose todo lo demás. Para este artículo voy a generar una hoja de estilo muy simple que tan sólo define un estilo que permite mostrar un trozo de código dentro de un artículo. He decido comenzar por esto porque será muy útil para mejorar la presentación y legibilidad tanto de este artículo como de los próximos que escriba sobre modificaciones en el blog.

La hoja de estilo la he llamado Condor.css en un alarde de originalidad sin precedentes. Este fichero hay que subirlo a la web usando las herramientas que La Coctelera te da para ello, es decir, de la misma manera que se subiría, por ejemplo, cualquier imagen.

Sin embargo, no basta con subir el fichero, sino que hay que indicar en algún sitio que Condor.css es la hoja de estilo que debe usarse para definir cómo se ve la web. Esto puede hacerse en la sección Sobre Mí. Debajo del típico texto en el que usamos para presentarnos como propietarios de la web hay que añadir el fragmento de código que se muestra a continuación (la web lo interpretará adecuadamente y no lo mostrará realmente en la sección Sobre Mí).

 <!-- Estilos personales del blog -->
 <style type="text/css">
 @import url('/myfiles/condor/Condor.css');
 </style>
 

En general, el código HTML se estructura utilizando etiquetas para definir los atributos de las páginas web. Estos atributos siempre se escriben de la siguiente forma:

 <etiqueta> definición del atributo </etiqueta>
 

En concreto, la etiqueta style indica que se va a asignar un estilo a la página web. Además se indica que la forma en que se definirá el estilo será por medio de texto en formato CSS. El código contenido entre las etiquetas inicial y final indica que el estilo hay que importarlo desde el fichero Condor.css que se encuentra en la ruta especificada (la ruta por defecto a la que van todos los ficheros que almaceno en el mi blog).

En este punto hay dos cosas interesantes que comentar. La primera es que el trozo de código anterior comienza con un comentario. Los comentarios en código HTML se introducen entre estas dos etiquetas:

 <!-- comentario -->
 

La segunda es que no puede utilizarse el carácter “<” delante de las etiquetas del ejemplo, ya que entonces no las mostraría tal cual sino que pensaría que son etiquetas e intentaría hacer lo que indican. Para evitarlo hay que sustituir el carácter “<” por su equivalente en HTML, que es “&lt;”.

Ahora ya le hemos indicado a la web que debe sobrescribir el estilo por defecto de La Coctelera con las especificaciones contenidas en la hoja de estilo Condor.css. Como comenté anteriormente, lo único que voy a poner dentro del fichero es lo necesario para que aparezcan precisamente estas cajas de código en las que se muestran los ejemplos. La hoja de estilo contendrá el siguiente código:

 /* Hoja de estilos personales - El Vuelo del Cóndor */
 
 /*** Estilo para mostrar fragmentos de código ***/
 
 pre.codigo {
   font-family: "Courier New", "Lucida Console", monospace;
   font-size: 0.85em;
   background-color: #F0F0F0;
   border: solid medium #505050;
   margin-left: 20px;
   padding: 15px 20px 5px 20px;
   line-height: 0px;
 }
 

Este código CSS define una nueva clase de estilo, denominada codigo, que estará incluida dentro de la etiqueta pre. Esta etiqueta, usada en solitario, indica que el texto que enmarca es un texto preformateado por el usuario y, por tanto, deben respetarse los espacios, retornos de carro, etcétera tal y como estén en el texto. Además, se usará un tipo de letra de espaciado fijo, en lugar del típico tipo de letra de espaciado variable en el que cada letra ocupa una cantidad distinta de espacio según su forma. Podemos comprobar que las dos primeras líneas de este trozo de código son comentarios. Añadir comentarios siempre es importante para facilitar su comprensión a posibles lectores posteriores, lo que nos incluye a nosotros mismos si dentro de un tiempo queremos recordar lo que hemos hecho. Los comentarios en CSS se realizan utilizando una sintaxis parecida a la utilizada por el lenguaje C:

 /* comentario */
 

La clase pre.codigo que estamos definiendo tendrá, además, unos atributos diferentes, que son los que se definen en la hoja CSS.

• El atributo font-family indica el tipo de fuente de letra que se usará para mostrar el código. En principio utilizará Courier New, pero en caso de que no esté disponible utilizará Lucida Console y, en última instancia, cualquiera de espaciado fijo. Es adecuado indicar más de una fuente porque no podemos estar seguros de que una determinada fuente esté disponible en todo navegador que acceda a la página web.
• El atributo font-size indica el tamaño que debe tener la fuente de letra. La unidad de medida em hace referencia al tamaño original de la fuente dentro de la clase, por lo que indicar 0.85em significa reducirla a un 85% de ese tamaño.
• El atributo background-color indica el valor del color de fondo. Este valor se indica como un número hexadecimal de 24 bits. Los primeros 8 bits indican el valor del componente rojo del color, los siguientes 8 bits indican el valor del componente verde y los últimos 8 bits indican el valor del componente azul, siguiendo el típico esquema RGB.
• El atributo border indica cómo debe ser la línea de la caja que rodea al código. El término solid indica el tipo de línea (otros tipos posibles son dotted, dashed, double,…) y el término medium indica su grosor (otros tipos posibles son thin, thick,…). Finalmente se indica el valor hexadecimal del color (también existen palabras clave para facilitar la elección del color, como red, black, gray,…).
• El atributo margin-left indica donde debe estar situado el lado izquierdo de la caja que rodea al código. En concreto se indica que a 20 píxeles (px) del margen izquierdo original de la página. Al usar píxeles como medida hacemos que esta distancia sea dependiente del dispositivo de video que reproduce la página. Otra alternativa hubiera sido definir esta distancia de forma relativa a las dimensiones de la página usando la unidad em igual que cuando definimos el tamaño de la fuente. Al no haber definido el resto de márgenes, estos serán establecidos a los valores por defecto para la clase que estamos definiendo.
• El atributo padding indica la separación del contenido de la caja de código de sus bordes. En este caso se han introducido los cuatro valores posibles al mismo tiempo y siguiendo el orden arriba, derecha, abajo, izquierda. Los valores están medidos en píxeles.
• El atributo line-height determina la distancia entre líneas. En concreto la establece a 0 píxels por lo que la distancia es la mínima posible que permite la clase que estamos definiendo.

Y con esto ya tenemos una hoja de estilo CSS que sobrescribe parcialmente la hoja de La Coctelera y que define la clase pre.codigo. Podemos usar esta clase para mostrar porciones de código en la web, tal y como hago en este artículo, encerrándolas dentro de las etiquetas correspondientes:

 <pre class="codigo">
 porción de código
 </pre>
 

Ya no me queda más que expresar mi agradecimiento a mi amigo Pablo, mi oscuro maestro en los asuntos del diseño web, que es quien me explicó como sobrescribir el estilo de La Coctelera (así como qué era una hoja de estilo, para ser sinceros) y es, además, el diseñador original de la clase pre.código que yo me he limitado a modificar ligeramente.

Y con esto concluyo. Disto mucho de ser un experto en HTML o CSS, pero escribir artículos como este me ayudan a aprender. Además, al dejarlo por escrito puede ser utilizado como referencia y recordatorio en el futuro por todo aquel a quien pueda servirle de ayuda, incluyéndome a mí mismo cuando siga trabajando en mi blog. Por supuesto, si encuentras algún error u omisión, te agradeceré que me lo comuniques para realizar las modificaciones oportunas. Los errores son inevitables, pero de ellos siempre se aprende.

Modificación (15/06/2006): Me he visto obligado a retirar de la clase código la línea "line-height: 0px;". La había añadido para juntar las líneas de código tal y como se ven usando Firefox, pero en el Explorer causa que las líneas de código se monten unas encima de otras, haciéndolo ilegible. Al parecer, las líneas de código salen tan separadas en Firefox a causa de que La Coctelera añade comandos espúreos que el Firefox interpreta mal, por lo que no hay nada que pueda hacer al respecto hasta que La Coctelera solucione el problema.

Modificación (20/06/2006): Otro cambio en la clase código. Parece que algunas líneas de código se salen de la caja cuando las ves usando el Explorer e invaden la columna derecha. Para corregirlo, Pablo me ha dicho que debo añadir esta línea a la clase para limitar la anchura: "width: 90%;".

Modificación (21/06/2006): Me acabo de dar cuenta de que han aparecido unas barras de desplazamiento en las cajas de código. No tengo nada que ver con ellas, debe ser cosa de La Coctelera. Pablo me comenta que ha visto un nuevo atributo en la hoja de estilo de La Coctelera que probablemente está relacionado: "overflow: scroll;". Curiosamente, las cajas de código con barras de desplazamiento se saldrían de la columan central del blog si no fuera por la línea "width: 90%;" que añadí ayer. Que oportuno.

servido por condor 4 comentarios compártelo