Separando el diseño del contenido, con los estilos CSS (control TOTAL)

Vimos en artículos anteriores,  que los 2 elementos fundamentales para pasar exitosamente de un PSD a HTML, son: el lenguaje HTML y los estilos CSS.

¿Pero… para qué sirven los estilos CSS y porque son tan importantes en la maquetación web?

En este artículo aprenderás LA RAICES  de la maquetación web: Como separar el diseño del contenido.

Esto te dará un control total….

LAS HOJAS DE ESTILOS 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 – www.w3c.org) En 1998 surgió la nueva recomendación sobre la version 2 de estas hojas de estilos, el CSS2.

** REPORTE GRATUITO:
Cómo convertir un PSD en HTML en 5 pasos.
Haz Click AQUI para Descargarlo AHORA.

¿PARA QUE SIRVEN LOS ESTILOS CSS?

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 elemento fundamental para tener éxito cuando convertimos un psd a html.
——————————————————————
Me gustaría que me dejes tus comentarios y dudas aquí debajo, asi podré ayudarte con tu maquetación web.

Saludos!!
Cristian

Recurso Recomendado: