Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Exercício de casa 🏠

Ordem de prioridade, Cascata, Herança e Especificidade

1. Analise o código abaixo.

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

Clique aqui para ver a resposta

Letra A - Porque estilos inline (estilos dentro do atributo style) tem prioridade máxima.

2. Analise o código abaixo.

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

Clique aqui para ver a resposta

Letra B - Por conta do efeito cascata, o código que estiver mais abaixo "vence".

3. Analise o código abaixo.

<head>    
    <style>
        h1 {
            color: blue;
            color: red;
        }
    </style>
</head>

Qual será a cor do h1?

a) Vermelho (red)
b) Azul (blue)
c) Preto (black)

Clique aqui para ver a resposta

Letra A - Por conta do efeito cascata, o código que estiver mais abaixo "vence".

4. Analise o código abaixo.

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

Clique aqui para ver a resposta

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.

5. Analise o código abaixo.

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

Clique aqui para ver a resposta

Letra B - Porque como a cor do texto do a é alterada pelo estilo padrão do navegador (cor azul), ele não herda a cor do texto do seu parente, no caso, o body.

6. Analise o código abaixo.

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

Clique aqui para ver a resposta

Letra A - Porque o h1 pertence a classe "titulo" e esta classe está sendo estilizada com a cor de texto vermelho

7. Analise o código abaixo.

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

Clique aqui para ver a resposta

Letra A - Porque o h1 tem o id "titulo" e este id está sendo estilizada com a cor de texto vermelho

8. Analise o código abaixo.

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

Clique aqui para ver a resposta

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

9. Analise o código abaixo.

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

Clique aqui para ver a resposta

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

10. Analise o código abaixo.

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

Clique aqui para ver a resposta

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

11. Analise o código abaixo.

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

Clique aqui para ver a resposta

Letra B - Porque ambos os seletores tem a mesma especificidade, nesse caso, o seletor que estiver mais embaixo "ganha" (efeito cascata).

12. Analise o código abaixo.

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

Clique aqui para ver a resposta

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).
LEMBRE-SE: 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

Exercício de casa 🏠

Ordem de prioridade, Cascata, Herança e Especificidade

tags: front-end módulo 1 exercício de casa HTML CSS

Read more

Exercício de Casa :house:

Exercício de Casa :house:

Cheatsheet de propriedades básicas do CSS

Exercício de Casa :house:

tags: `front-end` `módulo 1` `exercício de casa` `HTML` `CSS`