Primeros pasos con CSS (hojas de estilo)

¿Porqué Usar CSS?

CSS (Cascading Styles sheets) también conocido como hojas de estilo, es una nueva forma de organizar nuestros sitios web, pero ¿porqué?, CSS atrae a una nueva metodología por necesidad, la necesidad de separar el contenido de la apariencia.

Cómo desarrollador esto significa que la información de nuestro sitio web debe ir dentro de los archivos HTML, pero estos HTML no deben contener información acerca de cómo se muestra la información. La información de cómo se deberían mostrar los documentos HTML se ubica en archivos CSS.

Ventajas de CSS ¿Qué logramos usando CSS?

Separar el contenido de la apariencia (del diseño).
Modelos de diseños flexibles (pocos límites de personalización del html).
Alta velocidad de carga (usando CSS se aminora la cantidad de código fuente).
Fácil y sencillo para el mantenimiento.
Fácil de transportar.
Avanzadas posibilidades de diseño.
Innovar en el uso del cliente.
Fácil Acceso.

Bueno pasamos un poco a lo que és el código, auqí tenéis un simple ejemplo de uso de estilos en un párrafo para lograr un color azul:

<p style="color:blue">esto es una prueba</p>

Cómo escribimos para CSS

En CSS nosotros escribimos de la siguiente manera -> nombre: valor; Pero primero debemos tener en claro, como adjuntamos una hoja de estilos a nuestros archivos para poder empezar a escribir.

Maneras de adjuntar una hoja de estilos CSS a un archivo HTML

Existen 3 maneras de adjuntar estilos a nuestras hojas de contenidos, la primera es usar el tag <style>:

<style type=”text/css”>
p { color: blue; }
</style>

La segunda, la más recomendada, es la de enlazar a una hoja de estilos externa (un archivo externo, llámese por ejemplo style.css, que contiene los códigos del diseño de nuestros html) como se muestra a continuación:

<link type=”text/css” href=”style.css” />

Y la tercera, la más vieja de todas:

<style type=”text/css”>
@import “style.css”;
</style>

Ésta tercera forma se ha usado con frecuencia para ocultar la hoja de estilos a ciertos navegadores y forzar a que el diseño de la página se vea bien en la mayoría de ellos.

Nota: Las diferentes maneras de enlazar con una hoja de estilos (CSS) deben ir dentro del tag <head> en el cuerpo del html.

Artículos Relacionados
Cómo incluir varios estilos en tu Blog usando PHP
Para los usuarios de Movable Type, por favor lean cómo poner Etiquetas PHP en Movable...
Videotutoriales de Hojas de Estilo (CSS)
Nivel avanzado Curso avanzado en video tutoriales sobre el uso de Hojas de Estilo (CSS)....
Videotutoriales de Hojas de Estilo (CSS) básico
Nivel Básico Recopilación de video tutoriales sobre la introducción al uso de Hojas de Estilo...
CSS para principiantes
Para este y tutorial sólo necesitas un navegador y un editor de texto. Si...

Última Actualización: 30/11/07