---
id: bad87fee1348bd9aedf08805
title: Use CSS Selectors to Style Elements
challengeType: 0
videoUrl: ''
localeTitle: Usar los selectores de CSS para elementos de estilo
---
## Description
Con CSS, hay cientos de properties
de CSS que puedes usar para cambiar la apariencia de un elemento en tu página. Cuando ingresó <h2 style="color: red">CatPhotoApp</h2>
, estaba diseñando ese elemento h2
individual con inline CSS
, que significa Cascading Style Sheets
. Esa es una forma de especificar el estilo de un elemento, pero hay una mejor manera de aplicar CSS
. En la parte superior de tu código, crea un bloque de style
como este: <estilo>
</style>
Dentro de ese bloque de estilo, puede crear un CSS selector
para todos los elementos h2
. Por ejemplo, si desea que todos los elementos h2
sean rojos, debe agregar una regla de estilo que se vea así: <estilo>
h2 {color: rojo;}
</style>
Tenga en cuenta que es importante tener 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.
## Instructions
Borre el atributo de estilo del elemento h2
y, en su lugar, cree un bloque de style
CSS. Agrega el CSS necesario para convertir todos los elementos h2
azul.
## Tests
```yml
tests:
- text: Elimine el atributo de estilo de su elemento h2
.
testString: 'assert(!$("h2").attr("style"), "Remove the style attribute from your h2
element.");'
- text: Crear un elemento de 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úrese de que la declaración h2
su 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úrese de que todos sus elementos de style
sean válidos y tengan una etiqueta de cierre.
testString: 'assert(code.match(/<\/style>/g) && code.match(/<\/style>/g).length === (code.match(/