1
resposta

RESET CLASS

Não entendi sobre o assunto, preciso baixar ele de algum lugar antes de descrever na tag head usando a tag link? E preciso ter feito isso antes de começar qualquer descrição ? porque já começamos o projeto em algumas aulas se colocar agora terá alteração?

1 resposta

Olá, Marta! Tudo bom com você?

Então, o reset.css é uma estilização que é feita na página pra poder retirar os estilos já nativos do navegador. Pode ser um reset mais simples, eu mesmo já usei algumas vezes em alguns projetos meus, como:

*{
   margin: 0;
   padding: 0;
   border: 0;
}

Nesse caso, eu defini que todos os elementos da página terão margin, padding e border como 0. Só que ainda há formas de reset ainda mais precisas, que removem outras estilos de elementos, como listas, por exemplos. Claro que vai depender muito do projeto que você está fazendo, mas eu geralmente gosto de usar o reset nos meus projetos independente da simplicidade.

E sim, você consegue encontrar ele na internet, mas também vou deixar aqui o código do reset que eu utilizo. Nesse caso, é só salvar ele em um formato .css e fazer a referência dele nos projetos que você quiser, declarando na tag head. Mas é importante que você declare o reset antes do estilo, para que não ocorra conflitos, ficando dessa forma:

<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="reset.css">

Como você já tem um estilo no seu projeto, pode ser que adicionando o reset css altere alguma coisa ou outra, por isso é bom conferir depois. Segue o reset que eu uso:

* {
    box-sizing: border-box;
}

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;
}

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;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    width: inherit;
}

button {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    font-weight: inherit;
    padding: 0;
    border: none;
    background-color: unset;
}

input {
    border: none;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
}

textarea {
    border: none;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
}

select {
    border: none;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
}

Espero ter ajudado e, qualquer coisa, pode entrar em contato. Abraços e bons estudos!