Creación Web

Un pequeño juego para aprender selectores en CSS

Descubre cómo funcionan los selectores en CSS y cómo puedes aprender mejor los conceptos gracias a un sencillo juego online.

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. Sea como mar, lo que si va a llevar son consejos que aplicar - piopíalo    . ¡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.

Yo en el cole quitaría alguna asignatura (y tu sabes cual) y pondría HTML y CSS. - piopíalo    

Powered by Vcgs-Toolbox

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!!).

Acerca del autor

Víctor Campuzano

Growth Hacker no soy, pero lo vivo. De mi blog no vivo, pero aquí si que soy como soy. Marketing Digital, Creatividad y Blogging con pasión y desenfado. Alumno del Postgrado de Growth Hacking por IEBS.

Ahora es tu momento

*

8 comentarios

  • Yo apostaría por un lenguaje de programación universal para impartir en las escuelas. Aunque claro, para eso las empresas tendrían que ponerse de acuerdo, y si ya de por sí es complicado crear un estándar, hacer que todo se haga igual, ni te cuento.

    • Ya te digo Fran. A tu petición yo me uno y creo que un pseudocódigo podría bastar y ser más que suficiente para prepararte por si alguna vez tienes que entender, interpretar o escribir un código.

      Saludines y gracias por el comentario! 🙂

  • Seguro que si esto se lo dejas a un crío, te lo hace enseguida. Pero si a los ratones ya nos cuenta entender el lenguaje humano, imagina el ccsero…

    • Jejejejeje. Toda la razón #Jerby, aunque el final, cuando uno “busca queso”, termina dominando los lácteos… Toma ya!! Que me ha salido un juego de palabras ratuno!! 🙂

      Abrazoooossss!

  • Buenísimo Víctor!

    Me ha encantado el jueguecito y es genial para aquellos que tienen un nivel de CSS bajo.

    Lo compartiré con los compañeros del curro que seguro que les encantará!

    Por cierto, dentro de poco nos veremos en Quondos 🙂

    Un saludo!

  • Me encanta el juego, voy por el ejercicio 16, y están mostrando formas que yo había visto pero no sabía utilizar, muchas gracias.

    ¿No sabrás alguno otro para php (para editar el wp) 🙂 ?

    Un saludo, y buen finde.

Uso de cookies

Esta web utiliza cookies propias y de terceros, como Google Analytics, para optimizar su navegación y realizar tareas de análisis y las pertenecientes a WordPress. Advierto que si continuas navegando, aceptas su uso. Puede cambiar la configuración, desactivarlas u obtener más información.

ACEPTAR
Aviso de cookies