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

• fontpair
• pagecloud

Grab the CSS

• typescale

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

• coolors
• happyhues
• select your own color
• get shades shadowlord

Library/Faster Approach

• bootstrap
• tailwind

Select Grey

• tailwind

Just go with happyhues

• happyhues

Box Shadow

• tailwind