Las hojas de estilos en cascada (CSS) son un conjunto de reglas de formato que determinan el aspecto del contenido de una página Web. La utilización de estilos CSS para aplicar formato a una página permite separar el contenido de la presentación.El contenido de la página (el código HTML) reside en el archivo HTML, mientras que las reglas CSS que definen la presentación del código residen en otro archivo (una hoja de estilos externa) o en otra parte del documento HTML (normalmente, en la sección head). La separación del contenido y la presentación hace que resulte mucho más fácil mantener el aspecto del sitio desde una ubicación central, ya que no es necesario actualizar las propiedades de las distintas páginas cuando se desea realizar algún cambio. La separación del contenido y la presentación también depura y simplifica el código HTML, lo que disminuye el tiempo de carga en los navegadores y agiliza la navegación para personas con problemas de accesibilidad (por ejemplo, para los usuarios que utilicen lectores de pantalla).
PARA QUÉ UTILIZAR CSS:
Control del texto: El lenguaje CSS ofrece gran flexibilidad y control para lograr el aspecto exacto que se desea para la página. Con CSS, podemos controlar numerosas propiedades del texto, entre ellas las fuentes y los tamaños de fuente específicos; negrita, cursiva, subrayado y sombras de texto; color de texto y de fondo; color y subrayado de vínculos; etc. Si utilizamos CSS para controlar las fuentes, también conseguirá un tratamiento más coherente del diseño y el aspecto de la página en múltiples navegadores.
Formato y posición de los bloques de la Web: Además de para dar formato al texto, puede utilizar CSS para definir el formato y la posición de elementos de nivel de bloque (block-level) de una página Web. Un elemento de nivel de bloque es un elemento de contenido independiente que normalmente está separado por una nueva línea en el código HTML y que tiene visualmente el formato de un bloque. Por ejemplo, las etiquetas h1, p y div generan elementos de nivel de bloque en una página Web. Puede ajustar márgenes y bordes para elementos de nivel de bloque, situarlos en una ubicación concreta, añadirles color de fondo, colocar texto flotante alrededor de ellos, etc. La manipulación de elementos de nivel de bloque es, en definitiva, la forma en que se establece el diseño de las páginas con CSS.
LA ETIQUETA DIV:
Un diseño de página CSS utiliza el formato de hojas de estilos en cascada, en lugar de las tablas o marcos HTML tradicionales, para organizar el contenido de un sitio Web. El elemento básico del diseño CSS es la etiqueta div, una etiqueta HTML que, en la mayoría de los casos, actúa como contenedor de texto, imágenes y otros elementos de página.
Cuando crea un diseño CSS, coloca etiquetas div en la página, añade contenido a las mismas y las sitúa en distintos lugares. A diferencia de las celdas de tabla, que sólo pueden situarse en algún lugar dentro de las filas y columnas de la tabla, las etiquetas div aparecen en cualquier lugar de una página Web. Puede situar etiquetas div de forma absoluta (especificando las coordenadas x e y) o de forma relativa (especificando su distancia con respecto a otros elementos de la página). También puede situar etiquetas div especificando elementos flotantes, rellenos y márgenes (el método preferido conforme al estándar Web actual).
La creación de diseños CSS desde cero puede ser una tarea difícil debido a la gran cantidad de formas de hacerlo que existen. Puede crear un diseño CSS sencillo de dos columnas estableciendo elementos flotantes, márgenes, rellenos y otras propiedades CSS mediante un número casi infinito de combinaciones. Además, el problema de la reproducción en distintos navegadores hace que determinados diseños CSS se muestren correctamente en algunos navegadores y no en otros. Dreamweaver facilita la creación de páginas con diseños CSS con 16 diseños predefinidos que funcionan en distintos navegadores.
La utilización de los diseños CSS predefinidos que vienen con Dreamweaver es la forma más fácil de crear una página con un diseño CSS, pero también puede crear diseños CSS mediante los elementos con posición absoluta (elementos PA) de Dreamweaver. En Dreamweaver, un elemento PA es un elemento de página HTML (en concreto, una etiqueta div o cualquier otra etiqueta) que tiene una posición absoluta asignada. Sin embargo, la limitación de los elementos PA de Dreamweaver radica precisamente en que tienen una posición absoluta, lo que hace que sus posiciones nunca se ajusten a la página en función del tamaño del navegador.
Si se considera un usuario avanzado, también puede insertar etiquetas div de forma manual y aplicarles estilos de posición CSS para crear los diseños de las páginas.
ESTRUCTURA DEL DISEÑO DE PÁGINAS CON CSS:
El elemento básico del diseño CSS es la etiqueta div, una etiqueta HTML que, en la mayoría de los casos, actúa como contenedor de texto, imágenes y otros elementos de página. En los siguientes ejemplos se muestra una página HTML que contiene tres etiquetas div independientes: una etiqueta de “contenedor” grande y otras dos etiquetas (una de barra lateral y una de contenido principal) dentro de la etiqueta de contenedor.
A. Div de contenedor B. Div de barra lateral C. Div de contenido principal
A continuación se incluye el código de las tres etiquetas div en el HTML:
LA REGLA #CONTAINER:
La siguiente regla CSS, que puede residir en el encabezado del documento o en un archivo CSS externo, crea reglas de estilo para la primera etiqueta (la etiqueta de “contenedor”) div de la página:
Etiqueta div de contenedor, 780 píxeles, sin margen
A. Texto alineado a la izquierda B. Fondo blanco C. Borde negro sólido de 1 píxel
LA REGLA #SIDEBAR:
La siguiente regla CSS crear reglas de estilo para la etiqueta div de barra lateral:
Div de barra lateral, flotación a la izquierdo
A. Ancho de 200 píxeles B. Relleno superior e inferior de 15 píxeles
LA REGLA #MAINCONTAINER:
Por último, la regla CSS para la etiqueta div de contenedor principal finaliza el diseño:
Los resultados de aplicar la regla a la etiqueta div mainContent son los siguientes:
Div de contenido principal, margen izquierdo de 250 píxeles
A. Relleno a la izquierda de 20 píxeles B. Relleno a la derecha de 20 píxeles C. Relleno inferior de 20 píxeles
El código completo es el siguiente:
