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
) 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.
Etiquetas:CSS,Diseño,Tutoriales