CSS Selectors
h1 {}      - select a certain element
#id {}     - select an id
.class {}  - select classes
* {}       - universal selector (select all elements)
h2, p {}   - use comma to select multiple elements
    
CSS Combinators
div p {}    - descendant select, select an element within an element
div > p {}  - child selector, selects all p elements that are children of div  
div + p {}  - adjacent sibling, selects an element directly after that element
div ~ p {}  -  general sibling, selects all elements that are next siblings
    
CSS Attribute Selectors
[attribute name]     - to select elements with a certain attribute, a[target]
[attribute="value"]  - to select elements with a certain attribute and value, a[target="_blank"]  
[attribute~="value"] - to select elements with an attribute value with a certain value  
[attribute^="value"] - whose value starts with a specified value
[attribute$="value"] - who value ends with a specified value
[attribute*="value"] - who value contains a specified value 

/* Comment */

<link href="example.css" rel="stylesheet" />  - added inside head element link to external source  

<link href="" rel="stylesheet" media="screen and (max-width: 600px)" />  - optional media query  

<div style="color: white"> White Text </div>  - style attribute  

<style>
display: block;    - style information element added inside the head element  
</style>

These Achor Pseudo Classes Must Be In Order for them to Work
a:link {styling}    - unvisited link 
a:visited {styling} - visited link
a:hover {styling}   - mouse over link
a:active {styling}  - selected link, clicked        
a.highlight:hover {styling} - pseudo-classes can be combined with classes

More Pseudo Classes 
:checked             - input:checked - selects every checked input element
:disabled            - input:disabled - selects every disabled input element 
:empty               - p:empty - selects every p element that has no children
:enabled             - input:enabled - selects every enabled input element
:first-child         - p:first-child - selects every p element that is the first child of it’s parent
:first-of-type       - p:first-of-type - selects every p element that is the first p element of its parent
:focus               - input:focus - selects every input that is being focused on
:focus-within        - matches if the element or any of its descendants are being focused on
:hover               - a:hover, selects links that mouse is being hovered over 
:in-range            - input:in-range, selects every input that within a specified range
:invalid             - input:invalid, selects all input with an invalid value 
:lang(languge)       - p:lang(it), selects every p element with lang attribute value starting with “it”
:last-child          - p:last-child, selects every p element that is the last child of it’s parent
:last-of-type        - p:last-of-type, selects every p element that is the last p in its container
:not(selector)       - :not(p) - select every non p element
:nth-child(n)        - p:nth-child(even) - selects every even numbered p child, n - can be even or odd
:nth-last-child(n)   - counting from the last child 
:nth-last-of-type(n) - p:nth-last-of-type(2), selects every p element that is the second of parent  
:nth-of-type(n)      - p:nth-of-type - selects every p that is the second p of its container
:only-of-type        - p:only-of-type - selects every p that is the only p of its parent 
:only-child          - p:only-child - selects every p that is the only child of its parent 
:optional            - input:optional - selects every input that doesn’t have required attribute 
:out-of-range        - input:out-of-range - selects inputs with a value outside a specified range 
:read-only           - input:read-only - selects inputs with a readonly attribute
:read-write          - input:read-write - selects inputs with no readonly attribute 
:required            - input:required - selects inputs with a required attribute 
:root                - Selects the document’s root element
:target              - #news:target - select the current active #news element (Clicked URL containing that a) 
:valid               - select all inputs with a valid attribute 

::after        - p::after, insert “content” after every p element needs a content: ; property  
::before       - p::before, insert “content” before every p element needs content: ; property
::first-letter - p::first-letter, selects the first letter of every p element
::first-line   - p::first-line, selects the first line of every p element
::marker       - ::marker, selects the markers of list items
::selection    - p::selection, selects the portion of an element selected by a user
::placeholder  - input::placeholder, selects placeholder text of inputs

:root {--variable-name: red; }
element { color: var(--variable-name); }

color: red !important;

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');  

color: value;

color: rgb(0, 0, 255);
color: rgb(0%, 0%, 100%);
color: rgb(0, 0, 255 / 0.5)
color: rgba(0, 0, 255, 0.5)

opacity: 0.5;

color: red, blue, yellow;

color: hsl(360 50% 50%);
color: hsl(240deg 30% 60% / .7);
color: hsl(240 50% 50% / 25%);
color: hsla(240 50% 50% 0.5);

#RGB        // The three-value syntax
#RGBA       // The four-value syntax
#RRGGBB     // The six-value syntax
#RRGGBBAA   // The eight-value syntax

color: transparent;
color: currentcolor;
color: inherit;

border: width style color;
border: 5px solid red;

border-style: style;

dotted
dashed
solid
double
groove
ridge
inset
outset
none
hidden

Other Properties:
border-width: ;
border-color: ;

outline: width style color;
outline: 5px solid red;

border-top-style: ;
border-right-style: ;
border-bottom-style: ; 
border-left-style: ;

border-top-width: ;
border-top-color: ; 

border-radius: 50%;
        
border-top-left-radius: ;
border-top-right-radius: ;
border-bottom-right-radius: ;
border-bottom-left-radius: ;

outline-offset: unit;
outline-offset: 5px;

outline-style:
outline-color:
outline-width:

border-image: url(image.jpg) 30 stretch;

border-image-source: url('image.jpg');  // to use an image as a border  
border-image-slice: 30;  // divides the image
border-image-repeat: stretch;  // defines how images should fit into their dimensions  
border-image-outset: 15px;  // sets the distance between border and border-box

display: block;        
display: inline;       
display: inline-block;   
display: none;         

display: flex;
display: inline-flex;
display: grid;
display: inline-grid;

visibility: visible;
visibility: hidden;
visibility: collapse;

To Specify Type of Positioning
position: static;   //default, goes with normal flow of page
position: relative; // according to it's normal position
position: fixed;    // according to the viewport
position: absolute; // according to nearest parent element, parent must have position: relative;  
position: sticky;   // when position is reached via scroll will "stick" to it

Position Using These Properties
top: ;   
right: ;
bottom: ;
left: ;

float: none;
float: left;
float: right;

width: 50%;
max-width: 75%;

Shorthand Methods:
padding: 10px;  // all 4 sides
padding: top right bottom left;
padding: top/bottom | left/right
padding: top | left/right | bottom

Other Methods:
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;

clear: none;
clear: left;    
clear: right;
clear: both;

height: 100%;
max-height: 100%;

Shorthand Methods:
margin: 10px;  // all 4 sides
margin: top right bottom left;
margin: top/bottom | left/right
margin: top | left/right | bottom
        
Other Methods:
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;

box-sizing: border-box;

z-index: 2;

display: grid;
display: inline-grid;

grid-auto-rows: size;
grid-auto-columns: size;

grid-template-areas: 'myArea myArea';
grid-area: myArea;

justify-items: ; // positions grid items left to right
Values:
start     - aligns grid items to the left side of the grid area 
end       - aligns grid items to the right side of the grid area 
center    - aligns grid items to the center of the grid area 
stretch   - stretches all items to fill the grid area 


align-items: ; // positions grid items from top to bottom
Values:
start     - aligns items to the top side of the grid area
end       - aligns items to the bottom side of the grid area 
center    - aligns items to the center of the grid area 
stretch   - stretches all items to fit the grid area

grid-template-columns: ;   
grid-template-rows: ; 
grid-template: grid-template-rows / grid-template-columns;  

Values:
fr                        // defines a fraction of a grid
repeat(amount, size)      // a function to create columns and rows
repeat(amount, size size) // to add two columns or rows at a time 
minmax(size, size)        // first size always used, second depending on grid size 
auto-fill                 // fits as many possible columns as possible on a row
auto-fit                  // fits whatever columns there are into the space, stretching the columns  

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  // responsive grid

grid-auto-flow: row;          // new items should fill rows
grid-auto-flow: column;       // new items should fill columns
grid-auto-flow: row dense;    // dense fills holes earlier if smaller items are added   
grid-auto-flow: column dense;

justify-self: ;
align-self: ; 

align-content: ;

Values:
start
end
center
space-between
space-around

place-self: align-self / justify-self; 

column-gap: ;
row-gap: ;
gap: row-gap column-gap;

grid-column-start: ;
grid-column-end: ;
grid-column: 1/-1; // use all columns or rows

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end ;  

grid-row-start: ;
grid-row-end: ;
grid-row: ;

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end ;  

justify-content: ;

Values:
center
start
end
space-between
space-around
space-evenly
stretch

place-self: align-self / justify-self; 

display: flex;
display: inline-flex;

flex-flow: column wrap;

align-content: ;

Values:
start 
end 
center 
space-between 
space-around

align-self: ;

Values:
stretch
center
start
end

flex-direction: column;
flex-direction: column-reverse;
flex-direction: row;
flex-direction: row-reverse;

justify-content: ;

Values:
center
flex-start
flex-end
space-around
space-between

flex-grow: ;    // specifies how much an item will grow relative to other items
flex-shrink: ;  // specifies how much an item will shrink relative to other items 
flex-basis: ;   // initial length of a flex item

flex: grow shrink basis;  // shorthand 

flex-wrap: wrap;
flex-wrap: nowrap;
flex-wrap: wrap-reverse;

align-items: ;

Values:
center
flex-start 
flex-end 
stretch
baseline

order: 1;

font: font-family font-weight font-size;

font-weight: ;

Values:
normal
bold
100-900

text-align: ;

Values:
start 
end 
center 
justify

text-shadow: x-shadow y-shadow blur color;
text-shadow: 2px 2px 5px red;

word-break: ;

Values:
normal 
break-all 
keep-all

family-font: ;
    
Font Types:
serif      // have small strokes at the end of each letter 
sans-serif // clean lines no strokes or lines 
monospace  // all letters have a fixed width
cursive    // imitate human hand writing
fantasy    // decorative/playful fonts

text-decoration: ;  //shorthand

Values:
underline 
overline 
line-through
none

Other Properties:
text-decoration-color: any color  
text-decoration-style: solid, double, dotted, dashed, wavy 
text-decoration-thickness: length value

word-spacing: ;

font-size: ;

text-transform: ;

Values:
capitalize
uppercase
lowercase
none

line-height: ;

white-space: ;

Values:
normal
nowrap    // makes text into one line, doesn't break
pre
pre-wrap
pre-line
break-spaces

object-fit: ;

Values:
fill
contain
cover 
none 
scale-down

object-position: ;

object-position: 50% 50%;
object-position: right top;
object-position: left bottom;

mask-image: url();
mask-repeat: no-repeat;

filter: none | blur(1) | brightness(1) | contrast(1) | drop-shadow(x y blur color) | grayscale(0) 
| hue-rotate(90deg) | invert(75%) | opacity(50%) | saturate(1) | sepia(1) | url();

::-webkit-scrollbar { }
::-webkit-scrollbar-track { } 
::-webkit-scrollbar-thumb { }
::-webkit-scrollbar-thumb:hover { }

div::-webkit-scrollbar { }

scroll-behavior: smooth;

scroll-snap-align: ; start end center // how you want snapped item positioned 
scroll-snap-type: ; x mandatory, y proximity, both mandatory  // used on container to set snap control 
scroll-snap-stop: ; normal always // always - scroll container always stops at possible snap positions 

overflow: ;   // both
overflow-x: ; // horizontal only
overflow-y: ; // vertical only

Values:
visible
hidden
clip
scroll
auto

list-style: square url() outside;

li::marker {content: "- "; font-size: 10px;}

list-style-type: square circle disc "string value";    

list-style-position: outside inside;

border-collapse: collapse;

border-spacing: 5px 5px;

caption-side: top;
    
Values:
top 
bottom 
block-start 
block-end 
inline-start 
inline-end

table-layout: auto; 
width: 150px;

empty-cells: hide;

px // pixels

cm // centimeters
mm // millimeters
in // inches
pt // points
pc // picas

width: max(unit, unit);

rem  // relative to the root element (use for fontsize, padding, margin)
%    // relative to the parent element (use for widths, heights, padding, margin, positioning)

em   // relative to the parent element
vw   // relative to 1% of the viewport width  
vh   // relative to 1% of the viewport height 
vmin // relative to 1% of the viewport's smaller dimension  
vmax // relative to 1% of the viewport's bigger dimension 

width: min(unit, unit);

width: calc(unit - unit);

width: clamp(min, val, max);

background: background properties;

background-repeat: no-repeat;

Values:
repeat-x  // repeated horizontally 
repeat-y  // repeated vertically 
no-repeat // not repeated 
repeat    // repeated throughout
space     // repeated with whitespace and nonclipped
round     // stretched as size increases

background-origin: border-box;

Values:
border-box  // positioned relative to border box
padding-box // positioned relative to padding box 
content-box // positioned relative to content box

background-color: color value;

background-position: top;
    
Values:
top left // top center // top right 
center left // 
right 
center 
x  y - offsets

background-clip: border-box;

Values:
border-box  // extends to outside edge of border
padding-box // extends to padding edge
content-box // clipped to content box

Use image for text
background-clip: text;
-webkit-background-clip: text;
color: transparent;

background-image: url();
background-image: linear-gradient();

background-size: contain;

Values:
contain // large as possible without stretching or cropping  
cover   // fills the container
unit unit  // use px or rem set width and height 

background: linear-gradient(direction, color-1, color-2, ...);  

text-shadow: x-offset y-offset blur color;

box-shadow: inset x-offset y-offset blur spread color;

filter: drop-shadow(x-offset y-offset blur color); 

@keyframes name {
(0%) from { styles }
(100%) to { styles }
}

Another Example:
@keyframes identifier {
0% {
    top: 0;
    left: 0;
}
30% {
    top: 50px;
}
68%,
72% {
    left: 50px;
}
100% {
    top: 100px;
    left: 100%;
    }
}

animation-duration: 3s;

animation-iteration-count: infinite // 2;

animation: animation properties;

animation-timing-function: linear;

Values:
linear                // animates at even speed  
ease                  // speeds up in middle slows down at end   
ease-in               // slow start 
ease-out              // slow end 
ease-in-out           // slow start and end
steps(4, jump-start)  // displays in stops 
cubic-bezier(p1, p2, p3, p4) // uses cubic-bezier-curve 

animation-direction: normal;

Values:
normal            // plays forward 
reverse           // plays backwards
alternate         // reverses direction after cycle  
alternate-reverse // same but backwards

animation-name: keyframe names;

animation-delay: 2s;

animation-fill-mode: none;

Values:
none      // 
forwards  //
backwards //
both      //

animation-play-state: paused;

Values:
paused  // animation currently paused
running // animation currently running

transform: scale(1.2);

transform: rotate(20deg);

transform: skew(15deg, 15deg);

transform: rotate3d(X, Y, Z, angle);

transform: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()); 

transition: ;

Properties:
transition-property: ; // select which properties to add a transition on  
Values:
all          // select all effects 
css property // select a certain property (ex: width, color...)

transition-duration: 2s;          // set duration of transition
transition-timing-function: ease; // set a velocity for a transition
transition-delay: 2s;             // set a delay before a transition 

transform: rotateX(45deg);

transform-style: preserve-3d;

transform: matrix3d(
1, 2, 3, 4,
5, 6, 7, 8,
9, 10, 11, 12,
13, 14, 15, 16);

transform: translate(x, y, z);

transform: scale(1.2);

transform: rotateY(45deg);

perspective: 30rem;

transform-origin: x-offset y-offset;

column-count: 2;

Values:
unit 
auto // determined by column-width

column-width: 5rem;

columns: column-count column-width; //shorthand

column-gap: 2rem;

column-span: all;

column-rule: style color width;

break-inside: avoid-column;
Values:
auto
avoid
avoid-page
avoid-column
avoid-region

@media only mediatype and (expressions) {
    CSS-Code;
}

mediatypes:
all    // selects all types 
print  // used for printers  
screen // used for screens
speech // used for screenreaders

Expressions:
(max-width: )            // from width and below
(min-width: )            // from width and above
(orientation: landscape) // landscape mode  
(orientation: portrait)  // portrait mode

Example:
@media only screen and (max-width: 480px) {
    .box {
      flex-direction: column;
    }
}

/* Mobile */
@media screen and (min-width: 0px) {
           
}
/*Tablet Portrait*/
@media screen and (min-width: 480px) {
           
}
/*Tablet Landscape*/
@media screen and (min-width:768px) {  
        
}
/* Laptop */
@media screen and (min-width: 1024px){  
        
}
/* Desktop */
@media screen and (min-width: 1440px){
           
}
/* 4k */
@media screen and (min-width: 2560px){
:root {font-size: 1.4rem;}
}

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />

resize: ;

Values:
both 
horizontal 
vertical 
none

cursor: ;
    
Values:
url()  // add custom cursor
auto
crosshair
default 
pointer
move
e-resize 
ne-resize 
nw-resize
n-resize 
se-resize 
sw-resize 
s-resize
w-resize
text 
wait 
help

pointer-events: none;