Highlights pt-br Explainer

Explicação de Destaques

Objetivo do desafio: Adicionar uma ID a um elemento HTML para dar-lhe um estilo único com CSS.

Passo a passo da solução: Uma ID é uma string única usada para identificar um elemento HTML específico. É como se fosse dar um nome a um elemento. Ao dar uma ID ao elemento, é possível usar o CSS para selecionar esse elemento e dar a ele seu próprio estilo.

Por exemplo, se você quisesse tornar todos os elementos do h1 vermelhos, exceto um, que você quisesse que ficasse azul.

É possível selecionar todos os elementos h1 do CSS desta forma:

h1 {
    color: red;
}

Em seguida, no HTML, acrescente uma ID ao elemento que você deseja que fique azul:

<html>
    <body>
        <h1>Hello</h1>
        <h1>My Name Is</h1>
        <h1 id='last-heading'>What</h1>
    </body>
</html>

Em seguida, selecione-o no CSS, colocando o símbolo # seguido da ID:

#last-heading {
    color: blue;
}

Para resolver este desafio, adicione a ID 'highlight' a um dos elementos p no HTML.

Em seguida, no CSS, adicione um novo conjunto de regras com #highlight como seu seletor.
Por último, acrescente uma regra a este conjunto de regras que define a propriedade color como rgb(255, 89, 94).

Solução do código de exemplo:

HTML

<html>
    <body>
        <h1>Main Heading</h1>
        <h2>Sub Heading</h2>
        <p>The paragraph tag creates a block of text. This is an example of what that looks like. </p>
        <h2>Sub Heading</h2>
        <p id='highlight'>The paragraph tag creates a block of text. This is an example of what that looks like. </p>
        <h2>Sub Heading</h2>
        <p>The paragraph tag creates a block of text. This is an example of what that looks like. </p>
    </body>
</html>

CSS

body {
  font-family: Helvetica, Arial, sans-serif;
  background-color: rgb(244, 247, 250);   
}

h1 {
  color: rgb(74, 144, 226);
}
 
h2 {
  color: rgb(30, 80, 105);
} 
  
p {
  color: rgb(30, 75, 95);
}

#highlight {
  color: rgb(255, 89, 94);
}

Conceitos de HTML: IDs, Elementos, Elementos de cabeçalho h1 e h2, elemento p, body

Conceitos de CSS: Selecionadores, Seleção por ID, Seleção por tipo de Tag, propriedade color, cores RGB

1 Like