Ejemplos java y C/linux

Tutoriales

Enlaces

Licencia

Creative Commons License
Esta obra está bajo una licencia de Creative Commons.
Para reconocer la autoría debes poner el enlace http://www.chuidiang.org

Qué es CSS

¿Qué es CSS y para qué sirve? ¿Por qué es útil?. Vamos a tratar de verlo aquí con un pequeño ejemplo.

Empezamos una página html

Cuando comenzamos a hacer nuestra primera página web, con html puro y duro, la hacemos un poco de cualquier manera, según se nos va ocurriendo. Escribimos nuestro texto y vamos poniendo cosas como colores, fuentes de letra, tamaños, imágenes de fondo, etc, etc, todo en html. Escribiremos cosas como esta

<font size="+1 color="#003399"><p align="center">texto centrado colorido y letra grande</p></font>

Luego va creciendo. Dentro de nuestro sitio hacemos uns segunda página html, la tercera y así muchas y muchas más.

Esto está bien ... hasta que decidimos renovar el aspecto de nuestra página web. La primera página es un poco pesada. Tenemos muchos textos "centrados, coloridos y con letra grande" que queremos convertir en textos "cursivos, extra grandes de fondo amarillo chillón". Bueno, "buscar y reemplazar" nos ayuda bastante.

Pero tenemos una segunda página en la que tenemos que hacerlo, y una tercera y muchas más.

Separar el estilo del contenido

CSS nace con la idea de evitar ese problema. La idea de CSS es separar el texto, el contenido de nuestras páginas de su estilo, de cómo se ven. Idealmente, lo de "texto grande, centrado y colorido" lo pondremos en un fichero . Ese fichero habitualmente se llama style.css o, al menos, tiene extensión .css. En ese fichero pondremos un nombre al estilo de "texto grande, centrado y colorido", por ejemplo, "parrafo importante". En ese fichero, de alguna forma, decimos que "parrafo importante" es un "texto centrado, grande y colorido".

Todos nuestros ficheros html harán una referencia a ese fichero style.css. Los parrafos que queremos que sean "grandes, centrados y coloridos" simplemente indicaran que tienen el estilo "parrafo importante". Algo así

<p class="parrafo importante">Este texto es importante</p>

Y así en todas nuestras páginas html de nuestro sitio.

Cuando queramos cambiar "texto grande, centrado y colorido" por "texto extra grande, cursivo de fondo amarillo chillón", sólo tendremos que cambiar en el fichero style.css ese estilo, sin cambiarle el nombre "parrafo importante". Tocando sólo eso, se cambiarán todos los "parrafo importante" de nuestras paginas web.

Posicionamiento con CSS

CSS va aún más allá. Podemos modificar la posición en nuestras páginas html de los distintos elementos. Podemos decidir cosas como el espaciado entre líneas, entre párrafos, si algún párrafo concreto debe ir sangrado. Incluso podemos colocar un párrafo centrado y sobre expuesto al resto del texto en medio de la página.

Si organizamos bien nuestras páginas html, podemos dar un cambio radical a su aspecto. Puedes mirar, por ejemplo, la página Zen Garden. A la derecha tiene un menú en el que pinchando puedes ver la misma página a la que sólo se le cambia el fichero de estilo css.

Qué pinta tienen la "programación" en CSS

CSS básicamente consiste en poner muchos de estos

selector {
propiedad:valor;
propiedad:valor;
...
}

Vamos a ver qué es cada una de esas cosas, pero de manera informal.

Un ejemplo concreto

p {
color: red;
}

Esto hará que nuestros párrafos en todo el texto html salgan en rojo, justo como este.

Dónde colocamos estos estilos

Estas "cosas" de CSS se pueden poner en tres sitios distintos:

CSS en los tag de html

Podemos poner el estilo de CSS para un tag concreto de html justo en el tag. Algo así

<p style="color:red;">Esto sale rojo</p>

Ponemos las propiedades y valores entre comillas y haciendo style="...".

Si lo hacemos así, evidentemente perdemos las ventajas de CSS. Si queremos modificar más adelante el estilo, tendremos que ir tocando todos los ficheros html uno a uno y en cada uno de ellos todos los tags afectados, que pueden ser muchos.

Esta opción se reserva sólo para casos muy partículares, para algún párrafo o tag html muy concreto que sólo requiere ese estilo. Por ejemplo, el párrafo rojo que puse antes y que no voy a usar más posiblemente en ninguna otra página de este sitio. Sólo me ha servido para un ejemplo concreto en esta página.

Entre los tags head de la página html

Otra opción es poner el estilo entro los tag <head>...</head> de la página html. Se pondría así

<html>
   <head>
      ...
      <style type="text/css">
      p {
         color:red;
      }
      </style>
      ...
   </head>
...

Haciéndolo así, esto afectará a todos los párrafos de la página html.

Esta opción es algo mejor que la anterior, pero debemo repetir este trozo en todas las páginas hmtl que tengan los mismos estilos. Si queremos modificar, debemos modificar todas las páginas html. Suele reservarse esta forma para estilos que se repiten en varios sitios de la misma página html, pero que no pensamos usar más en el resto de páginas html del sitio.

En fichero .css separado

Esta es posiblemente la mejor opción. Se pone todo el estilo CSS en un fichero separado que habitualmente tiene la extensión .css. Un ejemplo de fichero estilo.css puede tener esto

p {
   color:red;
}

Luego, en nuesro fichero html, entre los tag <head> ponemos esto

<html>
   <head>
      ...
      <link rel="stylesheet" href="estilo.css" type="text/css" />
      ...
   </head>
   ...

De esta forma el estilo del fichero estilo.css se aplicará a nuestra página html y todos los párrafos saldrán de color rojo.

Los demás ficheros html de nuestro sitio pueden incluir de la misma forma el mismo fichero estilo.css y así saldrán todos los párrafos de todas las páginas de nuestro sitio de color rojo. Si un día nos hartamos del rojo, cambiamos "red" por "blue" en el fichero estilo.css y nos saldrá todo en azul.

Un ejemplo más completo y en el que aplicamos un estilo sólo a un determinado tipo de párrafos podrías ser así. No te preocupes de enterlo mucho, sólo quedate la idea de cómo se hace.

estilo.css
/* Indicamos que los parrafos importantes deben ser rojos */
p,importante {color:red};

Mientras que el fichero html puede contener esto

fichero.html
<html>
   <head>
      <link rel="stylesheet" type="text/css" href="./estilo.css">
   </head>
   <body>
      <p>Esto saldra normal</p>
      <p class="importante">Esto saldra rojo</p>
   </body>
</html>

Lo de "importante" es un nombre que hemos elegido nosotros para identificar los párrafos importantes y su estilo (color rojo).

Vamos ahora a ver la sintaxis de CSS con un poco más de detalle.

Estadísticas y comentarios

Numero de visitas desde el 4 Feb 2007: