Quick CSS styling for web pages

Ctrl + Shift + I

Ctrl + Shift + M

https://www.w3schools.com/css/default.asp

https://css-tricks.com/snippets/

https://validator.w3.org/

https://type-scale.com/

Colour picker

Google Fonts

Font Awesome

<script src="https://kit.fontawesome.com/75e53ee709.js" crossorigin="anonymous"></script>

https://uxdesign.cc/why-designers-should-move-from-px-to-rem-and-how-to-do-that-in-figma-c0ea23e07a15

heroicons

iconmoon.io

ionicons

ICONS8

linea.io

Phosphor icons

Bootstrap

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

Unsplash

background-image: url('https://source.unsplash.com/XXXXX/1600x900');

awwwards.

Land-book

One Page Love

cubic-bezier.com

SVG icons ONLY

prefer using classes only

prefer using flex and use grid for layout only

LVHA - a:link a:visited a:hover a;active

Selector priority:  !important (DON'T USE) => inline style (DON'T USE) => 

id => class => element => universal (*)

DO NOT USE FLOAT. Clearfix hack used for floats:

.clearfix::after {

clear: both;

content: "";

display: block;

}

::after ::before

child - position: absolute => parent - position: relative