Explicação de Estilo personalizado
Objetivo deste desafio: Usar uma id para definir o estilo de um elemento HTML específico
Passo a passo da solução: Neste desafio, você adicionará uma id, b, ao 3º elemento h1. Em seguida, você adicionará um novo conjunto de regras de CSS para #b e definirá sua cor como azul.
O atributo id atribui uma id a um elemento específico. Por exemplo, o código abaixo atribui a id r a um elemento h1 específico:
<h1 id='r'>red</h1>
Uma vez atribuída uma id a um elemento específico, essa id não pode ser usada em nenhum outro elemento. Uma id só pode ser usada uma vez em um documento HTML.
Quando o elemento tiver uma id, ele pode ser selecionado no CSS usando o símbolo # seguido da id. Por exemplo:
#r {
color: red;
}
O código acima seleciona o elemento com a id r e define sua cor como vermelho.
Para concluir o desafio, dentro do HTML, adicione a id 'b' dentro da tag <h1> de abertura na linha <h1>blue</h1>. Em seguida, dentro do CSS, adicione um novo conjunto de regras com o seletor #b. Defina sua color como rgb(0, 0, 255).
Solução do código de exemplo:
(Toque abaixo para revelar)
HTML
<html>
<body>
<h1 id='r'>red</h1>
<h1 id='g'>green</h1>
<h1 id='b'>blue</h1>
</body>
</html>
CSS
body {
background-color: snow;
}
h1 {
color: black;
}
#r {
color: rgb(255, 0, 0);
}
#g {
color: rgb(0, 255, 0);
}
#b {
color: rgb(0, 0, 255);
}
Conceitos de HTML: <html>, <body>,<h1>, elemento HTML, atributo id
Conceitos de CSS: Seletores de CSS, Conjunto de Regras, Regras
