15 agosto 2011

Guía rápida y breve para entender cómo funciona el CSS


Cuando seguimos algún tutorial, es común que se use CSS, pero si no sabemos interpretar lo que dicen esos códigos, difícilmente podemos editarlos o empezar a crearlos para hacer algún cambio en nuestra plantilla.

Es bueno saber las definiciones, y quien mejor que la W3C para decirnos que es CSS, ahora, veamos de manera simple, cómo funciona eso que se llama CSS.

Es fácil entenderlo, vamos a imaginarnos que nosotros somos "Navegadores", (yo quiero ser cualquiera, menos Internet Explorer Sonrisa  )  y que para interpretar el CSS de la plantilla, sólo hacemos dos preguntas:

-¿A quién se lo hago?
-¿Qué le hago?

Con: ¿A quién se lo hago?, quiero decir: "a quien" se le aplicarán los estilos en la plantilla, y en el CSS, es decir especificamos a quién se le aplicará algo, en el CSS se le llama: "selectores".

Con: ¿Qué le hago?, quiero decir, que "propiedades" tiene un elemento o selector de la plantilla, que le darán cierta apariencia, y que podrá ser vista en la pantalla, por medio del  navegador.


¿Y cómo declaramos el CSS?

Este es el orden en el que se escribe:

selector {
propiedad: valor;
propiedad: valor;
propiedad: valor;
...
}

Y un ejemplo, sería este:
#outer-wrapper {
width: 980px;
margin: 0 auto;
padding: 0;
}

Si observas, puedes ver que:
  • Los estilos serán aplicados al outer-wrapper
  • Todas las propiedades están dentro de unas llaves, la de abertura y la de cierre: {...}
  • Cada propiedad tiene un valor, el cual termina con punto y coma ";", aunque en la útima propiedad-valor, no necesita llevarla (es opcional)
  • Las propiedades llevan dos puntos ":", antes del valor

Un poco más sobre los selectores

Hay de muchos tipos de selectores, por ejemplo, la envoltura de la cabecera de nuestro blog o header-wrapper (en inglés), es un "selector de ID" (puedes leer más sobre los selectores en el enlace de arriba que dice "selectores")

#header-wrapper {
...
}

Bien, ya tenemos un selector identificado, que es el header-wrapper, entonces "hagámosle algo", y lo que haremos es darle un ancho y un alto, entonces, tienes que "declarar" las propiedades de: "ancho y alto", y ponerle los "valores" que quieras, y eso lo harías así:

#header-wrapper {

width: 980px; /*El ancho de la envoltura de la cabecera*/

height: 200px; /*El alto de la envoltura de la cabecera*/

}

Si traducimos el código anterior textualmente, diría algo como esto:

"El header-wrapper mide 980 pixeles de ancho y 200 pixeles de alto".

...y los navegadores preguntarían...

¿a quién se lo hago? ,
...y la respuesta que da el CSS---> al header-wrapper.

¿qué le hago?
...y la respuesta que da el CSS---> muestro el header-wrapper con 980 pixeles de ancho, y 200 pixeles de alto...

Lo mismo pasa con todo el CSS que tenemos en la plantilla, los navegadores interpretan sin mas remedio, las propiedades declaradas en cada selector y muestran los resultados en la pantalla...

Suena fácil ¿verdad?, claro que es importante conocer cuaáes son las propiedades que existen en CSS, y si estas son soportadas o no por los distintos navegadores, para decidir si usarlas y cómo usarlas.

Conclusiones:

El CSS nos permite tener más control sobre la apariencia de nuestro blog, y es fácil de entender, claro que requiere de práctica y conocimiento, pero este puede ser adquirido con voluntad, y ganas.

Siéntete libre de compartir tus ideas, experiencias o inquietudes, así nos beneficiamos todos.

Artículos recomendados:

Gracias por compartir tu comentario y hacernos saber tu opinión.