Escrito por nuestro mentor de Java, Raül Martínez.
En esta edición de la serie Technobabble seguiremos hablando sobre aprender CSS, pero esta vez nos fijaremos en cómo seleccionar elementos. Si te has perdido el artículo anterior, en el que hablamos de por qué CSS siempre está relacionado con HTML, deberías empezar por allí antes de adentrarte en los “selectores”. Como hay muchas cosas que aprender con CSS, hemos dividido el tema en tres artículos: selectores simples, selectores combinados y selectores complejos, dándote tiempo para probar cosas y construir en base a lo que has aprendido.
Aprender CSS no tiene por qué ser difícil. En este artículo nos fijaremos en los selectores simples o selectores de elementos, que son los que hacen referencia directamente a un elemento. Así que, sin mas dilación, ¡a por ello!
Este es el más directo de todos. Simplemente utiliza el nombre del selector, como harías con HTML.
Un selector de “clase” siempre empieza con un punto “.”. Las clases se utilizan para seleccionar un grupo de elementos en un momento, incluso si son de diferentes tipos. Puedes utilizar un número ilimitado de clases y puedes tener más de una clase por cada elemento simplemente separándolos con espacios.
Un selector “id” solo puede utilizarse una vez y solo puede haber un elemento con el mismo id. Se utiliza para definir un elemento específico.
Importante: si se utiliza más de una vez, el mismo id puede mostrarse de forma diferente en los distintos navegadores.
Los id se seleccionan del CSS con un hashtag “#”.
Podemos aplicar una regla CSS a todos los elementos de una página web pero, a veces, en páginas muy grandes, el funcionamiento se puede ver afectado. Un buen uso sería cambiar la familia de letra o el color del texto. Con el ejemplo anterior tendríamos algo así.
Así que ya lo tienes: Aprender CSS parte 2, selectores simples. Ya no parece tan complicado, ¿verdad? En el próximo artículo, jugaremos con la combinación de los selectores simples y lo haremos de forma un poco más específica.
¿Te interesaría aprender CSS, HTML y otros lenguajes de programación como Java? Echa un vistazo a nuestro bootcamp de Desarrollo Web con Java.