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

id, title, challengeType, videoUrl, forumTopicId, dashedName

id	title	challengeType	videoUrl	forumTopicId	dashedName
bad87fee1348bd9aedf06756	Sobrescrever estilos de classe com estilos inline	0	https://scrimba.com/c/cGJDRha	18252	override-class-declarations-with-inline-styles

--description--

No desafio anterior, vimos que os estilos declarados com id sobrescrevem as declarações feitas com classes, independente de onde as classes foram declaradas no elemento style.

Mas existem outras maneiras de sobrescrever o CSS. Você se lembra dos estilos inline?

--instructions--

Use um estilo inline para tentar tornar o elemento h1 branco. Lembre-se, estilos inline são declarados dessa forma:

<h1 style="color: green;">

Não apague as classes blue-text e pink-text do elemento h1.

--hints--

O elemento h1 deve ter a classe pink-text.

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

O elemento h1 deve ter a classe blue-text.

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

O elemento h1 deve ter o id orange-text.

assert($('h1').attr('id') === 'orange-text');

O elemento h1 deve ter um estilo inline.

assert(document.querySelector('h1[style]'));

O elemento h1 deve ser branco.

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

--seed--

--seed-contents--

<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>

--solutions--

<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" style="color: white">Hello World!</h1>