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

Ordem do reset

Coloquei o reset.css embaixo do produtos.css e não "apagou" tudo como o professor diz na aula.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

2 respostas

Quer dizer que não anulou o estilo do produtos.css? Testei no meu projeto e anulou sim.

solução!

Oi Israel, tudo bem ?

Boa observação! De fato, o reset.css não irá apagar tudo que foi configurado nos demais documentos com extensão .css. Ele é responsável por suavizar as diferenças de estilos colocadas como padrão em cada navegador e contribuir para a construção de diferentes projetos, como o da Barbearia Alura.

Existem várias formas possíveis de resetar essas propriedades, e cada arquivo criado pela comunidade desenvolvedora e disponibilizado para nós carrega algumas particularidades. Observe que as mudanças na página, ao colocar o reset.css abaixo de produtos.css, são principalmente nos valores de padding e margin. Isso é resultado dos parâmetros que estão no arquivo específico que estamos utilizando. Alguns são super completos e resetam de forma muito mais intensa, outros são mais simples. Você pode observar quais são esses parâmetros no próprio arquivo reset.css, dentro do seu projeto.

Como esse arquivo tem algumas propriedades que estamos usando para o desenvolvimento do nosso site, não é interessante colocá-lo abaixo de outro arquivo com extensão .css, como no caso da imagem que você compartilhou. Podemos ter problemas de desconfiguração dos parâmetros já definidos, além dos que ainda serão adicionados à sua folha de estilos.

Lembre-se que você sempre pode utilizar a ferramenta de desenvolvedor e inspecionar as mudanças que acontecem na sua página, utilizando o atalho Ctrl + Shift + i.

Para mais informações a respeito do arquivo reset.css, recomendo este artigo da Alura que explica para que serve esse tipo de arquivo e como utilizá-lo.

Espero ter ajudado. Caso tenha mais dúvidas com relação a este tópico, estarei à disposição.

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor marcar como solução! ✓.