En otras lecciones ya nos encontramos con selectores por etiqueta y por clase. Un selector es una descripción de a qué se debe aplicar un estilo CSS específico. Pueden ser bastante complejos, indicando no solo un elemento específico, sino también el lugar donde se encuentra o dentro de qué etiqueta. Recordemos el selector por clase. Se aplica a cualquier elemento cuya clase hayamos especificado.
<p class="text-bold">Texto en negrita dentro de un párrafo</p>
<div class="text-bold">Otro texto dentro de un elemento de bloque simple. Como también tiene la clase text-bold, se mostrará en negrita</div>
.text-bold {
font-weight: bold;
}
La propiedad font-weight con el valor bold establecerá el texto en negrita. Aprenderás más sobre esta propiedad cuando empieces a estudiar el diseño de textos. Por ahora, lo más importante es que este estilo se aplicará tanto al párrafo como al elemento de bloque <div>, ya que ambos tienen la misma clase.
Otro selector que ya conoces es el selector por etiqueta. Su propósito es establecer estilos para todas las etiquetas en la página. Esto es muy útil si necesitas establecer estilos iniciales para las etiquetas en todo el proyecto. Por ejemplo, establecer la fuente, su tamaño y su peso.
p {
color: #333;
font: 18px/1.5 sans-serif;
}
Utiliza el selector por etiqueta solo para establecer reglas globales en todo el proyecto. Esto es importante, ya que los estilos se aplicarán a todas las etiquetas a la vez y podrías sobrescribir estilos existentes por accidente.
Otra forma de establecer estilos es mediante el uso de un selector por identificador. Usando el atributo id, puedes especificar un nombre único para cualquier elemento en la página. Si este nombre está especificado, es posible acceder al elemento utilizando un selector por identificador. Para ello, se utiliza un selector de la forma #nombre_identificador
<p id="red">Párrafo rojo</p>
#red {
color: red;
}
Es importante recordar que el valor del identificador es único. En la página solo puede haber un elemento con un valor específico. Por ejemplo, en el ejemplo anterior ya se ha utilizado el identificador red en el párrafo. No puede haber otro elemento igual en la página. Por esta razón, los identificadores se utilizan para envoltorios más grandes, como el encabezado principal del sitio, pero esto no es un requisito obligatorio.
En el editor, crea un párrafo con el identificador red y la clase bold. Establece las siguientes propiedades:
Si te quedaste atascado, es el momento perfecto para hacer una pregunta en las "Discusiones".
* Asegúrate de incluir la salida de las pruebas. Sin ella, es casi imposible entender qué está mal, incluso si muestras tu código. Los programadores tienen dificultades para ejecutar el código en su mente, pero casi siempre es posible entender a dónde mirar a partir del error que recibiste.
Las pruebas están diseñadas de manera que verifican la solución de diferentes maneras y con diferentes datos. A menudo, una solución funciona con ciertos datos de entrada pero no con otros. Para entender este punto, revisa la pestaña "Pruebas" y presta atención a los mensajes de error, que suelen contener pistas.
Esto es normal 🙆. En programación, una tarea puede tener muchas soluciones diferentes. Si tu código pasa la prueba, cumple con los requisitos de la tarea.
En raras ocasiones, la solución puede estar ajustada para pasar las pruebas, pero esto suele ser evidente.
Crear materiales de aprendizaje comprensibles para todos es bastante difícil. Hacemos nuestro mejor esfuerzo, pero siempre hay margen para mejorar. Si encuentras material que no entiendes, describe el problema en las "Discusiones". Es ideal si puedes formular los aspectos que no entiendes en forma de preguntas. Por lo general, necesitamos unos días para hacer mejoras.
Por cierto, tú también puedes contribuir a mejorar los cursos: en la parte inferior hay un enlace al código fuente de las lecciones, que se puede modificar directamente en el navegador.