Descubre un sencillo juego que te ayudará a comprender cómo funcionan los selectores en CSS para aplicar estilos a elementos concretos en tus webs.

¡Hola! ¿Sabes quien soy? @vicampuzano ¡!!!!!! Jajajajajaja. Es que si no no me quedaba agustito yo. Que sepas que soy yo, el mismo de siempre, aunque haya estado “desaparecifortunado” últimamente. Es que no veas la de cosas que me han pasado. Pero al final, todo mas o menos bien. Por eso hoy vengo un poquito gamberrete, veremos a ver el post que sale.

Post que, por cierto, voy a intentar hacer rápido y luego ya vemos si repetimos. Que me sale largo, pos largo. Que me sale corto, pos no me lo creo. [piopialo]Sea como mar, lo que si va a llevar son consejos que aplicar[/piopialo]. ¡Toma ya! Esa frasecica, además de una triple rima (también conocido como pareado-do), lleva un juego de palabras oculto. ¿Lo has pillado? ¿Si? Sea como mar. ¿No? ¿Cómo que no?

Total, que hoy te voy a presentar un juego que te ayudará a comprender un poco mejor cómo funciona el CSS y cómo puedes aplicar estilos a elementos concretos de tus páginas webs.

¿Por qué necesito saber (que no dominar) CSS?

Cheeeeeeeee! Pande vas que te estoy viendo! ¿Ya te ibas pensando que esto no es para ti? Pues lo siento mucho pero creo que equivocas.

[piopialo vcboxed=»1″]Yo en el cole quitaría alguna asignatura (y tu sabes cual) y pondría HTML y CSS.[/piopialo]

Sea cual mar (y van dos, que me río – ostrás, jajajaja, ahora de agua dulce!) tu profesión,  si estás aquí probablemente es porque tengas o quieras abrir un blog o una web. En cualquiera de estos casos, querrás, antes o después, cambiar cualquier aspecto visual y ahí será cuando necesitarás conocer CSS. No dominar, pero si al menos conocer.

Fíjate en la proliferación de los plugins visuales para construir páginas web, como el caso del Visual Composer, del que te hablaba en mi post sobre Cómo crear Landing Pages Profesionales sin ser Profesional y que tan de moda está. Si, tienes muchas opciones para crear una web sin tener “ni pizquica de idea” de código. Pero, si quieres aplicar un estilo, hacer un cambio de tamaño o color, necesitarás al menos conocer CSS. ¿Verdad?

La buena noticia es que CSS es muy fácil de aprender y de aplicar.

Conceptos básicos de CSS

Mi intención con este post no es darte una clase de CSS sino, lo más breve posible, enseñarte un jueguecito para que perfecciones tu conocimiento. Ahora bien, para poder jugar bien, creo que es importante entender la estructura básica de CSS:

Selector
{
   estilo: valor;
   estilo: valor;
}

Como ves, la estructura es muy sencilla. Primero defines el selector a qué elemento concreto o elementos quieres que se apliquen los estilos de dentro de las llaves { } . Dentro de éstas, podrás escribir tantos estilos como quieras que serán aplicados a ese selector. Así de sencillo.

Mientras que los estilos son más o menos fáciles de entender y no presentan mucha problemática, sobre todo por el hecho de que puedes buscarlo fácilmente por Internet (si pones CSS set background pues tienes miles de ejemplos), los selectores pueden ser definidos desde lo más genérico a los más concreto.

Por eso, entender cómo funcionan los selectores CSS te ayudará a poder definir, más adelante, los estilos que desees a los elementos que desees.

CSS Diner para aprender CSS jugando

Ea que voy acabando un post liviano. ¡Casi lo tengo! Claro, eso sacrificando mi predisposición a ponerte yo mismo aquí 5 o 50 ejemplos de CSS para que lo entiendas mejor. Pero bueno, para eso está este juego que te presento.

En 26 pruebas sencillas, incrementando la dificultad en cada una, verás una breve explicación de cómo funcionan los selectores y un ejercicio que te permitirá probar si lo estás comprendiendo.

El juego es una pasada y, de verdad, da igual que creas que sabes mucho de CSS porque igual algo se te cuela. Yo he tenido que mirar la ayuda en algunos de los últimos.

¿Aceptas el reto? ¿Te lo harás entero? ¿Coincides conmigo en que necesitas conocer, al menos un poquito, el funcionamiento de CSS? ¿Has pillado lo de sea como fuere que me río? ¡Cuenta cuenta! (Y cuenta, piji, que seguro que te ha sobrado tiempo!!).