Tutorial de CSS para Iniciantes

O braço direito do HTML.


Tutorial de CSS e CSS3 Tutorial de CSS e CSS3

Apresentação Se você já possui conhecimentos em HTML5 esse tutorial servirá como uma excelente ferramenta para total customização dos seus documentos HTML, mas se você ainda não possui conhecimentos em HTML e HTML5, clique aqui para aprender e assim que terminar venha logo pra cá!
Pré-requisitos Conhecimentos sobre HTML e HTML5
O que aprender Vamos customizar totalmente a página do exercício do Tutorial de HTML5 com CSS e CSS3
Conceitos CSS (significa Cascading Style Sheets) é um simples mecanismo para adicionar estilo (cores, fontes, espaçamento, etc.) a um documento web. CSS tem uma sintaxe simples, e utiliza uma série de palavras em inglês para especificar os nomes de diferentes estilos de propriedade de uma página. CSS3 é a segunda mais nova versão das famosas Cascading Style Sheets (ou simplesmente CSS), onde se define estilos para páginas web com função do CSS3 é abolir as imagens de plano de fundo, bordas arredondadas, apresentar transições e efeitos para criar animações de vários tipos, como um simples relógio de ponteiros.
História A saga de CSS começa em 1994. Håkon Wium Lie trabalha no CERN - o berço da Web - e a Web está começando a ser usada como uma plataforma para publicação eletrônica. Uma parte crucial de uma plataforma de publicação está faltando, no entanto: Não há como estilizar documentos. Por exemplo, não há como descrever um layout semelhante a um jornal em uma página da Web. Tendo trabalhado em apresentações de jornal personalizadas no MIT Media Laboratory, Håkon viu a necessidade de uma linguagem de folha de estilo para a Web. A História completa está aqui , a paǵina foi estilizada de maneira muito legal com CSS, vale a pena o clique.
Curiosidade Muitas das animações que você vê hoje em dia na internet, você pode imaginar que é uma linguagem de programação, mas usa-se mais CSS, por ser mais leve e fácil! :)
Ferramentas mínimas Você precisa possuir um Editor de Texto. De preferência instale um que colorize o código, exemplos: Vim, Gedit, Notepad++ ou outros.
Grade Essa própria página já contém todos os tópicos abordados.
Estrutura Básica Uma instrução CSS consiste em um seletor e um bloco de declaração. Cada declaração contém uma propriedade e um valor, separados por dois pontos : . Cada declaração é separada por ponto e vírgula ; .
Estrutura Básica de um Documento CSS
Exemplo da Estrutura de um Documento CSS
Primeiro CSS Existem 3 formas de você "chamar" o CSS.
  1. Usando um arquivo EXTERNO e chamando entre as tags head do seu HTML utilizando a tag link. Exempĺo:
    <head>
     <link rel="stylesheet" type="text/css" href="arquivo.css">
    <head>

    E dentro do arquivo possuir seu código CSS. Vamos supor que você deseja deixar o elemento h1 da sua página HTML com cor vermelha, então dentro do arquivo.css, teria o seguinte conteúdo:
    h1 { color : red ; } , logo, todo o conteúdo entre as tags h1 ficariam com a cor Vermelha.

    Obs.: Se o arquivo.css não estiver no mesmo diretório do arquivo em HTML, no atributo href precisará informar o caminho para localizá-lo.
    Exemplo: <link rel="stylesheet" type="text/css" href="pasta/outra_pasta/arquivo.css">

  2. Usando um conteúdo INTERNO e chamando entre as tags head do seu HTML utilizando a tag style. Exempĺo:
    <head>
     <style>
      h1 { color : red ; }
     </style>
    </head>

  3. Ou utilizando o atributo style na tag HTML. Exempĺo:

    <h1 style="h1:red;">

    Note que dessa forma, somente o elemento que possuir esse atributo que mudará a cor. Note também que só foi preciso informar dentro do atributo style a propriedade : valor ; , pois lógicamente o seletor é a própria tag HTML que possui esse atributo, consequentemente somente essa tag será modificada.

    4. Outros exemplos de conteúdo CSS de como você também pode usar:
    h1 {color:red;}
    a {color: blue;}
    p { color : gray ; }
    div {margin-left:30px; color:#fff; background-color:Tomato;}

    Você pode usar: nomes de cores, cores hexadecimais, hsl (hue, saturation, lightness) , cores rgb (red, green, blue), rgba(red, green, blue, alpha) e hsla(hue, saturation, lightness, alpha), além de outras propriedades que você já notou nos exemplos e veremos de forma mais explicada.
seletores Os seletores nem sempre podem ser somente tags, ele podem ser também class, id,... Por exemplo, se você usar na tag HTML o atributo class="" e escolher um nome para ficar entre as aspas duplas você pode invocá-lo no CSS. Exemplo:
<p class="artigo">
Nesse caso você informou que sua tag possui o seletor class de nome artigo. E no CSS modificar esse seletor da seguinte forma (colocando um ponto  .  junto a ele no início da palavra:
.artigo {color: #4e9a06;} . Logo, automaticamente, todas tags que possuir esse seletor ficaram com a propriedade informada, nesse caso, com a cor indicada. Algumas coisas que você deve saber sobre os seletores:
  • Tags diferentes podem possuir o mesmo seletor:
    <p class="artigo">, <h4 class="artigo">, <a class="artigo">, ...
  • Elementos HTML também podem se referir a mais de uma classe, exs.: <div class="artigo pedra algo-sem-nome">
  • Você ainda pode especificar no CSS quais tags você deseja modificar, caso outras tags diferentes possuissem o mesmo seletor, ex.: div.artigo {color: #4e9a06;}, nesse caso só as tags div que possuem o selector artigo serão modificadas.
Existem outros seletores e outras formas de utilizá-los. O  * , por exemplo, seleciona todos os elementos:
* { propriedade : valor ; }
.class Seleciona e estiliza todos os elementos com id="outro" Na tag HTML: <tag class="exemplo">
No CSS: .exemplo {propriedade: valor;}
tag, pode ser diversas tags: p, a, img, h1, h6, div, label, fieldset... , bem como a propriedade e o valor referenciados, além do nome do seletor também, nesse caso exemplo mas como já foi dito, você poderia informar qualquer outro nome usando somente: letras, traços e números ou não.
#id Seleciona o elemento com id="materia", ex.:
Na tag HTML: <tag id="exemplo">
No CSS: #exemplo {propriedade: valor;}
Se uma .class possuir o mesmo nome que uma #id não haverá problema, no entanto, no css, só funcionará se chamar com o sinal correspondente do seletor, ex.:
#exemplo {propriedade: valor;} , só modifica os elementos/tags com id="exemplo"
.exemplo {propriedade: valor;} , só modifica os elementos/tags com class="exemplo"
elemento, elemento Separa por vígula os elementos que desejam que tenham a mesma alteração, pra não precisar ficar atribuindo os mesmos valores para as mesmas propriedades, evita o repetimento do código. Exs.:
div, p {propriedade: valor;}
div.artigo, p.entrada {propriedade: valor;}
div, p.outro {propriedade: valor;}
div, p, a, img.viagem {propriedade: valor;}
elemento elemento Separadas por espaço. Seleciona que estão dentro do elemento inicial, ex.: div p {propriedade: valor;} Todas as tags p

que estiverem dentro de div, receberão tal valor para determinada propriedade.
elemento>elemento Seleciona o "elemento pai" do elemento menor. Vamos supôr que você possui um código HTML assim:
<div>
  <p>
    <a href="endereco_link">Clique aqui</a>
  </p>
</div>
Se você tiver isso no seu CSS div > a {propriedade:valor;} , a tag/elemento  a  não sofreria modificação pela invocação que você fez no seu CSS, porque o "elemento pai" dela é o  a .
Pra que ela sofra modificação dentro da div, teria que ser assim: div > p > a {propriedade: valor;} , ou assim: div a {propriedade: valor;} , nesse último caso, até os elementos  a  que não possuíssem o "elemento pai"  a  também sofreria modificação.
elemento+elemento div+p {propriedade: valor} Seleciona todos os elementos <p> que são colocados IMEDIATAMENTE após os elementos <div>.
Exemplo: Somente o <p> imediatamente após a <div> , terão o fundo vermelho:
CSS: div+p {background-color: #ef2929;}
HTML: 
<h1>Conteúdo 1</h1>
<div>
  <h2>Conteúdo 2</h2>
  <p>Conteúdo 5</p> 
</div>
<p>Conteúdo 4</p> --> Esse aparecerá na página do navegador, assim: Conteúdo 4
<p>Conteúdo 5</p>
Existem outras formas de seletores e propriedades.
Dica: Utilize o FILTRO dessa página para consulta completa dos Seletores. Além de Pseudo Classes » seletor:pseudo-class, Pseudo Elementos » seletor::pseudo-elemento, funções, animações,... Vamos ver cada um deles nas Dicas Rápidas.
font-family Você pode modificar o tipo da font do seletor, com a seguinte sintaxe:
Sintaxe CSS: seletor {font-family: 'Primeira Família', 'Segunda Família', familia-generica;}
Exemplo, usar font Impact, logo seria assim:
CSS: div {font-family: Impact, Charcoal, sans-serif;}
Como vai aparecer no navegador:

Essa é a font Impact

Essa é a font padrão do texto



Obs.: Usei o termo 'Primeira Família', 'Segunda Família', familia-generica, pois o navegador tenta exibir a primeira família, se não conseguir, ele tenta a segunda família e se ambas não derem certo, ele exibe a forma genérica que é possível ser renderizada em qualquer navegador.

Veja a lista completa das possibilidades de font e pra ver a saída de cada uma delas, teste no seu navegador. Usei a Impact como exemplo, pois é a minha preferida. ;) 

font-family: Arial Black, Gadget, sans-serif;
font-family: Arial, Helvetica, sans-serif;
font-family: 'Comic Sans MS', cursive, sans-serif;
font-family: 'Courier New', Courier, monospace;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: 'Lucida Console', Monaco, monospace;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: 'Times New Roman', Times, serif;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
Unidades CSS tem várias unidades diferentes para expressar um comprimento.Muitas propriedades CSS recebem valores de "comprimento", como largura, margem, preenchimento, tamanho da fonte, largura da borda etc. Muitos desenvolvedores Web usam muito a unidade em e outros misturam vários tipos de unidade. Eu já prefiro usar o pixel e somente ele pra que o código fique padronizado. Exemplo de uso:
p {padding: 10px;} , não pode existir espaço entre o número e a unidade: p {padding: 10 px;}, a menos que o valor seja 0 (zero), podendo até ser omitido valor, caso você deseje. Unidades:
  • cm - centimeters
  • mm - millimeters
  • in - inches (1in = 96px = 2.54cm)
  • px * - pixels (1px = 1/96th of 1in)
  • pt - points (1pt = 1/72 of 1in)
  • pc - picas (1pc = 12 pt)
Vídeo https://youtube.com/TerminalRootTV

TODOS OS SELETORES
elemento1~elemento2 p~ul Seleciona todos os <ul> elemento que é precedido por um <p>
[atributo] [destino] Seleciona todos os elementos com um atributo de destino
[atributo=valor] [target=_blank] Seleciona todos os elementos com target="_blank"
[atributo~=valor] [título~=flor] Seleciona todos os elementos com um atributo title contendo a palavra "flor"
[atributo|=valor] [lang|=pt] Seleciona todos os elementos com um valor de atributo lang começando com "pt"
[atributo^=valor] a[href ^="https"] Seleciona todos os <a> elemento cujo valor de atributo href começa com "https"
[atributo$=valor] a[href$=".pdf"] Seleciona todos os <a> elemento cujo valor de atributo href termina com ".pdf"
[atributo*=valor] a[href *="terminalroot"] Seleciona todos os <a> elemento cujo valor de atributo href contém a substring "terminalroot"
:active a:active Seleciona o link ativo
::after p::after Insira algo após o conteúdo de cada <p>
::before p::before Insira algo antes do & nbsp; conteúdo de cada <p>
:checked input::checked Seleciona todas as tags <input>
:disabled input:disabled Seleciona todos os campos <input> desativados
:empty p:empty Seleciona todos os <p> elemento que não tem filhos (incluindo nós de texto)
:enabled input:enabled Seleciona todas as tags <input> ativadas
:first-child p:first-child Seleciona todos os <p> elemento que é o primeiro filho de seu pai
::first-letter p::first-letter Seleciona a primeira letra de todos os <p>
::first-line p::first-line Seleciona a primeira linha de todos os <p>
:first-of-type p:first-of-type Seleciona todos os <p> elemento que é o primeiro <p> elemento de seu pai
:focus input:focus Seleciona o elemento de entrada que tem foco
:hover a:hover Seleciona links no mouse sobre
:in-range input:in-range Seleciona elementos de entrada com um valor dentro de um intervalo especificado
:invalid input:invalid Seleciona todos os elementos de entrada com um valor inválido
:lang(language) p:lang(pt) Seleciona todos os <p> elemento com um atributo lang igual a "pt" (português)
:last-child p:last-child Seleciona todos os <p> elemento que é o último filho de seu pai
:last-of-type p:last-of-type Seleciona todos os <p> elemento que é o último <p> elemento de seu pai
:link a:link Seleciona todos os links não visitados
:not(selector) :not(p) Seleciona todos os elementos que não são <p>
:nth-child(n) p:nth-child(2) Seleciona todos os <p> elemento que é o segundo filho de seu pai
nth-last-child(n) p:nth-last-child(2) Seleciona todos os <p> elemento que é o segundo filho de seu pai, contando a partir do último filho
:nth-last-of-type(n) p:nth-last-of-type(2) Seleciona todos os <p> elemento que é o segundo <p> elemento de seu pai, contando a partir do último filho
nth-of-type(n) p:nth-of-type(2) Seleciona todos os <p> elemento que é o segundo <p> elemento de seu pai
:only-of-type p:only-of-type Seleciona todos os <p> elemento que é o único <p> elemento de seu pai
:only-child p:only-child Seleciona todos os <p> elemento que é o único filho de seu pai
:optional input:optional Seleciona elementos de entrada sem o atributo "required"
:out-of-range input:out-of-range Seleciona elementos de entrada com um valor fora de um intervalo especificado
:read-only input:read-only Seleciona elementos de entrada com o atributo "readonly" especificado
:read-write input:read-write Seleciona elementos de entrada com o atributo "readonly" NÃO especificado
:required input:required Seleciona os elementos de entrada com o atributo "required" especificado
:root :root Seleciona o elemento raiz do documento
::selection ::selection Seleciona a parte de um elemento que é selecionado por um usuário
:target #artigo:target Seleciona o elemento atual #artigo ativo (clicado em um URL contendo esse nome de âncora)
:valid input:valid Seleciona todos os elementos de entrada com um valor válido
:visited a:visited Seleciona todos os links visitados

TODAS AS FUNÇÕES
attr() Retorna o valor de um atributo do elemento selecionado
calc() Permite que você execute cálculos para determinar os valores da propriedade CSS
cubic-bezier() Define uma curva de Bezier cúbica
hsl() Define as cores usando o modelo Hue-Saturation-Lightness (HSL)
hsla() Define cores usando o modelo de Hue-Saturation-Lightness-Alpha (HSLA)
gradiente linear() Define um gradiente linear como imagem de fundo. Defina pelo menos dois cores (de cima para baixo)
gradiente radial() Define um gradiente radial como a imagem de fundo. Defina pelo menos dois cores (do centro para as bordas)
repetição-linear-gradiente() Repete um gradiente linear
repetição-radial-gradiente() Repete um gradiente radial
rgb() Define cores usando o modelo Vermelho-Verde-Azul (RGB)
rgba() Define as cores usando o modelo Vermelho-Verde-Azul-Alfa (RGBA)
var() Insere o valor de uma propriedade customizada

TODAS AS PROPRIEDADES
align-content Especifica o alinhamento entre as linhas dentro de um contêiner flexível quando os itens não usam todo o espaço disponível
align-items Especifica o alinhamento de itens dentro de um contêiner flexível
align-self Especifica o alinhamento para itens selecionados dentro de um contêiner flexível
all Redefine todas as propriedades (exceto unicode-bidi e direction)
animation Uma propriedade abreviada para todas as propriedades de animação
animation-delay Especifica um atraso para o início de uma animação
animation-direction Especifica se uma animação deve ser reproduzida para frente, para trás ou em ciclos alternativos
animation-duration Especifica quanto tempo uma animação deve demorar para concluir um ciclo
animation-fill-mode Especifica um estilo para o elemento quando a animação não está sendo reproduzida (antes de iniciar, depois de terminar ou ambos)
animation-iteration-count Especifica o número de vezes que uma animação deve ser reproduzida
animation-name Especifica um nome para a animação @keyframes
animation-play-state Especifica se a animação está sendo executada ou pausada
animation-timing-function Especifica a curva de velocidade de uma animação
backface-visibility Define se a face posterior de um elemento deve ou não estar visível ao se deparar com o usuário
background Uma propriedade abreviada para definir todas as propriedades de plano de fundo em uma declaração
background-attachment Define se uma imagem de plano de fundo rola com o restante da página ou é corrigida
background-blend-mode Especifica o modo de mesclagem de cada camada de plano de fundo (cor / imagem)
background-clip Define o quanto o fundo (cor ou imagem) deve se estender dentro de um elemento
background-color Especifica a cor de fundo de um elemento
background-image Especifica uma ou mais imagens de fundo para um elemento
background-origin Especifica a posição de origem de uma imagem de plano de fundo
background-position Especifica a posição de uma imagem de fundo
background-repeat Define se / como uma imagem de fundo será repetida
background-size Especifica o tamanho das imagens de fundo
border Uma propriedade abreviada para largura de borda, estilo de borda e cor de borda
border-bottom Uma propriedade abreviada para definir todas as propriedades da borda inferior em uma declaração
border-bottom-color Define a cor da borda inferior
border-bottom-left-radius Define o raio da borda do canto inferior esquerdo
border-bottom-right-radius Define o raio da borda do canto inferior direito
border-bottom-style Define o estilo da borda inferior
border-bottom-width Define a largura da borda inferior
border-collapse Define se as bordas da tabela devem ser recolhidas em uma única borda ou separadas
border-color Define a cor dos quatro limites
border-image Uma propriedade abreviada para definir todas as propriedades border-image- *
border-image-outset Especifica o valor pelo qual a área da imagem da borda se estende além da caixa da borda
border-image-repeat Especifica se a imagem da borda deve ser repetida, arredondada ou esticada
border-image-slice Especifica como dividir a imagem da borda
border-image-source Especifica o caminho para a imagem a ser usada como limite
border-image-width Especifica a largura da imagem da borda
border-left Uma propriedade abreviada para definir todas as propriedades da borda esquerda em uma declaração
border-left-color Define a cor da borda esquerda
border-left-style Define o estilo da borda esquerda
border-left-width Define a largura da borda esquerda
border-radius Uma propriedade abreviada para definir todas as quatro propriedades border - * - radius
border-right Uma propriedade abreviada para definir todas as propriedades da borda direita em uma declaração
border-right-color Define a cor da borda direita
border-right-style Define o estilo da borda direita
border-right-width Define a largura da borda direita
border-spacing Define a distância entre as bordas das células adjacentes
border-style Define o estilo das quatro fronteiras
border-top Uma propriedade abreviada para definir todas as propriedades da borda superior em uma declaração
border-top-color Define a cor da borda superior
border-top-left-radius Define o raio da borda do canto superior esquerdo
border-top-right-radius Define o raio da borda do canto superior direito
border-top-style Define o estilo da borda superior
border-top-width Define a largura da borda superior
border-width Define a largura das quatro bordas
bottom Define a posição dos elementos, da parte inferior de seu elemento pai
box-decoration-break Define o comportamento do plano de fundo e da borda de um elemento na quebra de página ou, para elementos in-line, na quebra de linha.
box-shadow Anexa uma ou mais sombras a um elemento
box-sizing Define como a largura e a altura de um elemento são calculadas: devem incluir preenchimento e bordas ou não
break-after Especifica o comportamento de quebra de página, coluna ou região após a caixa gerada
break-before Especifica o comportamento de quebra de página, coluna ou região antes da caixa gerada
break-inside Especifica o comportamento de quebra de página, coluna ou região dentro da caixa gerada
caption-side Especifica o posicionamento de uma legenda de tabela
caret-color Especifica a cor do cursor (circunflexo) em entradas, áreas de texto ou qualquer elemento que seja editável
@charset Especifica a codificação de caracteres usada na folha de estilo
clear Especifica em quais lados de um elemento elementos flutuantes não podem flutuar
clip Clips um elemento absolutamente posicionado
color Define a cor do texto
column-count Especifica o número de colunas que um elemento deve ser dividido em
column-fill Especifica como preencher colunas, balanceadas ou não
column-gap Especifica o intervalo entre as colunas
column-rule Uma propriedade abreviada para configurar todas as propriedades column-rule- *
column-rule-color Especifica a cor da regra entre colunas
column-rule-style Especifica o estilo da regra entre colunas
column-rule-width Especifica a largura da regra entre colunas
column-span Especifica quantas colunas um elemento deve abranger
column-width Especifica a largura da coluna
columns Uma propriedade abreviada para configuração de largura de coluna e contagem de colunas
content Usado com os pseudo-elementos: before e: after, para inserir conteúdo gerado
counter-increment Aumenta ou diminui o valor de um ou mais contadores CSS
counter-reset Cria ou redefine um ou mais contadores CSS
cursor Especifica o cursor do mouse a ser exibido ao apontar sobre um elemento
direction Especifica a direção do texto / direção da escrita
display Especifica como um determinado elemento HTML deve ser exibido
empty-cells Especifica se deve ou não exibir bordas e plano de fundo em células vazias em uma tabela
filter Define efeitos (por exemplo, desfoque ou mudança de cor) em um elemento antes que o elemento seja exibido
flex Uma propriedade abreviada para as propriedades flex-grow, flex-shrink e flex-basis
flex-basis Especifica o comprimento inicial de um item flexível
flex-direction Especifica a direção dos itens flexíveis
flex-flow Uma propriedade abreviada para as propriedades flex-direction e flex-wrap
flex-grow Especifica quanto o item crescerá em relação ao restante
flex-shrink Especifica como o item será reduzido em relação ao restante
flex-wrap Especifica se os itens flexíveis devem envolver ou não
float Especifica se uma caixa deve ou não flutuar
font Define todas as propriedades da fonte em uma declaração
@font-face Uma regra que permite que sites façam o download e usem fontes diferentes das fontes "web-safe"
font-family Especifica a família de fontes para texto
font-feature-settings Permite o controle sobre recursos tipográficos avançados em fontes OpenType
@ font-feature-values Permite que os autores usem um nome comum em font-variant-alternate para o recurso ativado de forma diferente no OpenType
font-kerning Controla o uso das informações de kerning (como as letras são espaçadas)
font-language-override Controla o uso de glifos específicos de idioma em um tipo de letra
font-size Especifica o tamanho da fonte do texto
font-size-adjust Preserva a legibilidade do texto quando ocorre um fallback de fonte
font-stretch Seleciona uma face normal, condensada ou expandida de uma família de fontes
font-style Especifica o estilo da fonte para o texto
font-synthesis Controla quais tipos de letra ausentes (negrito ou itálico) podem ser sintetizados pelo navegador
font-variant Especifica se um texto deve ou não ser exibido em uma fonte small-caps
font-variant-alternates Controla o uso de glifos alternativos associados a nomes alternativos definidos em @ font-feature-values
font-variant-caps Controla o uso de glifos alternativos para letras maiúsculas
font-variant-east-asian Controla o uso de glifos alternativos para scripts do Leste Asiático (por exemplo, japonês e chinês)
font-variant-ligatures Controla quais ligaduras e formas contextuais são usadas no conteúdo textual dos elementos aos quais se aplica
font-variant-numeric Controla o uso de glifos alternativos para números, frações e marcadores ordinais
font-variant-position Controla o uso de glifos alternativos de tamanho menor posicionados como sobrescritos ou subscritos em relação à linha de base da fonte
font-weight Especifica o peso de uma fonte
grid Uma propriedade abreviada
grid-area Especifica um nome para o item de grade ou essa propriedade é uma propriedade abreviada para as propriedades grid-row-start , grid-column-start , grid-row-end e grid-column-end
grid-auto-columns Especifica um tamanho de coluna padrão
grid-auto-flow Especifica como os itens inseridos automaticamente são inseridos na grade
grid-auto-rows Especifica um tamanho de linha padrão
grid-column Uma propriedade abreviada para as propriedades grid-column-start e grid-column-end
grid-column-end Especifica onde terminar o item da grade
grid-column-gap Especifica o tamanho do intervalo entre colunas
grid-column-start Especifica onde iniciar o item da grade
grid-gap Uma propriedade abreviada para as propriedades grid-row-gap e grid-column-gap
grid-row Uma propriedade abreviada para as propriedades grid-row-start e grid-row-end
grid-row-end Especifica onde terminar o item da grade
grid-row-gap Especifica o tamanho do intervalo entre linhas
grid-row-start Especifica onde iniciar o item da grade
grid-template Uma propriedade abreviada para as propriedades grid-template-rows , grid-template-columns e grid-areas
grid-template-areas Especifica como exibir colunas e linhas, usando itens de grade nomeados
grid-template-columns Especifica o tamanho das colunas e quantas colunas em um layout de grade
grid-template-rows Especifica o tamanho das linhas em um layout de grade
hanging-punctuation Especifica se um caractere de pontuação pode ser colocado fora da caixa de linha
height Define a altura de um elemento
hyphens Define como dividir palavras para melhorar o layout dos parágrafos
image-rendering Dá uma dica ao navegador sobre quais aspectos de uma imagem são mais importantes para preservar quando a imagem é dimensionada
@import Permite importar uma folha de estilo para outra folha de estilo
isolation Define se um elemento deve criar um novo conteúdo de empilhamento
justify-content Especifica o alinhamento entre os itens dentro de um contêiner flexível quando os itens não usam todo o espaço disponível
@keyframes Especifica o código da animação
left Especifica a posição esquerda de um elemento posicionado
letter-spacing Aumenta ou diminui o espaço entre os caracteres em um texto
line-break Especifica como/se quebrar linhas
line-height Define a altura da linha
list-style Define todas as propriedades de uma lista em uma declaração
list-style-image Especifica uma imagem como o marcador de item de lista
list-style-position Especifica a posição dos marcadores de item de lista (marcadores)
list-style-type Especifica o tipo de marcador de item de lista
margin Define todas as propriedades da margem em uma declaração
margin-bottom Define a margem inferior de um elemento
margin-left Define a margem esquerda de um elemento
margin-right Define a margem direita de um elemento
margin-top Define a margem superior de um elemento
max-height Define a altura máxima de um elemento
max-width Define a largura máxima de um elemento
@media Define as regras de estilo para diferentes tipos de mídia / dispositivos / tamanhos
min-height Define a altura mínima de um elemento
min-width Define a largura mínima de um elemento
object-fit Especifica como o conteúdo de um elemento substituído deve ser ajustado à caixa estabelecida por sua altura e largura usadas
object-position Especifica o alinhamento do elemento substituído dentro de sua caixa
opacity Define o nível de opacidade de um elemento
order Define a ordem do item flexível em relação ao restante
orphans Define o número mínimo de linhas que devem ser deixadas na parte inferior de uma página quando ocorre uma quebra de página dentro de um elemento
outline Define todas as propriedades de estrutura de tópicos em uma declaração
outline-color Define a cor de um contorno
outline-offset Compensa um contorno e o desenha além da borda da borda
outline-style Define o estilo de um contorno
outline-width Define a largura de um contorno
overflow
 Especifica o que acontece se o conteúdo ultrapassar a caixa de um elemento
overflow-wrap Especifica se o navegador pode ou não quebrar linhas dentro de palavras para evitar estouro (quando uma cadeia é muito longa para caber em sua caixa contendo)
overflow-x Especifica se deve ou não recortar as arestas esquerda / direita do conteúdo, se ultrapassar a área de conteúdo do elemento
overflow-y Especifica se deve ou não recortar as arestas superior / inferior do conteúdo, se ultrapassar a área de conteúdo do elemento
padding Define todas as propriedades de preenchimento em uma declaração
padding-bottom Define o preenchimento inferior de um elemento
padding-left Define o preenchimento esquerdo de um elemento
padding-right Define o preenchimento correto de um elemento
padding-top Define o preenchimento superior de um elemento
page-break-after Define o comportamento de violação de página após um elemento
page-break-before Define o comportamento de violação de página antes de um elemento
page-break-inside Define o comportamento de violação de página dentro de um elemento
perspective Dá a um elemento posicionado em 3D alguma perspectiva
perspective-origin Define em qual posição o usuário está olhando para o elemento 3D
pointer-events Define se um elemento reage ou não a eventos de ponteiro
position Especifica o tipo de método de posicionamento usado para um elemento (estático, relativo, absoluto ou fixo)
quotes Define o tipo de aspas para citações incorporadas
resize Define se (e como) um elemento é redimensionável pelo usuário
right Especifica a posição correta de um elemento posicionado
tab-size Especifica a largura de um caractere de tabulação
table-layout Define o algoritmo usado para dispor as células, linhas e colunas da tabela
text-align Especifica o alinhamento horizontal do texto
text-align-last Descreve como a última linha de um bloco ou uma linha logo antes de uma quebra de linha forçada é alinhada quando o alinhamento de texto é "justificado"
text-combine-upright Especifica a combinação de vários caracteres no espaço de um único caractere
text-decoration Especifica a decoração adicionada ao texto
text-decoration-color Especifica a cor da decoração de texto
text-decoration-line Especifica o tipo de linha em uma decoração de texto
text-decoration-style Especifica o estilo da linha em uma decoração de texto
text-indent Especifica o recuo da primeira linha em um bloco de texto
text-justify Especifica o método de justificação usado quando o alinhamento de texto é "justificado"
text-orientation Define a orientação do texto em uma linha
text-overflow Especifica o que deve acontecer quando o texto ultrapassa o elemento que contém
text-shadow Adiciona sombra ao texto
text-transform Controla a capitalização do texto
text-underline-position Especifica a posição do sublinhado que é definido usando a propriedade de decoração de texto
top Especifica a posição superior de um elemento posicionado
transform Aplica uma transformação 2D ou 3D a um elemento
transform-origin Permite que você mude a posição nos elementos transformados
transform-style Especifica como os elementos aninhados são renderizados no espaço 3D
transition Uma propriedade abreviada para definir as quatro propriedades de transição
transition-delay Especifica quando o efeito de transição será iniciado
transition-duration Especifica quantos segundos ou milissegundos um efeito de transição leva para concluir
transition-property Especifica o nome da propriedade CSS para o qual o efeito de transição é
transition-timing-function Especifica a curva de velocidade do efeito de transição
unicode-bidi Usado junto com a propriedadedirectionpara definir ou retornar se o texto deve ser substituído para suportar vários idiomas no mesmo documento
user-select Especifica se o texto de um elemento pode ser selecionado
vertical-align Define o alinhamento vertical de um elemento
visibility Especifica se um elemento é visível ou não
white-space Especifica como o espaço em branco dentro de um elemento é manipulado
widows Define o número mínimo de linhas que devem ser deixadas no topo de uma página quando ocorre uma quebra de página dentro de um elemento
width Define a largura de um elemento
word-break Especifica como as palavras devem ser quebradas quando chegar ao final de uma linha
word-spacing Aumenta ou diminui o espaço entre palavras em um texto
word-wrap Permite que palavras longas e inquebráveis ​​sejam quebradas e quebradas na próxima linha
writing-mode
z-index Define a ordem da pilha de um elemento posicionado

TODOS AS APRESENTAÇÕES AUDÍVEIS

azimuth Define onde o som deve vir
cue Define as propriedades da sugestão em uma declaração
cue-after Especifica um som a ser reproduzido depois de falar o conteúdo de um elemento
cue-before Especifica um som a ser reproduzido antes de falar o conteúdo de um elemento
elevation Define onde o som deve vir
pause Define as propriedades de pausa em uma declaração
pause-after Especifica uma pausa depois de falar o conteúdo de um elemento
pause-before Especifica uma pausa antes de falar o conteúdo de um elemento
pitch Especifica a voz falada
pitch-range Especifica a variação na voz falada.(Voz monótona ou voz animada?)
play-during Especifica um som a ser reproduzido enquanto fala o conteúdo de um elemento
richness Especifica a riqueza da voz falada.(Voz rica ou voz fina?)
speak Especifica se o conteúdo será renderizado auditivamente
speak-header Especifica como manipular cabeçalhos de tabela. Os cabeçalhos devem ser falados antes de cada célula, ou apenas antes de uma célula com um cabeçalho diferente da célula anterior
speak-numeral Especifica como falar números
speak-punctuation Especifica como falar os caracteres de pontuação
speech-rate Especifica a velocidade do discurso
stress Especifica o "estresse" na voz falada
voice-family Especifica a família de voz do discurso
volume Especifica o volume do discurso
Bibliografia https://www.w3.org/CSS/
https://pt.wikipedia.org/wiki/Cascading_Style_Sheets
https://pt.wikipedia.org/wiki/CSS3
http://terminalroot.sh/css