<link rel="stylesheet" href="/style.css" />

<style>
div
 { color: #444;
}
</style>

<tag style="property: value"> </tag>

*            all elements
div          all div tags
div p        paragraphs inside divs
div >        pall p tags, one level deep in div
div + p      p tags immediately after div
div ~ p      p tags preceded by div
.classname        all elements with class
#idname           element with ID
div.classname     divs with certain classname
div#idname        div with certain ID
#idname           *all elements inside #idname

a:link        link in normal state
a:active      link in clicked state
a:hover       link with mouse over it
p::after{content:"yo";}   add content after p
p::before                 add content before p
input:checked      checked inputs
input:disabled     disabled inputs
input:enabl        denabled inputs
input:focus        input has focus
input:in-range     value in range
input:out-of-range input value out of range
input:valid         input with valid value
input:invalid       input with invalid value
input:optional      no required attribute
input:required      input with requred attribute
div:empty           element with no children
p::first-letter     first letter in p
p::first-line       first line in p
p:first-of-type     first of some type
p:last-of-type      last of some type
:not(span)          element that's not a span
p:first-child       first child of its parent
p:last-childlast    child of its parent
p:nth-child(2)      second child of its parent
p:nth-child(3n+1)   nth-child (an + b) formula
p:nth-last-child(2) second child from behind
p:nth-of-type(2)    second p of its parent
p:nth-last-of-type(2)  ...from behind
p:only-of-type      unique of its parent
p:only-childonly    child of its parent

@media screen and (max-width: 480px) { }

@media screen and (max-width: 600px), (max-height: 500px) {}

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: larger;
font: style variant weight size family;

text-align: justify;
letter-spacing: .15em;
text-decoration: underline;
word-spacing: 0.25em;
text-transform: uppercase;
line-height: normal;

background-image: url("Path");
background-position: right top;
background-size: cover;
background-repeat: no-repeat;
background-attachment: scroll;
background-color: yellow;
background: color image repeat attachment position;
      

border-width: 5px;
border-style: solid;
border-color: aqua;
border-radius: 15px;
border: width style color;

animation-name: myanimation;
animation-duration: 10s;
animation-timing-function: ease;
animation-delay: 5ms;
animation-iteration-count: 3;
animation-direction: normal;
animation-play-state: running;
animation-fill-mode: both;

transition-property: none;
transition-duration: 2s;
transition-timing-function: ease-in-out;
transition-delay: 20ms;

display: flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: column wrap;
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;

order: 5; /* default is 0 */
flex-grow: 4; /* default 0 */
flex-shrink: 3; /* default 1 */
flex-basis: | auto; /* default auto */
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
align-self: auto | flex-start | flex-end | center | baseline | stretch;

display: grid | inline-grid;
grid-template-columns: 12px 12px 12px;
grid-template-rows: 8px auto 12px;
grid-template: none | grid-template-rows / grid-template-columns; 
column-gap: line-size;
row-gap: line-size;
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
place-items: center;
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
grid-auto-flow: row | column | row dense | column dense;