Tutoriales
Enlaces
Licencia
Esta obra está bajo una licencia de Creative Commons.
Para reconocer la autoría debes poner el enlace https://old.chuidiang.org
¿Qué es CSS y para qué sirve? ¿Por qué es útil?. Vamos a tratar de verlo aquí con un pequeño ejemplo.
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.
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.
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.
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.
Estas "cosas" de CSS se pueden poner en tres sitios distintos:
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.
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.
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.
Mientras que el fichero html puede contener esto
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.