GeekTextual

Llego la hora de continuar con este curso de CSS, después de un primer capitulo de introducción, y de un segundo capitulo de como definir y llamar estilos desde HTML.

En este capitulo veremos como crear un archivo solo con los estilos que usaremos en nuestro diseño para que solo tengamos que llamarlo desde el HTML y así cuando necesitemos modificar algo, solo tengamos que modificar ese archivo.

Una hoja de estilos externa tiene que llevar la extensión .css para poderlo llamar desde otro archivo, en este capitulo vamos a usar de ejemplo uno llamado:

style.css

Para esto, les pediré que creen un archivo llamado así, “style.css”, que podrán modificarlo con cualquier editor de texto plano, en lo personal les recomiendo Notepad++.

Una vez creado el archivo comenzaremos a aplicar los estilos, que serán los mismos que usamos en el capitulo 2, así que solo ingresamos el código CSS sin más complicaciones:

[code lang="css"]p {
color: #dd0000;
}[/code]

Ahora guardamos nuestro archivo, y creamos uno nuevo .html, por ejemplo:

pruebacss-capitulo3.html

En ese archivo entonces vamos a llamar a nuestra hoja de estilos, que se hace con la etiqueta <link> de la siguiente forma:

[code lang="html"] [/code]

Hay que prestar especial atención al parámetro media, que nos servirá especialmente para cuando tengamos una hoja de estilos según el dispositivo con el que accedan a nuestra pagina web, los cuales pueden ser definidos de la siguiente manera:

• screen (valor por defecto) – para presentación en pantallas de computadoras.
• print – para salida a una impresora.
• rojection – para presentaciones en proyectores.
• aural – para sintetizadores de voz.
• braille – para presentación en dispositivos braille.
• tty – para pantalla en celda de caracteres (usando una fuente de inclinación fija).
• tv – para televisores.
• all – para todos los dispositivos de salida.

Así que una vez entendido esto, procedemos a importarlo en un archivo html y empezar a usarlo, como dije, usaremos el ejemplo del capitulo anterior, entonces esta vez sería así:

[code lang="html"]

Este texto es rojo

[/code]

Ahora, ponemos ambos archivos en una misma carpeta y probamos abriendo en nuestro navegador el archivo html, aquí tenemos el resultado:

Ver ejemplo

Bueno, eso es todo en este capitulo, al siguiente veremos cuales son los diferentes estilos que podemos declarar en CSS, o al menos los más usuales.