Hojas de estilo CSS: el “santo grial” de la maquetación web (control total)

Como te he mostrado en artículos anteriores, los 2 elementos FUNDAMENTALES para pasar exitosamente de un Psd a Html, son: el lenguaje HTML y los estilos CSS.

¿Pero… porqué los estilos CSS son “el santo grial” de la maquetación web?
Cuando termines de leer este artículo, tendrás CONTROL TOTAL de tu maquetación web.

Aquí mismo aprenderás un secreto fundamental de la maquetación web: como separ el diseño del contenido. Esto, como te dije mas arriba, te dará un control TOTAL.

INTRODUCCION A LAS HOJAS DEL ESTILO CSS

Muchos nombran los estilos CSS pero generalmente los utilizan erroneamente en sus sitios web, y no le sacan el mayor provecho posible.
Estas hojas de estilo abrieron un abanico inmenso de posibilidades para los creadores de sitios web; se comenzaron a implementar en los navegadores en las versiones 3 y 4, y con cada nueva versión de los mismos, los fabricantes de navegadores ampliaban la compatibilidad con estos estilos.

En 1996 las CSS1 fueron recomendadas por el W3C (World Wide Consortium – http://www.w3c.org) En 1998 surgió la nueva recomendación sobre la version 2 de estas hojas de estilos, el CSS2.

¿PARA QUE SIRVEN?

Con los estilos CSS se define la apariencia de los elementos que se repetirán a lo largo de todo el sitio. Por ejemplo: se puede definir (por punica vez) el formato de los titulos, asignándole el tipo y tamaño de tipografia, color y estilo. Luego, todos los titulos del sitio web, usarán estos estilos para los titulares.
Si más adelante decidimos cambiar el estilo de estos titulares, solamente modificamos el código CSS y automaticamente TODOS los títulos de nuestro sitio web cambiarán, sin necesidad de cambiarlos uno por uno. (nótese el potencial de estos estilos)

Más allá de poder formatear un texto, los CSS nos permiten modificar la apariencia de cualquier elemento dentro de nuestro sitio web, por ejemplo:
– Definir un área dentro de un documento y asignarle un color o una imagen de fondo.
– Modificar los márgenes de la página.
– Posicionar exactamente cualquier elementos dentro de nuestra página, sin depender del tamaño de la misma, ni del navegador.
– Posicionar imágenes de fondo en cada página o en cada área que querramos.

…y un sinfín de variantes más. Estos CSS tienen un poder increible y nos dan un CONTROL TOTAL cuando deseamos pasar un Psd a Html de forma correcta.

PORQUE UTILIZAR LAS HOJAS DE ESTILO CSS
Aquí un resumen de las principales ventajas al utilizar CSS.

  • Nos permite modificar la presentación y apariencia de TODOS los elementos de nuestro sitio web, sin tener que modificar el código HTML.
  • Es un lenguaje muy intuitivo, fácil y muy resumido con los cual el código a escribir es mínimo.
  • Posee comando muy potentes y precisos, lo cual nos dá un control total a la hora de maquetar con mucha presición un documento web.
  • Podemos generar un archivos de estilos externo donde guardar las características de cada uno de los elementos de nuestro sitio web, y solo modificar este archivo para cambiar la apariencia de nuestro sitio.
  • Su estructura nos permite ahorrar mucha horas de escritura de código.
  • Es 100% compatible con cualquier navegador web (Safari, Firefox, IE, Chrome, etc etc

En el próximo artículo, mostraré un ejemplo práctico de la utilizacion del CSS y su aplicación en el lenguaje estructural XHTML.

RECUERDA que el CSS es el elementos fundamental para tener éxito cuando convertimos un psd a html.

Me gustaría que nos dejes tus comentarios y dudas aquí debajo, asi podré ayudarte en la maquetación web.

Saludos!!
Cristian

Anuncios

2 pensamientos en “Hojas de estilo CSS: el “santo grial” de la maquetación web (control total)

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s