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

id, title, localeTitle, challengeType, videoUrl

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

Description

Por lo tanto, hemos comprobado que las declaraciones de identificación anulan las declaraciones de clase, independientemente de dónde estén declaradas en su elemento de style CSS. Hay otras formas en que puede anular CSS. ¿Recuerdas los estilos en línea?

Instructions

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 pink-text en su elemento h1 .

Tests

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>

Solution

// solution required