A set of useful global CSS defaults to add to your site alongside a reset stylesheet (with explanations)

Useful_global_CSS.css

/*! NOTE: These are just recommended default global styles, edit as required */

@import ('Import reset stylesheet here, (I recommend modern-normalize) or even better, import the reset stylesheet in the HTML as the first imported stylesheet');

::selection { /* Optional */
  /* It can be really hard to read highlighted text with a text-shadow, it should be removed when selected */
  text-shadow: none;
  
  /* NOTE: Using this means the color and background-color are set to transparent for selected text... */
  /* So you can customise your styles below */
  color: #fff;
  background-color: #00f;
}

html {
  /* Make base font-size 100% of browser font-size */
  font-size: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth; /* Smoothly animate to different sections within a page, only if the user doesn't mind animations */
  }
}

*,
*::before,
*::after,
html {
  /* Declare your box-sizing here
  /* https://css-tricks.com/box-sizing */
  box-sizing: border-box | content-box;
}

body {
  /* Declare your default font stack here */
  font-family: "Font Stack", sans-serif | serif | monospace | cursive | fantasy;
  
  /* Better text rendering - font-smoothing has not been officially declared, but can still be useful */
  text-rendering: geometricPrecision | optimizeLegibility | optimizeSpeed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  /* For responsive images that adjust & adapt */
  height: auto;
  max-width: 100%;
  
  /* This isn't needed, but as a user, I get frustrated when I highlight text and the image gets highlighted too */
  user-select: none;
}

button {
  color: inherit; /* By default, buttons don't inherit the font colour, this is a useful default to override */
}

a, button {
  touch-action: manipulation; /* Element doesn't want double-tap on mobile to zoom */
}

svg {
  /* Make the SVGs fit the parent container by default */
  height: 100%;
  width: 100%;
  
  /* Optional - make the SVG's fill be the same as the inherited color */
  fill: currentColor;
  
  /* Prevent the SVG from altering cursor interaction */
  pointer-events: none;
}

iframe, video {
  /* Make iframes & videos fit the parent container by default */
  height: 100%;
  width: 100%
}

Why do you set font-family in html when it gets overwritten in body later on anyway?

you'd a have a fallback for when the body font cannot be accessed for some reason. If you always use a sans serif font, you would apply that in the html tag and apply, for instance, poppins in the body. If poppins can't be found, it would fall back to sans serif in the html instead of the browser's default serif font when you would not have specified this in the html tag.

can you change the filename of this file in the gist to useful-global-css.css so we can benefit from syntax highlighting?

Why do you set font-family in html when it gets overwritten in body later on anyway?

good question. @tristan's response appears to be explaining font stacks, but you're asking about the cascade. i can't think of a reason to define the font-family twice like this.

@paul well that's not entirely what I meant. If you would define font later in the html and it could not be found, it would fall back to the font defined in the html tag, instead of the default browser font.

@KubaJastrz @tristanlukens There's no real reason to set it twice apart from the fact as a fallback for the fallback. 😊

can you change the filename of this file in the gist to useful-global-css.css so we can benefit from syntax highlighting?

@paulirish Done, thanks for suggesting 👌

Hello I'm kind of new to web development. Is this css code meant to be in reset.css?

@Ademola This CSS is intended as some useful top-level defaults. Doesn't matter what the file is called, as long as they are at the top of the cascade. However, this is not strictly reset CSS, there are other specific stylesheets for that.