Diseño web funcional: Hojas de estilo "CSS"

Logo IEDA

2º de Bachillerato

Tecnologías de la Información y Comunicación

Contenidos

Diseño web funcional:

Hojas de estilo "CSS"

css
Imagen en Wikipedia de  www. Licencia CC

En un principio  diseñar una página web consistía en unir todo tipo de etiquetas, mezclando el diseño de estructura con el formato, hoy en día la separación de la estructura de un documento (HTML)  de su diseño o presentación (CSS) ofrece múltiples ventajas.

En el trimestre anterior estudiamos las etiquetas fundamentales de HTML, incluso estamos familiarizados con algunas etiquetas del nuevo estándar , el HTML5. ¿Sabemos ya diseñar un sitio web? Sólo parcialmente. En la actualidad ya no basta con manejar HTML para realizar estas tareas; necesitamos conocer también el estándar que lo complementa, CSS, acrónimo de hojas de estilo en cascada.

¿Qué ventajas nos ofrece las CSS? Su utilización es muy práctica ya que  un solo archivo CSS puede modificar el aspecto de varios documentos HTML, de modo que, en caso de realizar cambios en el diseño general, solo sería necesario modificar dicho archivo y no cada uno de los documentos HTML.

¿Qué aprenderemos en este tema? Crearemos nuestras propias CSS comprobando que efecto tiene tras vincularlas con páginas HTML. En el siguiente ejemplo observaremos cómo cambia una misma página HTML tras asociarla a diferentes CSS que definen cada una un estilo distinto.  Para ver los efectos hace clic en las distintas hojas de estilo del menú, demoCss. 

Para saber más

css3html5
Imagen en Wikipedia de  Dayphre. Licencia CC

HTML5 & CSS3

El uso de hojas de estilo es obligatorio en las páginas web creadas con HTML5, este estándar define la estructura de la página y el CSS el estilo y el diseño.

El navegador, a su vez, tomará cada una de las partes y las mezclará, dando el resultado deseado: una página con sentido semántico gracias a HTML y con una apariencia estética apropiada mediante el estilo CSS.

Las hojas de estilo han ido evolucionando desde la primera versión del estándar en el 2001. En la actualidad la versión 3 de este conjunto de normas está aún en desarrollo, pero  la mayoría de los navegadores son capaces de ejecutar todas las propiedades principales de CSS3.