Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

reset.css não funcionando no index.html

Referente ao curso HTML5 e CSS3 parte 2: posicionamento, listas e navegação, no capítulo Posicionamento dos elementos e atividade Limpando o CSS

por David Veras Holanda
| 132.2k xp | 6 posts

Não consigo compreender porque quando aplicado ao produtos.css o reset.css funciona perfeitamente, mantendo inclusive o tamanho das letras dos títulos h1,h2,h3, etc, porém ao aplicar no index.html elas perdem sua formatação.

A cor, a centralização do texto, e o font-size da missão funcionam, porém os títulos e as bolinhas da lista desaparecem. E sim, o reset se encontra dentro da mesma pasta.

Vi pessoas com a mesma dúvida mas não consegui solucionar.

<link rel="stylesheet" href="reset.css">
 <link rel="stylesheet" href="style.css">
5 respostas
por Moderador
| 1042.7k xp | 1134 posts
Moderador

Olá David, tudo bem?

Poste pra nós o seu style.css. Pode ser que ele esteja sobrescrevendo algum seletor do reset.css.

por Silvia Itzcovici Abensur
| 117.6k xp | 42 posts

Também estou com o mesmo problema. Vou postar o style.css

body{

    } 
#banner {
    width: 100%;
}
.principal{
    background: #CCCCCC;
    padding: 30px;
}
.titulo-centralizado {
    text-align: center
    } 
.titulo-principal{
    padding-left: 20px 
}    
p {
       text-align: center
      }
em strong{
    color: red 
    }
 #missao {
    font-size: 20px
}
.itens{
    font-style: italic
}
.beneficios{
    background: #FFFFFF;
    padding: 20px;
}
ul{
    display: inline-block;
    vertical-align: top;
    width: 20%;
    margin-right: 15%

}
.imagembeneficios{
    width: 50% 
}
solução!
por Moderador
| 1042.7k xp | 1134 posts
Moderador

Olá Silvia, tudo bem?

Pelo que consta no seu arquivo style.css ele não trata dos itens expostos acima pelo David, acredito que o código dele também não.

Ele menciona: "o tamanho das letras dos títulos h1,h2,h3... as bolinhas da lista desaparecem"

Quando vocês incluíram o reset.css são as regras dele que passam a valer. Como no style.css não há regras para tratar dos pontos acima, a página assume o padrão do navegador. Agora com o reset.css assume as regras dele. Para modificar vocês que terão que alterar cada propriedade diretamente no style.css para ele sobrepor as regras atuais.

O reset.css serve justamente pra isso, criar um padrão de estilo que independe do navegador que estiver utilizando, assim você consegue trabalhar melhor para atender vários browsers.

Ficou claro?

por Silvia Itzcovici Abensur
| 117.6k xp | 42 posts

André, vou encaminhar o meu arquivo index.html para você verificar...

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>Barbearia Alura</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <header>
            <h1 class="titulo-principal">Barbearia Alura</h1>
        </header>

        <img src="banner.jpg" id="banner">
        <div class="principal">
            <h2 class="titulo-centralizado">Sobre a Barbearia Alura</h2>

            <p>Localizada no coração da cidade a <strong>Barbearia Alura</strong> traz para o mercado o que há de melhor para o seu cabelo e barba. Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos clientes a cada dia.</p>

            <p id="missao"><em>Nossa missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos clientes"</strong>.</em></p>

            <p>Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.</p>
        </div>

        <div class="beneficios">
            <h3 class="titulo-centralizado">Benefícios</h3>
            <UL>
                <LI class="itens">Atendimento aos Clientes</LI>
                <LI class="itens">Espaço Diferenciado</LI>
                <LI class="itens">Localização</LI>
                <LI class="itens">Profissionais Qualificados</LI>
            </UL>
            <img src="beneficios.jpg" class="imagembeneficios">
        </div>


    </body>

</html>
por Silvia Itzcovici Abensur
| 117.6k xp | 42 posts

Esta dúvida ainda não foi solucionada!