Iniciando CSS

Na linha

(Utilize quando for um detralher infimo.)

Dentro da tag inicial anuncie o style= "seguido: alteração ; outra: alteração"

No arquivo

(Utilize quando tiver poucas configurações.)

Utilize a tag <style> dentro da tag <head>

Arquivo separado

(Utilize sempre.)

Utilize a tag <link rel="stylesheet" href="style.css">

css tipos

Identificando elemento

Por ordem de relevancia, respectivamente 100, 10 e 1. De preferencia a classes já que o JS costuma a usar os id.

Idendificadores

Metodo query selector, utiliza o nome da tag seguido do idenficador de id # e o nome do id.
exemplo; div#nome

Classes

Da mesma maneira que o idenficador distigue um item o a classe distigue um conjunto de itens.
O simbolo de idenficação é o . resultando no selector tag.nome

Pseudo Classes

É possível aplicar personalização para classes com uma ação especifica, pois a mesma define comportamento com base em estados de elementos.::'ação'

p.classes função
:hover Caso passe o mouse
:active Quando Clicado
:visited Paginas visitadas

Ordem de tags

Consiste em idenficar através dos elementos por exempo uma p em strong

para mais de uma tag com a mesma configuração utilize uma "," .

Para um elemento direto e nenhum outro use ">"

Para um elemento direto logo apos outro "+"

Para todos elementos direto logo apos outro "~"

Para todos elementos exeto o que contem (algo) " tag:not(#id)"

Pseudo elementos

No CSS3 é possível ainda fazer transformações através de posições com ele mesmo, após idenficar o elemento utilize ::'posição'

P. Codigo Posição
::nth-child(x) Elemento posição x
::last-child Ultimo elemento
::first-letter Primeira letra
::first-line Primeira linha
::before Antes
::after Depois
content: ; Contem

Box Model

Todos os elementos HTML estão em boxes, esses contem uma anatomia que pode ser trabalhada no CSS.

aqui temos uma border aqui visualizamos o padding aqui visualizamos a margin outline

Box-level
Inline-level

Unidades de medida

Ainda é possivel utilizar o complemento calc(36% - 3px)

Medida Função
% Poporcional ao display
px Pixel
em Proporcinal ao padrão "m"

Variáveis

É possível declarar variáveis no CSS apesar da mesma ser uma linguagem de marcação.
Para isso basta informar a pseudo classe :root que referencia a raiz do documento. Tudo que for definido dentro dele serve para o documento inteiro.
As variáveis deverão ser referenciado com -- seguido do nome da mesma. 

    :roots
    {
        --corPrincipal: #ffff;
        --fonte_padrao:  'Audiowide', cursive;
    }

Para utilizar basta referenciar a palavra reservada var e dentro de colchetes o nome da variável com o -- 
    font-family: var(--fonte_padrao);

Item coringa

Para aplicar uma configuração em todos os elementos basta usar o *{configurações}