freeCodeCamp/curriculum/challenges/espanol/01-responsive-web-design/basic-css/prioritize-one-style-over-another.md

id, title, challengeType, videoUrl, forumTopicId, dashedName

id	title	challengeType	videoUrl	forumTopicId	dashedName
bad87fee1348bd9aedf08756	Prioriza un estilo por sobre otro	0	https://scrimba.com/c/cZ8wnHv	18258	prioritize-one-style-over-another

--description--

A veces los elementos HTML reciben múltiples estilos que entran en conflicto entre sí.

Por ejemplo, tu elemento h1 no puede ser verde y rosado al mismo tiempo.

Veamos qué ocurre cuando creamos una clase que hace que el texto sea rosado ("pink"), y luego se la aplicamos a un elemento. ¿Sobreescribirá nuestra clase la prioridad CSS color: green; del elemento body?

--instructions--

Crea una clase CSS adicional llamada pink-text que asigne a un elemento el color rosado ("pink").

Asigna a tu elemento h1 la clase pink-text.

--hints--

Tu elemento h1 debe incluir la clase pink-text.

assert($('h1').hasClass('pink-text'));

Tu <style> debería tener una clase CSS pink-text que cambie su color.

assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;?\s*\}/g));

Tu elemento h1 debe ser de color rosado ("pink").

assert($('h1').css('color') === 'rgb(255, 192, 203)');

--seed--

--seed-contents--

<style>
  body {
    background-color: black;
    font-family: monospace;
    color: green;
  }
</style>
<h1>Hello World!</h1>

--solutions--

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