Hojas de Estilo o CSS
Introducción a CSS
Lección 1
Por: Humberto Rodríguez
CSS (Cascading Style Sheet), u Hojas de Estilo, es el método preferido desde hace ya algún tiempo, para controlar la apariencia y la localización de los elementos de las páginas web. La idea es separar lo que es el código del contenido, ya sea texto, imágenes, tablas o cualquier otra cosa, que se colocan en una página web usando etiquetas de HTML, de la forma de presentar ese contenido o información, tamaño y color del texto, color del fondo o una imagen de fondo, typo de letra, aliniamiento de los distintos elementos, etc.
Este sistema hace mucho más fácil el mantenimiento de las páginas web. Evita el uso de tantos engorrosos atributos en las etiquetas de HTML, atributos que están ya "depracados" lo que quiere decir que no se recomienda su uso y que serán eliminados en versiones futuras de HTML.
Hay tres formas de usar CSS:
La primera y preferida, es usar Hojas de Estilo externas, que se incorporan a la página de HTML mediante un renglón en la sección de head o cabezal. Es preferida por varias razones. En primer lugar, es la más limpia, la que es menos invasora de la página y su código, haciendo más fácil editarlo más adelante. En segundo lugar, permite modificar todas las páginas que la utilicen de un sólo cambio, modificando únicamente la Hoja de Estilo que aplica a todas las páginas.
Si se tienen varios sitios web, es posible usar la misma Hoja de Estilo para todos los sitios web, de modo que cambiándola, se cambian automáticamente todas las páginas de todos los sitios web.
El segundo método es poner la información del Estilo en el head o cabezal de cada página. Esto ocupa mucho espacio y hace más trabajosas las páginas, además de tener que cambiar cada una a la hora de hacer cambios.
El tercer método, es usar el atributo "style" en las etiquetas de HTML, que es el peor sistema de todos y no recomendado, a no ser para modificar algo poco común y no recurrente, en una página, al momento de escribir su contenido de HTML.
La jerarquía de éstos tres métodos es la siguiente:
Imagínense que tengan definido el color de fondo en una Hoja de Estilo externa, y luego lo definen de nuevo en el cabezal, para más adelante, volverlo a definir con un atributo a una etiqueta de <a>. Pues bien, mientras más específica la definición, mayor jerarquía tiene. Ésto quiere decir que en éste ejemplo, la designación en el cabezal tendrá preferencia sobre la de la Hoja de Estilo externa y a su vez, el atributo a una etiqueta específica tendrá preferencia sobre lo que ordene el cabezal.
En éste curso, usaremos solamente las Hojas de Estilo externas. ¿Que es una Hoja de Estilo externa? Es simplemente un archivo de texto, que pueden hacer en NoteTab o en el bloc de notas, guardado con la extensión .css y disponible a las páginas web. Para ésto último, tiene por supuesto, que estar disponible al Internet.
Nosotros crearemos una carpeta llamada css en la carpeta principal de HTML del sitio web, a veces llamada html o public_html. Hacemos ésto, para poder almacenar allí todos los archivos .css que querramos crear y tenerlos dispponibles para acceder a ellos desde el propio sitio web con una ruta relativa, como /css/style.css o con un URL e.g. http://dominio.com/css/style.css y tener así acceso desde cualquier otro sitio web.
La entrada que hay que hacer en el head o cabezal para acceder a ésta página de css desde el mismo sitio web es:
<link rel="stylesheet" type="text/css" href="/css/style.css">
Para acceder a una Hoja de Estilo que est'a en otro sitio web, usamos:
<link rel="stylesheet" type="text/css" href="http://dominio.com/css/style.css">
Haciendo esa entrada una vez en el cabezal de cada página de todos nuestros sitios web, podremos controlar su aparencia modificando solamente la Hoja de Estilo que comenzaremos a crear en la próxima lección.
