--- id: bad87fee1348bd9aedf08805 title: Use CSS Selectors to Style Elements challengeType: 0 videoUrl: '' localeTitle: Usar los selectores CSS para dar estilo a los elementos --- ## Descripción
Con CSS, hay cientos de properties CSS que puedes usar para cambiar la apariencia de un elemento en tu página. Cuando ingresaste <h2 style="color: red;">CatPhotoApp</h2> , estabas dando estilo a ese elemento h2 con inline CSS , que significa Cascading Style Sheets . Esa es una forma de especificar el estilo de un elemento, pero existe una mejor manera de aplicar CSS . En la parte superior de tu código, crea un bloque de style como este:
<style>
</style>
Dentro de ese bloque de estilo, puedes crear un CSS selector para todos los elementos h2 . Por ejemplo, si deseas que todos los elementos h2 sean rojos, debes agregar una regla de estilo como esta:
<style>
h2 {color: red;}
</style>
Ten en cuenta que es importante usar llaves de apertura y cierre ( { y } ) alrededor de las reglas de estilo de cada elemento. También debe asegurarse de que la definición de estilo de su elemento se encuentre entre las etiquetas de estilo de apertura y de cierre. Finalmente, asegúrese de agregar un punto y coma al final de cada una de las reglas de estilo de su elemento.
## Instrucciones
Borra el atributo de estilo del elemento h2 y, en su lugar, crea un bloque de style CSS. Agrega el CSS necesario para dar a todos los elementos h2 color azul.
## Pruebas
```yml tests: - text: Elimina el atributo de estilo de tu elemento h2 . testString: 'assert(!$("h2").attr("style"), "Remove the style attribute from your h2 element.");' - text: Crea un elemento style . testString: 'assert($("style") && $("style").length > 1, "Create a style element.");' - text: Tu elemento h2 debe ser azul. testString: 'assert($("h2").css("color") === "rgb(0, 0, 255)", "Your h2 element should be blue.");' - text: Asegúrate de que la declaración h2 de tu hoja de estilo sea válida con un punto y coma y una llave de cierre. testString: 'assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g), "Ensure that your stylesheet h2 declaration is valid with a semicolon and closing brace.");' - text: Asegúrate de que todos tus elementos style sean válidos y tengan una etiqueta de cierre. testString: 'assert(code.match(/<\/style>/g) && code.match(/<\/style>/g).length === (code.match(//g) || []).length, "Make sure all your style elements are valid and have a closing tag.");' ```
## Challenge Seed
```html

CatPhotoApp

Haga clic aquí para ver más fotos de gatos.

A cute orange cat lying on its back.

Cosas que los gatos aman:

  • pellizco de gato
  • punteros laser
  • lasaña

3 cosas que odian los gatos:

  1. tratamiento de pulgas
  2. trueno
  3. otros gatos


```
## Solución
```js // solution required ```