freeCodeCamp/curriculum/challenges/spanish/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.spanish.md

id, title, challengeType, videoUrl, localeTitle

id	title	challengeType	videoUrl	localeTitle
bad87fee1348bd9aedf08805	Use CSS Selectors to Style Elements	0		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

tests:
  - text: Elimina el atributo de estilo de tu elemento <code>h2</code> .
    testString: 'assert(!$("h2").attr("style"), "Remove the style attribute from your <code>h2</code> element.");'
  - text: Crea un elemento <code>style</code> .
    testString: 'assert($("style") && $("style").length > 1, "Create a <code>style</code> element.");'
  - text: Tu elemento <code>h2</code> debe ser azul.
    testString: 'assert($("h2").css("color") === "rgb(0, 0, 255)", "Your <code>h2</code> element should be blue.");'
  - text: Asegúrate de que la declaración <code>h2</code> 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 <code>h2</code> declaration is valid with a semicolon and closing brace.");'
  - text: Asegúrate de que todos tus elementos <code>style</code> sean válidos y tengan una etiqueta de cierre.
    testString: 'assert(code.match(/<\/style>/g) && code.match(/<\/style>/g).length === (code.match(/<style((\s)*((type|media|scoped|title|disabled)="[^"]*")?(\s)*)*>/g) || []).length, "Make sure all your <code>style</code> elements are valid and have a closing tag.");'

Challenge Seed

<h2 style="color: red;">CatPhotoApp</h2>
<main>
  <p>Haga clic aquí para ver más <a href="#">fotos de gatos</a>.</p>

  <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

  <div>
    <p>Cosas que los gatos aman:</p>
    <ul>
      <li>pellizco de gato</li>
      <li>punteros laser</li>
      <li>lasaña</li>
    </ul>
    <p>3 cosas que odian los gatos:</p>
    <ol>
      <li>tratamiento de pulgas</li>
      <li>trueno</li>
      <li>otros gatos</li>
    </ol>
  </div>

  <form action="https://freecatphotoapp.com/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
    <label><input type="checkbox" name="personality" checked> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Energetic</label><br>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</main>

Solución

// solution required