Tema comum de dúvidas entre os iniciantes de desenvolvimento web, descubra aqui e entenda o que é Reset CSS
Todo programador, mesmo aquele mais iniciante, sabe que o CSS (Cascading Style Sheet), é uma das bases principais do desenvolvimento web. É com ele que se pode dar cara e cor a uma aplicação, além de fazer as animações do usuário. Portanto, no corpo do seu site, ele é a pele: é o que dá as aparências, faz o seu usuário gostar daquilo que vê e, enfim, atrai a atenção. Caso queira saber mais sobre ele, escrevemos um artigo explicando com mais detalhes, que você pode ler clicando aqui.
E, enfim, todo site que será desenvolvido pede necessariamente o uso de um reset css. No entanto, ele pode ser um pouco difícil de se compreender de início. Por exemplo, o que ele é? Para que ele serve? Qual o sentido de ter que resetar o CSS antes de começar a criar a aparência do seu site? E, o mais importante, qual o melhor reset a se usar? Todas essas perguntas serão respondidas aqui. Portanto, se prepare e vamos lá!
O que é o Reset CSS? Para que ele serve?
O reset CSS é um conjunto de regras CSS que remove o estilo padrão de todos os elementos HTML. Isso permite que você defina seu próprio estilo para cada elemento sem se preocupar com o estilo padrão do navegador. O objetivo do reset CSS é criar um estilo consistente em todas as páginas do seu site, independentemente do navegador ou dispositivo que os usuários estejam usando.
Quando se trata de design de sites, é fundamental que você tenha um estilo consistente em todas as páginas. No entanto, diferentes navegadores têm diferentes estilos padrão para elementos HTML, o que pode dificultar a criação de um estilo consistente em todas as páginas. É aí que entra o “reset CSS”. Ele basicamente deixa tudo da forma o mais “básica” possível, de modo que toda a estilização seja criada pelo próprio programador.
Isso é muito útil para garantir que o estilo se mantenha constante. Dessa forma, ele vai funcionar corretamente em todas as diversas máquinas e navegadores, sem problemas para qualquer tipo de usuário. Portanto, todo bom website desenvolvido de forma minimamente séria deve contar com um reset CSS! Não pense que isso é algo opcional, mas sim uma configuração que deve ser feita no início de todo projeto. Agora, vamos ver como iniciar isso em seu website:
Como adicionar um reset CSS ao seu projeto
Aqui vão algumas formas de se adicionar um reset CSS ao seu projeto. Essas não são todas as disponíveis, mas são as mais usuais e mais práticas:
- Adicione um arquivo CSS personalizado: Uma das maneiras mais fáceis de adicionar um reset CSS é criar um arquivo CSS personalizado. Você pode criar um novo arquivo CSS em um editor de texto simples, definir as regras CSS necessárias para o reset CSS e salvá-lo como um arquivo .css. Em seguida, você pode vinculá-lo no cabeçalho do seu site. Certifique-se de que o arquivo CSS personalizado seja adicionado depois do arquivo CSS principal do seu site.
- Use um plugin de reset CSS: Outra maneira fácil de adicionar um reset CSS ao seu site WordPress é usar um plugin de reset CSS. Existem vários plugins disponíveis que permitem que você adicione um reset CSS ao seu site sem a necessidade de codificar manualmente. Basta instalar o plugin, ativá-lo e ele fará todo o trabalho pesado para você.
- Use um framework CSS com reset CSS embutido: Alguns frameworks CSS, como o Bootstrap e o Foundation, já incluem um reset CSS embutido. Isso significa que, quando você usa um desses frameworks, não precisa adicionar um reset CSS separado. Certifique-se de escolher um framework que corresponda às suas necessidades e habilidades de desenvolvimento.
Independentemente do método que você escolher para adicionar um reset CSS ao seu site, é importante lembrar de seguir algumas práticas recomendadas. Por exemplo:
- Certifique-se de que o reset CSS não interfira no conteúdo do seu site. Embora seja importante manter um estilo consistente em todas as páginas, o conteúdo é sempre o mais importante.
- Teste o seu site em vários navegadores para garantir que o reset CSS esteja funcionando corretamente. Isso ajudará a garantir que seu site tenha uma aparência consistente para todos os usuários, independentemente do navegador ou dispositivo que eles estejam usando.
- Considere as necessidades de acessibilidade ao usar um reset CSS. Certifique-se de que o estilo padrão para a tag “alt” em imagens seja mantido para que os usuários com deficiência visual possam entender o conteúdo.
No entanto, há ainda um problema a se resolver: qual o bom reset CSS para se usar?
Qual reset CSS usar?
Apesar de existirem diversas excelentes opções, uma das mais espalhadas pela internet foi a desenvolvida por Eric Meyer, a qual ele publicou em seu blog. No link há também uma explicação mais detalhada de como ele chegou ao seu código final; no entanto, quanto a nós, basta ter proficiência na arte de copiar o CSS pronto e colar no seu repositório local.
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}Agora, isso com isso esclarecido, vamos ver como importar o reset CSS para o seu projeto e utilizá-lo de fato.
Importando o Reset CSS para o seu projeto
Para importar um arquivo CSS em seu arquivo HTML e fazer o reset CSS funcionar, você pode seguir estes passos:
- Crie um arquivo CSS para o reset: Primeiramente, crie um arquivo CSS para o reset. Você pode usar um dos muitos arquivos CSS disponíveis na internet, ou criar um personalizado. Recomendamos fortemente apenas copiar e colar aquele que trouxemos no tópico acima, mas você pode fazer modificações também!
- Adicione o link para o arquivo CSS no cabeçalho do HTML Agora, você precisa adicionar um link para o arquivo CSS no cabeçalho do HTML. Isso informará ao navegador para carregar o arquivo CSS. Adicione a seguinte linha de código no cabeçalho do seu HTML:
<link rel="stylesheet" type="text/css" href="caminho/para/arquivo.css">
Certifique-se de substituir “caminho/para/arquivo.css” pelo caminho real para o arquivo CSS de reset.
- Verifique se o reset CSS está funcionando Por fim, verifique se o reset CSS está funcionando corretamente. Para fazer isso, crie alguns elementos HTML em uma página de teste e adicione o estilo que deseja. Em seguida, visualize a página em diferentes navegadores para garantir que os elementos tenham a mesma aparência em todos eles.
Se o reset CSS estiver funcionando corretamente, os elementos HTML deverão ter a mesma aparência em todos os navegadores. Se houver diferenças, verifique se o arquivo CSS de reset está sendo carregado corretamente e se as regras CSS para o reset foram definidas corretamente.
Em resumo, para importar o reset CSS para um arquivo HTML e fazê-lo funcionar, você precisa criar um arquivo CSS para o reset, adicionar um link para ele no cabeçalho do HTML e verificar se está funcionando corretamente. Com esses passos simples, você pode garantir que o estilo do seu site seja consistente em todos os navegadores.
Conclusão
Como frisamos anteriormente, o desenvolvimento de todo site sério requer a existência de um reset CSS. Ele é crucial para que o website funcione de forma homogênea, sem ser influenciado por diferentes navegadores nem nada do tipo. Sem ele, por exemplo, os diferentes navegadores podem ter configurações diferentes de fontes, de tamanho das divs, de tamanho das letras, ou coisas desse tipo. Com isso, todo o layout de uma página pode ser quebrado, o que, é desnecessário dizer, irá destruir a experiência do usuário em seu website.
E, caso você queira aprender mais sobre CSS, a Driven Education fornece uma formação completa em desenvolvimento web full stack! Na nossa trilha, ao longo de 9 meses você vai sair do total 0 até proficiência o bastante para entrar no mercado de trabalho de pronto. Ensinamos desde os básicos de HTML e CSS até Docker e AWS!
Caso queira saber mais, confira o nosso site e se informe sobre quando abriremos nossa próxima turma na formação. Imagine-se em menos de um ano atuando num mercado que paga bem e que valoriza o profissional dedicado e esforçado: essa é a realidade que os nossos alunos já vivem! E, é claro, lembramos sempre: não existe fórmula mágica. É uma realidade possível e provável, mas que ainda pede muito estudo e trabalho.
