Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

O reset.css não funcionando se colocado no index.html

Coloquei o reset.css no index.html, antes do style.css e isso fez com que todas as formatações fossem perdidas.... Estou encaminhando o index.html e o style.css

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

    <body>
        <header>
            <h1>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>
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% }

`

7 respostas

Confira se o reset.css está no mesmo diretório que o index.html

Sim, está na mesma pasta!

Sim, está na mesma pasta! Tanto que apagou toda a formatação do style.css

estou com o mesmo problema, referenciando o reset.css ele perde toda configuração feita anteriormente no index, o caminho está de referenciação do reset está igual no produtos, mas só no index ele perde as configurações

Silvia,

se não estou enganado, na página index.html não era pra carregar o reset.css. E imagino que tenha feito para experimentar.

Vou dar um spoiler aqui. Quando fizer HTML IV, vai haver uma atividade em que é feito exatamente isto, e bagunça mesmo a página. Aí o exercício vai ser melhorar a pagina index.html e seu .css, porque quando começamos pelo curso de HTML I pouco sabíamos, e a página ficou mais simples.

Então não se incomode achando que houve algo de errado, porque vai ver isto acontecer na aula, e vai poder corrigir.

Só de curiosidade, a aula será especificamente esta: https://cursos.alura.com.br/course/html5-css3-avancando-css/task/63317

Bons Estudos!

Akashi, obrigada pelo retorno. Isso significa que não se deve colocar o reset.css quando uma página já está pronta mas sim no início pois todo o estilo deverá ser modificado!!

solução!

Ao elaborar seu .css, você leva em conta o que vê, o que está baseado em configurações default do navegadores. Ao carregar depois o reset.css, ele altera estas configurações default, tira o tablado onde estava seu .css, que passa a pisar no chão. Muda a referência. Melhor já iniciar com esta referência do reset.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software