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');