CSS reset básico para iniciar a criação do seu site

Publicado em: 19-04-2018
Para quem não sabe o css reset é um forma de deixar o css base/inicial de todos os navegadores igual. Assim o seu site tem menos chances de dar problemas de acordo com o navegador que for utilizado pelo cliente.

Deixo aqui para você o meu css reset que utilizo em todos os meus projetos. Não vou dizer que é o melhor, porém atende todas as minhas necessidades.

Ultima atualização: 19/11/2018

:not(head){
font-weight: normal;
box-sizing: border-box;
vertical-align: baseline;
margin: 0;
padding: 0;
border: 0;
}

:not(html){
font-size: 1.6rem;
}

html {
font-size: 10px;
line-height: 1.15;
overflow-y: auto;
height: 100%;
}

body{
height: 100%;
}

main{
display: block;
}

/* elementos de texto */
h1{
font-size: 3.4rem;
}

h2{
font-size: 3rem;
}

h3{
font-size: 2.6rem;
}

h4,
h5,
h6{
font-size: 2rem;
}

b,
strong {
font-weight: bold;
font-size: inherit;
}

small{
font-size: 0.8rem;
}

ol,
ul {
list-style: none
}

address{
font-style: normal;
}

a{
display: inline-block;
text-decoration: none;
background-color: transparent;
color: #0067d4;
}


/* Elementos de formulário */
button,
input,
select,
textarea {
font-family: inherit;
border: 1px solid transparent;
}

button,
input {
overflow: visible;
}

button,
select {
text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
background-color: transparent;
}

input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px #fff inset
}

textarea {
overflow: auto;
resize: none
}


/* Elemntos de media */
img,
embed,
iframe,
object,
audio,
video {
max-width: 100%;
height: auto;
}

img{
border-style: none;
}

/* Elementos de tabela */
table {
border-collapse: collapse;
border-spacing: 0;
}


/* Pseudo Elementos */
:before,
:after {
box-sizing: inherit;
}

:hover,
:focus,
:active{
outline: none;
}


continue lendo