El lenguaje CSS define la presentación del contenido de un archivo HTML o XHTML.
Un estilo CSS es un conjunto de propiedades y valores que se podrán aplicar a una selección de texto, párrafo, imagen, formulario, o cualquier etiqueta html.
El uso de los estilos CSS facilita el diseño de un sitio, de la misma manera que los estilos de Quark para diseñar una publicación impresa. Los estilos CSS se pueden guardar en cada página HTML o en un archivo CSS independiente. Esta segunda opción es la más indicada porque los estilos allí guardados estarán disponibles para aplicar y editar desde cualquier página del sitio. La modificación de cualquier estilo guardado en la hoja de estilos CSS se aplica automáticamente en todas las páginas HTML que lo utilicen.
1- En la ventana Estilos CSS hacer clic en Nueva regla CSS. Hay tres opciones de selector: Clase, etiqueta y avanzadas.
Clase: crea un estilo personalizado. Si este estilo se aplica por ejemplo a un párrafo, se le agregará a la etiqueta <P> el atributo class. Si el estilo se aplica a una selección de texto que no tiene una etiqueta HTML que lo encierre, entonces el Dreamweaver agregará una etiqueta <span> que delimite la selección, y en la que se aplicará el atributo class.
Los nombres de los estilos class deben comenzar con punto.
Etiqueta: redefinen el formato de una etiqueta HTML: <body> <img> <h1> etc. Por ejemplo se puede definir que la etiqueta <body> tenga márgenes "0" y una imagen de fondo. De esta manera cada página nueva vinculada a la hoja de estilos CSS tendrá márgenes "0" y la imagen de fondo.
Avanzadas: con este selector se pueden definir los estilos para los enlaces, o para etiquetas con un atributo de ID. Por ejemplo el estilo #ampliaciones se aplicará en todas las etiquetas que contengan ID="ampliaciones".
El estilo nuevo creado se puede guardar sólo en el documento en el que se está trabajando o en una hoja de estilos nueva (es lo recomendado). En ese caso, aparecerá por única vez una ventana para definir el nombre y la ubicación de este archivo que puede llamarse estilos.css.
2- En la ventana Definición de regla, se definen las propiedades y valores para ese estilo.
3- Los estilos de etiqueta se aplican solos. Los estilos clase se aplican manualmente desde la ventana Propiedades. Es conveniente seleccionar de la barra de código la etiqueta HTML a la que se quiere aplicar el estilo.
4- Cuando se crea un documento nuevo, es necesario vincularlo a la hoja de estilos desde la ventana Estilos CSS para poder utilizar y editar los estilos creados. Ese vínculo queda escrito en la cabecera de cada HTML con el siguiente código:
<link href="estilos.css" rel="stylesheet" type="text/css">
Ultima actualización de este apunte: mayo 2008
Laura Chuburu - Diseñadora en Comunicación Visual UNLP - DISEÑO WEB
lchuburu@yahoo.com.ar / Tel: 221 427-5619 / Cel: 221 15 538-8940 / 53 Nº 610 of. 5 (e/ 7 y 8) La Plata - Buenos Aires