freeCodeCamp/curriculum/challenges/spanish/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.spanish.md

id	title	challengeType	videoUrl	localeTitle
bad87fee1348bd9aedf06756	Override Class Declarations with Inline Styles	0		Anular declaraciones de clase con estilos en línea

Descripción

Así que hemos comprobado que las declaraciones de identificación anulan las declaraciones de clase, independientemente de dónde se declaren en su elemento de style CSS. Hay otras formas en que puedes anular CSS. ¿Recuerdas los estilos en línea?

Instrucciones

Use un inline style para tratar de hacer que nuestro elemento h1 blanco. Recuerde, los estilos de línea se ven así: <h1 style="color: green;"> Deje las clases de pink-text blue-text y pink-text en su elemento h1 .

Pruebas

tests:
  - text: Su elemento <code>h1</code> debe tener la clase <code>pink-text</code> .
    testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
  - text: Su elemento <code>h1</code> debe tener la clase <code>blue-text</code> .
    testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");'
  - text: Su elemento <code>h1</code> debe tener el ID de <code>orange-text</code> .
    testString: 'assert($("h1").attr("id") === "orange-text", "Your <code>h1</code> element should have the id of <code>orange-text</code>.");'
  - text: Dale a tu elemento <code>h1</code> un estilo en línea.
    testString: 'assert(document.querySelector("h1[style]"), "Give your <code>h1</code> element an inline style.");'
  - text: Su elemento <code>h1</code> debe ser blanco.
    testString: 'assert($("h1").css("color") === "rgb(255, 255, 255)", "Your <code>h1</code> element should be white.");'

Challenge Seed

<style>
  body {
    background-color: black;
    font-family: monospace;
    color: green;
  }
  #orange-text {
    color: orange;
  }
  .pink-text {
    color: pink;
  }
  .blue-text {
    color: blue;
  }
</style>
<h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>

Solución

// solution required