Skip to content

Instantly share code, notes, and snippets.

@jackdomleo7
Last active October 24, 2023 08:49
  • Star 113 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save jackdomleo7/55659bafe581d19cc341ef775d6a9e6b to your computer and use it in GitHub Desktop.
A set of useful global CSS defaults to add to your site alongside a reset stylesheet (with explanations)
/*! 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%
}
@KubaJastrz
Copy link

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

@tristanlukens
Copy link

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.

@paulirish
Copy link

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

@paulirish
Copy link

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.

@tristanlukens
Copy link

@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.

@jackdomleo7
Copy link
Author

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

@jackdomleo7
Copy link
Author

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 👌

@Ademola101
Copy link

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

@jackdomleo7
Copy link
Author

jackdomleo7 commented Jul 12, 2021

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment