CSS Default Starter / Global Styles

  • Save time on project setup.
  • Less lines of CSS.
If you prefer video format instead, just follow the link below

Complete Video Tutorial

Normalize

Small CSS file that provides cross-browser consistency in the default styling of HTML elements.

Alternative/Fancier way of doing this

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
  • Go to Docs
  • Select the latest version
  • Create normalize.css
  • Setup the link in the html
<link rel="stylesheet" href="./normalize.css" />

Fonts

Select Fonts

Grab the CSS

Make some adjustments

Colors

:root {
  /* primary */
  /* grey */
  --black: #222;
  --white: #fff;
  --red-light: #f8d7da;
  --red-dark: #842029;
  --green-light: #d1e7dd;
  --green-dark: #0f5132;
}

Select Primary

Manual Approach

Library/Faster Approach

Select Grey

Just go with happyhues

Box Shadow