# Exercício de casa 🏠
## Ordem de prioridade, Cascata, Herança e Especificidade
**1.** Analise o código abaixo.
```htmlembedded
<head>
<style>
h1 {
color: blue;
}
</style>
</head>
<body>
<h1 style="color: red;">Olá</h1>
</body>
```
Qual será a cor do h1?
**a)** Vermelho (red)
**b)** Azul (blue)
**c)** Preto (black)
<details>
<summary>Clique aqui para ver a resposta</summary> Letra A - Porque estilos <i>inline</i> (estilos dentro do atributo style) tem prioridade máxima.
</details>
---
**2.** Analise o código abaixo.
```htmlembedded
<head>
<style>
h1 {
color: red;
}
h1 {
color: blue;
}
</style>
</head>
```
Qual será a cor do h1?
**a)** Vermelho (red)
**b)** Azul (blue)
**c)** Preto (black)
<details>
<summary>Clique aqui para ver a resposta</summary> Letra B - Por conta do efeito cascata, o código que estiver mais abaixo "vence".
</details>
---
**3.** Analise o código abaixo.
```htmlembedded
<head>
<style>
h1 {
color: blue;
color: red;
}
</style>
</head>
```
Qual será a cor do h1?
**a)** Vermelho (red)
**b)** Azul (blue)
**c)** Preto (black)
<details>
<summary>Clique aqui para ver a resposta</summary> Letra A - Por conta do efeito cascata, o código que estiver mais abaixo "vence".
</details>
---
**4.** Analise o código abaixo.
```htmlembedded
<head>
<style>
body {
color: blue;
}
</style>
</head>
<body>
<h1>Olá</h1>
</body>
```
Qual será a cor do h1?
**a)** Vermelho (red)
**b)** Azul (blue)
**c)** Preto (black)
<details>
<summary>Clique aqui para ver a resposta</summary> Letra B - Porque como a cor do texto do h1 não foi alterada por nenhum estilo, ele herda a cor do texto do seu parente, no caso, o body.
</details>
---
**5.** Analise o código abaixo.
```htmlembedded
<head>
<style>
body {
color: red;
}
</style>
</head>
<body>
<a href="#">Olá</a>
</body>
```
Qual será a cor do link (`<a>`)?
**a)** Vermelho (red)
**b)** Azul (blue)
**c)** Preto (black)
<details>
<summary>Clique aqui para ver a resposta</summary> Letra B - Porque como a cor do texto do <code>a</code> é alterada pelo estilo padrão do navegador (cor azul), ele não herda a cor do texto do seu parente, no caso, o body.
</details>
---
**6.** Analise o código abaixo.
```htmlembedded
<head>
<style>
.titulo {
color: red;
}
</style>
</head>
<body>
<h1 class="titulo">Olá</h1>
</body>
```
Qual será a cor do h1?
**a)** Vermelho (red)
**b)** Azul (blue)
**c)** Preto (black)
<details>
<summary>Clique aqui para ver a resposta</summary> Letra A - Porque o h1 pertence a classe "titulo" e esta classe está sendo estilizada com a cor de texto vermelho
</details>
---
**7.** Analise o código abaixo.
```htmlembedded
<head>
<style>
#titulo {
color: red;
}
</style>
</head>
<body>
<h1 id="titulo">Olá</h1>
</body>
```
Qual será a cor do h1?
**a)** Vermelho (red)
**b)** Azul (blue)
**c)** Preto (black)
<details>
<summary>Clique aqui para ver a resposta</summary> Letra A - Porque o h1 tem o id "titulo" e este id está sendo estilizada com a cor de texto vermelho
</details>
---
**8.** Analise o código abaixo.
```htmlembedded
<head>
<style>
body h1 {
color: blue;
}
h1 {
color: red;
}
</style>
</head>
<body>
<h1>Olá</h1>
</body>
```
Qual será a cor do h1?
**a)** Vermelho (red)
**b)** Azul (blue)
**c)** Preto (black)
<details>
<summary>Clique aqui para ver a resposta</summary> Letra B - Porque o seletor "body h1" é mais específico (tem uma especificidade maior) que o seletor "h1". Especificidade do seletor "body h1": (0, 0, 2). Especificidade do seletor "h1": (0, 0, 1).
</details>
---
**9.** Analise o código abaixo.
```htmlembedded
<head>
<style>
body h1 {
color: blue;
}
.titulo {
color: red;
}
</style>
</head>
<body>
<h1 class="titulo">Olá</h1>
</body>
```
Qual será a cor do h1?
**a)** Vermelho (red)
**b)** Azul (blue)
**c)** Preto (black)
<details>
<summary>Clique aqui para ver a resposta</summary> Letra A - Porque o seletor ".titulo" é mais específico (tem uma especificidade maior) que o seletor "body h1". Especificidade do seletor ".titulo": (0, 1, 0). Especificidade do seletor "body h1": (0, 0, 2).
</details>
---
**10.** Analise o código abaixo.
```htmlembedded
<head>
<style>
body h1.titulo {
color: blue;
}
#ola {
color: red;
}
</style>
</head>
<body>
<h1 id="ola" class="titulo">Olá</h1>
</body>
```
Qual será a cor do h1?
**a)** Vermelho (red)
**b)** Azul (blue)
**c)** Preto (black)
<details>
<summary>Clique aqui para ver a resposta</summary> Letra A - Porque o seletor "#ola" é mais específico (tem uma especificidade maior) que o seletor "body h1.titulo". Especificidade do seletor "#ola": (1, 0, 0). Especificidade do seletor "body h1.titulo": (0, 1, 2).
</details>
---
**11.** Analise o código abaixo.
```htmlembedded
<head>
<style>
body > .titulo {
color: red;
}
body > .ola {
color: blue;
}
</style>
</head>
<body>
<h1 class="titulo ola">Olá</h1>
</body>
```
Qual será a cor do h1?
**a)** Vermelho (red)
**b)** Azul (blue)
**c)** Preto (black)
<details>
<summary>Clique aqui para ver a resposta</summary> Letra B - Porque ambos os seletores tem a mesma especificidade, nesse caso, o seletor que estiver mais embaixo "ganha" (efeito cascata).
</details>
---
**12.** Analise o código abaixo.
```htmlembedded
<head>
<style>
h1.titulo {
color: red;
}
h1, body h2#ola2.titulo {
color: blue;
}
</style>
</head>
<body>
<h1 id="ola" class="titulo">Olá</h1>
<h2 id="ola2" class="titulo">Olá 2</h2>
</body>
```
Qual será a cor do h1?
**a)** Vermelho (red)
**b)** Azul (blue)
**c)** Preto (black)
<details>
<summary>Clique aqui para ver a resposta</summary> Letra A - Porque o seletor "h1.titulo" é mais específico (tem uma especificidade maior) que o seletor "h1". Especificidade do seletor "h1.titulo": (0, 1, 1). Especificidade do seletor "h1": (0, 0, 1).
<br> <b>LEMBRE-SE:</b> O combinador de seletor OU (a vírgula ,) separa seletores, então, como o h1 não é selecionado pelo seletor da direita (que tem uma especificidade maior que "h1.titulo"), somente o seletor da esquerda que é levado em consideração para a estilização do h1
</details>
###### tags: `front-end` `módulo 1` `exercício de casa` `HTML` `CSS`
Sign in with Wallet
Connect another wallet