Hojas de estilo en cascada (css3)

Se utilizan para separar la estructura del documento de su presentación.

Formas de uso de las hojas de estilo en cascada

Puede darse formato a los documentos html mediante css de tres formas distintas:

En línea: Insertando el estilo dentro de cada etiqueta html que se desee formatear.
En hoja de estilo interna: Incrustando la hoja de estilo dentro del documento html (en su cabecera, entre las etiquetas <head></head>)
Mediante una hoja de estilos externa: Se define todo el formato del documento en un documento aparte. Esta es la forma mas práctica de hacerlo y por lo tanto la que trataremos en este curso.

Creando una hoja de estilos externa

Las hojas de estilo externas son documentos de texto, al igual que las páginas html. Por lo tanto también pueden crearse con el Block de Notas. Una vez creadas se les asignará la extensión .css.

Vamos entonces, de la misma manera que aprendimos a crear una página web, a elaborar nuestra primera hoja de estilos, a la que llamaremos, por ejemplo, estilo.css, que nos permitirá formatear el color de fondo de nuestro documento principal index.html (coloquemos un fondo amarillo). Repasando el procedimiento:

Creamos con Block de Notas un documento nuevo y le asignamos por nombre: estilo.txt.
Editamos el documento escribiendo el código:
body {background-color:yellow;}
guardamos cambios y cerramos el documento.
cambiamos la extensión .txt por .css.

Finalizado el proceso tendremos el documento de estilo de cascada externo estilo.css, con el contenido:

Preparando nuestro documento 'index.html' para recibir formato de la hoja de estilo en cascada 'estilo.css'

Se logra colocando en la cabecera del documento index.html la etiqueta:

Conclusión

En conclusión tendremos el documento estilo.css:

Y el documento index.html:

Que será mostrado por el navegador:

La variable que define el color puede expresarse por su nombre, como se hizo; por su código de color hexadecimal:

ó por su código de color RGB:

Aquí puede consultar los códigos de color:

Códigos de color

Experimentando con código css

Una relación inadecuada entre el color de fondo y el color de texto puede hacer que el documento sea ilegible.

Vamos a experimentar con tres parámetros del formato de párrafo:

Tipo de fuente: font-family
color de fuente: color y
tamaño de fuente: font-size

Reedite la hoja de estilo de cascada como se muestra, observe los resultados y pruebe sus combinaciones cambiando las variables:

Cada instrucción puede ser escrita en una sola linea. Se incluyen saltos de linea y espacios con tabulaciones solo por cuestión de gusto y orden personal para facilitar revisiones y/o actualizacioes del código.

El archivo estilo.css, puede redactarse entonces:

Para avanzar rapidamente

Ya conocida la sintáxis y lógica de programación básica, html5/css3, lo que sigue es aprender nuevos códigos e insertarlos en nuestro sitio web para mejorar su presentación y/o incorporarle funcionalidades.

En adelante analizaremos como ingresar, entre otras cosas:

Encabezados
Hipervínculos
Imágenes

Avance rapidamente, según sus expectativas. Investigue ingresando en su buscador de internet expresiones como:

etiquetas html5
hipervinculo
tag html5
formatear texto con css3
colores html

En fin lo que se le ocurra que le pueda guiar a conseguir la etiqueta y atributos que este buscando.

Algunas consideraciones

El standart html5/css3 y su validación mediante wc3, esta en pleno desarrollo, por lo tanto es muy importante buscar constantemente nuevo código de acuerdo a nuestras necesidades.
No le tenga miedo al código. Si el navegador no consigue interpretar alguna instrucción, simplemente la ignorará y seguirá con el resto sin detener el proceso. En la mayoría de los casos no se detendrá mostrando mensages de error. Solo presentará lo que 'comprende' y seguirá adelante.
Cuidado con los nombres. Si usted utiliza para archivos, imágenes, recursos multimedia, etc, nombres como:
- españa.html (error: ñ)
- café.gif (error: acento é)
- mi estilo.css (error: espacio entre palabras)
todo funcionará bien en su disco duro local; pero al subir la página, el servidor no puede interpretar esos nombres y por lo tanto no podrá procesar el contenido involucrado en las instrucciones erróneas. En estos casos si pueden presentarse mensajes como "página no encontrada", dibujar un recuadro con una 'x' al no encontrar una imagen, y otros. Por lo tanto no espere mucho para alojar su página en el servidor, asi podrá detectar y corregir estos errores mas facilmente.
Lo ideal es codificar con el estandar html5; pero a veces no es tan sencillo. El estandar está en desarrollo y a veces no es tan facil conseguir documentación o resulta complicado aplicar la etiqueta nueva propuesta. Por lo tanto si usted está migrando, por ejemplo, un sitio anterior html3 al estandar html5 y no consigue algunas etiquetas, siga utilizando las anteriores hasta que encuentre la manera de actualizarlas. Los navegadores seguirán dando soporte para ellas.
Por ejemplo html5 desaconseja el uso de marcos (etiqueta <iframe>) creando en su sustitución la etiqueta <object>. No obstante a la fecha (19 de mayo de 2012), páginas como youtube, siguen generando código con la etiqueta <iframe> para insertar video en las páginas.
Haga copias de su sitio web antes de reeditarlo. Así podrá recuperar la versión anterior facilmente si no logra obtener los resultados esperados.

¡Muchó éxito! y a disfrutar esta gran aventura que apenas comienza.