CSS: reset

Een browser voegt standaard stijlen toe voor alle HTML elementen. Maar niet alle browsers doen dit hetzelfde en soms zijn er zaken die je liever niet hebt als je een pagina wil stijlen.

Daarvoor gebruiken we altijd een CSS reset voor we onze eigen code beginnen schrijven. Dit is een stylesheet die bepaalde standaard zaken reset en zo ook alle browsers gelijk maakt.

Er bestaan een hele boel van deze "reset css" variaties die je online kan vinden. Hieronder vind je de reset die wij gaan gebruiken. Als je beter vertrouwd geraakt met CSS kan je deze dan naar je eigen hand zetten.

/*
  Artevelde hogeschool CSS Reset v0.2
  Adapted version from Josh's Custom CSS Reset https://www.joshwcomeau.com/css/custom-css-reset/
*/

/*
  1. Use a more-intuitive box-sizing model.
*/
*, 
*::before, 
*::after {
  box-sizing: border-box;
}

/*
  2. Remove default margin
*/
* {
  margin: 0;
}

/*
  3. Allow percentage-based heights in the application
*/
html {
  height: 100%;
}

/*
  Typographic tweaks!
  4. Add accessible line-height
  5. Improve text rendering
*/
body {
  min-height: 100%;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/*
  6. Improve media defaults
*/
img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

/*
  7. Remove built-in form typography styles
*/
input, button, textarea, select {
  font: inherit;
}

/*
  8. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}