Acabamos de provar que os navegadores lêem CSS de cima para baixo. Isso significa que, no caso de um conflito, o navegador usará a última declaração CSS. Mas ainda não terminamos. Existem outras maneiras de substituir o CSS. Você se lembra de atributos id? Vamos substituir suas classes de blue-text pink-text blue-text e tornar seu elemento h1 laranja, dando um id ao elemento h1 e, em seguida, estilizando esse id.

Dê ao seu elemento h1 o atributo id do orange-text . Lembre-se, os estilos de id são assim: <h1 id="orange-text"> Deixe as classes de pink-text blue-text pink-text em seu elemento h1 . Crie uma declaração CSS para o seu ID de orange-text em seu elemento de style . Aqui está um exemplo do que isso parece:

# brown-text {
cor marrom;
}

Nota: Não importa se você declara este CSS acima ou abaixo da classe pink-text, já que o atributo id sempre terá precedência.

```yml tests: - text: Seu elemento h1 deve ter a classe pink-text . testString: 'assert($("h1").hasClass("pink-text"), "Your h1 element should have the class pink-text.");' - text: Seu elemento h1 deve ter a classe blue-text . testString: 'assert($("h1").hasClass("blue-text"), "Your h1 element should have the class blue-text.");' - text: Dê ao seu elemento h1 o id do orange-text . testString: 'assert($("h1").attr("id") === "orange-text", "Give your h1 element the id of orange-text.");' - text: Deve haver apenas um elemento h1 . testString: 'assert(($("h1").length === 1), "There should be only one h1 element.");' - text: Crie uma declaração CSS para o seu ID de orange-text testString: 'assert(code.match(/#orange-text\s*{/gi), "Create a CSS declaration for your orange-text id");' - text: Não dê ao seu h1 nenhum atributo de style . testString: 'assert(!code.match(//gi), "Do not give your h1 any style attributes.");' - text: Seu elemento h1 deve ser laranja. testString: 'assert($("h1").css("color") === "rgb(255, 165, 0)", "Your h1 element should be orange.");' ```

Hello World!