CSS: INTRODUCCIÓN

CSS (Cascading Styles Sheets: hojas de estilo en cascada) es el lenguaje utilizado para definir el modo de presentar el código HTML de una página web.

Podemos colocar el código CSS de distintas formas:

1. En el atributo HTML con el atributo style. Se usa para poder aplicar un estilo a una parte concreta de texto. Es desaconsejable hacerlo así si queremos que afecte a todo nuestro blog ya que tendríamos que repetir el código. Es útil cuando queremos que actúe solamente en la parte del post donde lo estamos incluyendo.
   
   Ejemplo: dibujar un cuadrado con un color de fondo, con borde y que contenga un texto en otro color.
   
   
   Caja 1 de 200px x 200px
   
   El código utilizado es:
   

   <div style="width: 200px; height:200px; border: 1px solid #000000; color: #ffff00; text-align: left; background: #6699FF;">Caja 1 de 200px x 200px</div>

   
   
2. Con la etiqueta style que se podría añadir tanto en la primera zona de la cabecera, como en la segunda, en el BODY o en un gadget HTML/JavaScript, como vimos en el ejercicio de la marquesina. Sólo afectará al documento actual.
   
   
3. En un archivo independiente, con texto plano que contenga las reglas CSS y que tendrá la extensión .css. Un archivo CSS es una hoja de estilos que contiene reglas. Una regla de estilo CSS está formada por dos partes: el selector y la declaración. Ejemplo, aplicar color gris al texto en tamaño H2:

Selector: se refiere a las partes del documento a la que se va a aplicar el atributo. Podemos colocar más de uno, separados por comas.

Declaración: es la definición del estilo. Se coloca dentro de unas llaves, la propiedad va seguida por dos puntos y finaliza con punto y coma. Una propiedad puede tener varios valores que se escribirán separados por espacios. Así, una regla de estilo para que un párrafo se escriba con fuente en tamaño medio y tipografía Helvética sería:  P {font: médium Helvetica;}


SELECTORES BÁSICOS

1. Selectores por tipo. Se escribe únicamente el nombre de una etiqueta HTML. Las propiedades modificadas afectarán a los elementos del mismo tipo. Por ejemplo, si queremos que los enlaces nos aparezcan en color verde:
   

           A {
           color: green;
           }

   
   
2. Selectores de clase. Consiste en definir una clase, que es un conjunto de propiedades de estilo agrupadas bajo un nombre. El nombre del selector debe ir precedido de un punto. Afectará a todos los elementos para los que se haya establecido dicha clase como atributo. En la plantilla definiremos la clase con el código CSS:
   

           .clase1{
           color: blue;
           }

   
   y en el post la incluimos con el atributo class:
   

         <div class=”clase1”></div>

   
   
3. Selectores de id (identificador). Al igual que la clase, consiste en definir un conjunto de propiedades de estilo agrupadas bajo un nombre, que se asignarán a un bloque. El nombre del selector debe ir precedido de almohadilla. Afecta sólo a un elemento. El código CSS sería:
   

           #id1{
           color: red;
           }

   
   y en el post lo incluimos con el atributo id:
   

         <div id=”id1”></div>

Cuando un elemento se ve afectado por distintos selectores, el orden de prioridad, de mayor a menor, es: primero el del identificador, después el de clase y finalmente el de tipo.


MODIFICAR CSS EN NUESTRO BLOG

Los estilos CSS están agrupados entre las etiquetas <b:skin>...</b:skin>. Las modificaciones en nuestro blog, podemos hacerlas de dos maneras distintas:

1. En el diseñador de plantillas de Blogger: Plantilla>Personalizar>Avanzado>Añadir CSS. Escribimos en el recuadro la regla de estilo CSS y lo aplicamos al blog. Esta opción puede no funcionar en plantillas personalizadas si los autores no previeron su uso.
   
   
2. Escribirlo directamente en el código HTML de la plantilla, delante de: ]]></b:skin>. Para ello  accedemos a Plantilla>Editar HTML. Aparece la plantilla de códigos del blog. Para hacer una búsqueda clicamos en Ctrl+F y escribimos el código que queremos buscar. Ten en cuenta que a veces el código no está expandido y tenemos que clicar en la flecha para acceder a él. Cuando localices ]]></b:skin> colocas justo encima el código CSS que quieres añadir.

PARA SABER MÁS:

¿Cómo se hace…?

Oloblogger

Manual HTML. Universidad de Valencia

HTML.net

HTML.net. Tutorial de CSS