Respuestas rápidas sobre las hojas de estilo

Hay dos métodos para insertar una hoja de estilo externa, podemos usar la etiqueta LINK o la propiedad @import:

<link href='URL_archivo.css' type='text/css' />

<style type='text/css'>@import url(URL_archivo.css);</style>

Aunque se suele utilizar LINK cuando la incluimos en el HEAD de nuestra página, ambos métodos son correctos y el resultado será el mismo.

¿Para qué sirve entonces @import? Generalmente, se utiliza para importar hojas de estilo dentro de una hoja de estilo y en Blogger en particular, ese es el método que debemos usar si queremos agregar un archivo CSS externo en un post ya que la etiqueta LINK no es aceptada.

¿Y para qué agregar una hoja de estilo en un post? Porque si las agregamos en la plantilla se cargarán siempre aunque no la utilicemos así que, por ejemplo, si estamos mostrando algo eventual, algo que sólo se se verá en un post o en muy pocos, lo mejor es "importarla" cuando realmente se necesite.

En esos caso, la única condición a seguir para no tener problemas es que el código esté escrito en una sola línea.

¿Y qué es una hoja de estilo? Un archivo de texto plano, sin formato, que podemos crear con el block de notas y que NO INCLUYE etiquetas. Esto es fundamental, es el error más común. Esta restricción también es válida para agregar definiciones de estilo en la plantilla. Las etiquetas de Blogger <b:skin> y </b:skin> son similares a <style> y </style>; dentro de ellas no debe haber otras etiquetas:

<b:skin>
  ... propiedades ...
  <style>
    ... propiedades ...
  </style> 
  ... propiedades ...
</b:skin>

Eso resaltado es un error y hará que el resultado sea imprevisible. Lo mismo ocurrirá si comentamos el código como lo hacemos en el resto del HTML:

<b:skin>
  ... propiedades ...
  <!-- este comentario es un error -->
    ... propiedades ...
  /* este comentario es válido */
  ... propiedades ...
</b:skin>

Una hoja de estilo es una lista de definiciones que contiene propiedades y tiene una sintaxis estricta; las propiedades deben terminar con un punto y coma o no tendrán efecto:

<style>
  /* el color no se mostrará */
  color: #FFF
  font-size: 20px;
</style>

Como en Blogger no podemos alojar archivos, tener hojas de estilo externas no es demasiado práctico, tardarán en cargarse y editarlas es complejo ya que habrá que descargarlas, cambiarlas y volverlas a subir. Siempre es mejor agregarlas directamente en la plantilla.

También es buena idea organizarlas y agruparlas, no tiene mucho sentido tener una serie de etiquetas STYLE, una sola es suficiente y nada impide que usemos la que ya está incluida por defecto (b:skin) así que en lugar de algo así:

<b:skin>
  ... propiedades generales ...
</b:skin>

<style>
  ... propiedades para el truco XXX ...
</style>

<style>
  ... propiedades para el truco YYY ...
</style>

<style>
  ... propiedades para el truco ZZZ ...
</style>

Podemos escribir:

<b:skin>
  ... propiedades generales ...

  /* el truco XXX */
  ... propiedades ...

  /* el truco YYY */
  ... propiedades ...

  /*el truco ZZZ */
  ... propiedades ...
</b:skin>