Muito além das palavras e dos elementos - Revelando o CSS!

#CSS

Como o HTML, o famoso CSS (para quem é curioso saiba que Cascading Style Sheets é o mesmo que CSS) não é uma linguagem de programação. O CSS é uma linguagem de estilos que atua diretamente no HTML.

O CSS vem para resolver um grande problema, considerando que o HTML não é destinado para conter tags de formatação e sim foi criado para descrever conteúdo.

Daí quando aparece no HTML 3.2 tags que permitiam estilizar alguns elementos, isso acabou se tornando uma grande dor de cabeça já que os códigos acabavam ficando muito extenso e consequentemente ficava mais caro.

O CSS vai permitir estilizar uma página HTML com vários estilos diferentes, reduzindo consideravelmente o trabalho dos Dev’s.

Existe duas formas dos estilos poderem ser aplicados diretamente no documento HTML, mas normalmente e visando uma boa prática, as folhas de estilos são armazenados em arquivos CSS. Logo existem três maneiras de inserir CSS,interno, embutido e externo.

A folha de estilo externa permite alterar a aparência do documento por meio de um arquivo externo que deve ser vinculado por meio do elemento link no head.

Na página HTML é possível adicionar o elemento <style> dentro da seção head essa forma de estilização é chamada de CSS interno ou o estilo ainda é possível embutir no elemento a estilização que será feita, dessa forma deve adicionar o atributo style a frente do elemento.

Pela regra a prioridade nos casos que tiver mais de um estilo especificado para o elemento é primeiro o estilo embutido, seguindo das folhas de estilos externas e internas e por último o padrão do navegador.

Os estilos permitidos pelo CSS são os mais variados possíveis, dentre eles se destacam design, layout e variações de exibição em telas diferentes.

Muito além das palavras e dos elementos - Conhecendo o CSS!

Sintaxe no CSS

Exemplo de Sintaxe no CSS

Exemplo de Seletor Simples - Nome

Exemplo de Seletor Simples - id

Exemplo de Seletor Simples - Classe

Exemplo de Seletor Simples - Universal

Exemplo de Seletor Simples - Agrupamento

Exemplo de Seletor Descendente

Exemplo de Seletor Filho

Exemplo de Seletor Irmão Adjacentes

Exemplo de Seletor Geral de Irmãos

Exemplo de pseudo-classes

Resumo de todas as pseudoclasses:

Resumo dos pseudo elementos

As Cores no CSS

Planos de Fundo

Exemplo de Alteração do Plano de Fundo - Cor

Exemplo de Alteração do Plano de Fundo - Imagem

Exemplo de Alteração do Plano de Fundo - Repetição de Imagem

Exemplo de Alteração do Plano de Fundo - Posição da Imagem

Exemplo de Alteração do Plano de Fundo - Fixação da imagem

Exemplo de Alteração do Plano de Fundo - Abreviação

Exemplo de Múltiplos Fundos

Exemplo de Fundo com gradiente

Exemplo de Fundo com gradiente radial

Exemplo de Fundo com gradiente cônico

Resumo das funções de gradiente

Resumo de todas as propriedades de plano de fundo:

Bordas

Exemplo de Alteração da Borda - Específica

Exemplo de Alteração da Borda - 4 valores

Exemplo de Alteração da Borda - 3 valores

Exemplo de Alteração da Borda - 2 valores

Exemplo de Alteração da Borda - 1 valores

Exemplo de Alteração da Borda - abreviação

Exemplo de Alteração da Borda - arredondadas

Exemplo de Alteração da Borda - arredondadas com 4 valores

Exemplo de Alteração da Borda - Imagem

Resumo de todas as propriedades de borda

Margem

Exemplo de Alteração da Margem - 4 valores

Exemplo de Alteração da Margem - 3 valores

Exemplo de Alteração da Margem - 2 valores

Exemplo de Alteração da Margem - 1 valores

Resumo das propriedades de margem

Preenchimento

Exemplo de Alteração do Preenchimento - 4 valores

Exemplo de Alteração do Preenchimento - 3 valores

Exemplo de Alteração do Preenchimento - 2 valores

Exemplo de Alteração do Preenchimento - 1 valores

Exemplo de Alteração do Preenchimento e largura do elemento

Resumo das propriedades de preenchimento

Dimensão

Resumo das propriedades de dimensão

Outline ou Contorno

Exemplo de Alteração do Contorno - Abreviação

Exemplo de Alteração do Contorno - Deslocamento do Contorno

Resumo das propriedades de contorno

Textos

Exemplo de Alteração do texto - abreviação da decoração

Exemplo de Alteração do texto - sombra

Resumo de propriedades que alteram o texto.

Fontes

Exemplo de Fonte conforme a sua família

Exemplo de inclusão de fonte pelo Google Fonts

Exemplo de Alteração de tamanho da fonte - combinação de % + EM

Exemplo de Alteração de tamanho da fonte - responsivo vw

Exemplo de Alteração da fonte - abreviação da dont

Exemplo de Regra @font-face

Descritores de fontes (@font-face)

Resumo das propriedades da fonte

Resumo das propriedades que podem ser usadas em tabela

Layout - Propriedade de exibição

Resumo de propriedades de exibição e visualização

Transformações

Resumo das propriedades de transformação

Resumo das funções associadas às transformações 2D

Resumo das funções associadas às transformações 3D

Transição

Resumo das Propriedades de transição

Animação

Exemplo de Animação - abreviação

Resumo de Propriedade de Animação

Propriedade de Ajuste de Objeto

Resumo de Propriedade de Objeto

Mascaramento

Resumo das propriedades usadas para mascaramento.

Variáveis

Sintaxe da função var()

Flexbox

Resumo das propriedades Flexbox

Sintaxe no CSS

O CSS vai ser composto por uma seletora que vai apontar para um elemento HTML que será estilizado por meio de um bloco de declaração.

Antes de começar a falar diretamente da sintaxe é preciso saber que é possível fazer comentários no CSS que ajudam a documentar o códgio-fonte, mas não será lido pelo navegador.

Acontece similar no HTML, mas no CSS o comentário é colocar dentro do style (interno ou externo) e começa com barra e asterisco (/*) e termina com asterisco e barra (*/).

O bloco de declaração será cercado por chaves ({}) e pode ser composto por um ou mais declarações que devem ser separadas por ponto e vírgula (;), cada declaração vai conter uma propriedade do CSS e um valor que deve está separado por dois pontos (:).

Exemplo de Sintaxe no CSS

Seletor

bloco de declaração

h1 { color:blue; font-size:12 px;}

{color:

blue;

font-size:

12px;}

Seletor

Propriedade

Valor

Propriedade

Valor

Os seletores localizam o elemento HTML que está sendo informado no código. Atualmente existe cinco categoria de seletores no CSS:

Seletores simples - vai selecionar elementos pelo nome, id e class.
O seletor de elemento vai localizar com base no nome do elemento.

Exemplo de Seletor Simples - Nome

p { text-align: center; color: blue;}

Seleciona todos os elementos <p>

O seletor de elemento por id , será usado para selecionar um elemento específico. Lembrando que o id só deve ser usado uma única vez dentro da página. Antes do nome do elemento será adicionado hashtag (#). Importante um nome id não poderá começar com um número!

Exemplo de Seletor Simples - id

#unico { text-align: center; color: blue;}

Seleciona o elemento com id="unico"

O seletor de classe vai selecionar um elemento com um atributo específico de classe. Para definir um classe vai se escrever o nome seguido de um ponto (.).

Exemplo de Seletor Simples - Classe

.escola { text-align: center; color: blue;}

Seleciona todos os elementos com class="escola"

A classe simples ainda conta com mais duas variações que são os seletor universal e o seletor de agrupamento.

O seletor de elemento universal vai selecionar todos os elementos no documento HTML, é representado pelo asterisco (*).

Exemplo de Seletor Simples - Universal

* { text-align: center; color: blue;}

Seleciona todos os elementos

O seletor de agrupamento vai selecionar todos elementos com as mesma definição de estilo.

Exemplo de Seletor Simples - Agrupamento

h1, h2 e p { text-align: center; color: blue;}

Seleciona todos os elementos <h1>, <h2> e todos os elementos <p>

Seletores de combinação - Poderá conter mais de um seletor simples, existem quatro diferentes combinações:
Seletor descendente (espaço) - vai corresponder a todos os elementos que são descendentes de um determinado elemento.

Exemplo de Seletor Descendente

div p { backgrond-color: red;}

Esse comando vai selecionar todos os elementos <p> dentro dos elementos <div>.

Seletor filho (>) - vai selecionar todos elementos que são filhos do elemento especificado.

Exemplo de Seletor Filho

div > p { backgrond-color: red;}

Seleciona todos os elementos <p> onde o pai é um elemento <div>

Seletor de irmãos adjacentes (+) - Vai ser usado para selecionar um elemento que está diretamente após outros elementos, logo elementos irmãos devem ter o mesmo pai.

Exemplo de Seletor Irmão Adjacentes

div + p { backgrond-color: red;}

Seleciona o primeiro elemento <p> que é colocado imediatamente após os elementos <div>

Seletor Geral de Irmãos (~) - irá selecionar todos os elementos que são os próximos irmãos de um determinado elementos.

Exemplo de Seletor Geral de Irmãos

div ~ p { backgrond-color: red;}

Seleciona todos os elementos <p> que são precedidos por um elemento <div>

Na sintaxe do CSS temos ainda as pseudo-classes, é usado para definir um estado especial, servindo para estilizar um elemento quando o mouse é passado por cima, ou informando os links visitados ou não são alguns exemplos.

Exemplo de pseudo-classes

selector: pseudo-class {

property: value;

}

Existe uma pseudo-classes âncora que permite estilizar os links de diferentes maneiras a:link, a:visited, a:houver, a:active. Mas existe uma regra para aplicação dessas pseudo-classes âncora onde a:houver deve vir depois a:link e a:visited e a:active deve vir depois a:houver. Outra coisa importante é saber que as pseudo-classes podem ser combinadas com as classes HTML.

E o pseudoelemento é usado para estilizar partes específicas de um elemento, pode exemplo pode ser usado numa primeira letra, linha ou elemento.

É importante saber que o pseudoelemento ::first-line só pode se aplicado a elementos de blocos:

propriedades da fonte
propriedades de cor
propriedades de fundo
espaçamento entre palavra
espaçamento entre letras
decoração de texto
alinhamento vertical
transformação de texto
altura da linha
claro

Já o ::fist-letter é usado para alterar a primeira letra de um texto. Esse pseudoelemento só pode ser aplicado a elementos de nível de blocos.

propriedade da fonte
propriedade de cor
propriedade de fundo
propriedade de margem
propriedade de preenchimento
propriedade de borda
decoração de texto
vertical-align (somente se “float” for “none”)
transformação de texto
altura da linha
flutuador
claro

Os pseudo-elementos podem ser combinados com classes HTML e com outros peseudo-elementos.

Resumo de todas as pseudoclasses:

:active - Seleciona o link ativo.
:checked - Seleciona cada elemento <input> marcado.
:disabled - Seleciona cada elemento <input> desabilitado.
:empty - Seleciona cada elemento <elem> que não tem filhos.
:enabled - Seleciona cada elemento <input> habilitado.
:first-child - Seleciona todos os elementos <elem> que são o primeiro filho de seu pai.
:first-of-type - Seleciona cada elemento <elem> que é o primeiro elemento <elem> de seu pai.
:focus - Seleciona o elemento <input> que tem foco.
:hover - Seleciona links ao passar o mouse.
:in-range - Seleciona elementos <input> com um valor dentro de um intervalo especificado.
:invalid - Seleciona todos os elementos <input> com um valor inválido.
:lang(language) - Seleciona cada elemento <elem> com um valor de atributo lang começando com "no idioma".
:last-child - Seleciona todos os elementos <elem> que são o último filho de seu pai.
:link - Seleciona todos os links não visitados.
:not(selector) - Seleciona todo elemento que não seja um elemento <elem>.
:nth-child(n) - Seleciona cada elemento <elem> que é o segundo filho de seu pai.
:nth-last-child(n) - Seleciona cada elemento <elem> que é o segundo filho de seu pai, contando a partir do último filho.
:nth-last-of-type(n) - Seleciona cada elemento <elem> que é o segundo elemento <elem> de seu pai, contando a partir do último filho.
:nth-of-type(n) - Seleciona cada elemento <elem> que é o segundo elemento <elem> de seu pai.
:only-of-type - Seleciona cada elemento <elem> que é o único elemento <elem> de seu pai.
:only-child - Seleciona cada elemento <elem> que é o único filho de seu pai.
:optional - Seleciona elementos <input> sem atributo "obrigatório".
:out-of-range - Seleciona elementos <input> com um valor fora de um intervalo especificado.
:read-only - Seleciona elementos <input> com um atributo "somente leitura" especificado.
:read-write - Seleciona elementos <input> sem atributo "somente leitura".
:required - Seleciona elementos <input> com um atributo "obrigatório" especificado.
:root - Seleciona o elemento raiz do documento.
:target - Seleciona o elemento # ativo atual (clicado em um URL que contém esse nome de âncora).
:valid - Seleciona todos os elementos <input> com um valor válido.
:visited - Seleciona todos os links visitados.

Resumo dos pseudo elementos

::after - Inserir conteúdo após cada elemento <elem>.
::before - Inserir conteúdo antes de cada elemento <elem>
::first-letter - Seleciona a primeira letra de cada elemento <elem>
::first-line - Seleciona a primeira linha de cada elemento <elem>
::marker - Seleciona os marcadores dos itens da lista.
::selection - Seleciona a parte de um elemento que é selecionado por um usuário.

As Cores no CSS

Uma das estilização possíveis por meio do CSS é alterar a cor de um elemento. É possível alterar as cores por meio de comandos predefinidos ou alterando valores.

A estilização pode ocorrer da forma mais variadas é possível mudar a cor de fundo de um elemento, a cor do texto, a cor das bordas, são alguns exemplos de uso.

Quando falamos de comando predefinidos estamos falando dos nomes das cores, logo por meio do nome de uma determinada cor é possível estilizar o elemento, atualmente o CSS/HTML possui cores padrão.

Já a mudança por meio de alteração dos valores para mudar a cor do elemento poderá ocorrer de três formas diferentes, pelo RGB, HEX e HSL.

O RGB permite mudar a cor do elemento por meio da alteração dos valores entre 0 a 255 das cores vermelho, verde e azul, logo o parâmetro a ser usado seria rgb(255 , 255, 255).

Existe uma extensão do RGB que é conhecida como RGBA onde é incluída no final um canal alfa que vai permitir controlar a opacidade da cor, ficando esse parâmetro da seguinte forma rgba (vermelho, verde, azul e alfa). Os valores para alterar o alfa vai ficar entre 0,0 (totalmente transparente) e 1,0 (nada transparente), logo no documento CSS teriamos como exemplo de aplicação: rgba(255, 99, 71, 0,5).

A segunda forma de alterar a cor do elemento e por meio do padrão HEX que é especificada com #RRGGBB, que são representados por números inteiros hexadecimais onde RR vai alterar a cor vermelha, GG a cor verde e BB a cor azul, por exemplo #ff6347.

E a terceira forma é alterando a matiz, saturação e luminosidade (HSL).

A matiz vai definir qual é a cor a ser trabalhada, trata-se de uma escala de 0 a 360, onde o 0 é o vermelho, 120 é verde e 240 azul.

A saturação definirá a intensidade da cor, sendo 100% sem tons de cinza, 50% cinza que ainda é capaz de ver a cor ou 0% que é completamente cinza, onde não se pode mais ver a cor.

E a luminosidade ou leveza vai permitir alterar a claridade da cor, onde 0% representa o preto sem nenhuma luz, 50% nem claro e nem escuro e 100% vai representar a sua luminosidade total.

O HSL como o RGB possui uma extensão chamada de HSLA onde representa matiz, saturação, luminosidade e alfa. O parâmetro alfa vai ser representado entre os números 0,0 a 1,0 e vai definir a transparência do elemento.

A representação no CSS do HSL seria hsl (0, 100%,50%) e enquanto o HSLA ficaria hsla (0, 100%, 50%, 0,5).

A opacidade vai trabalhar a transparência de um elemento. A propriedade opacity tem um valor 0,0 a 0,1, sendo que quanto menor o valor mais transparente.

Ao usar a propriedade para adicionar a transparência em um elemento, logo todos seus filhos irão herdar a sua transparência.

Combinando com a propriedade opacity com pseudoclasse :hover vai gerar o efeito de passar o mouse o elemento vai ficar transparente.

Planos de Fundo

O famoso background no CSS permite que alterações sejam realizadas no plano de fundo dos elementos.

O background tem as seguintes propriedades principal: color, image, repeat, attachment e position.

A cor de fundo poderá ser alterada pelo background-color e sua cor poderá ser alterada pela mesma regra de alteração geral de cor dos elementos e poderá ser alterada opacidade pela propriedade específica opactity que irá ter um valor entre 0,0 a 0,1.

Exemplo de Alteração do Plano de Fundo - Cor

body { background-color: red; opacity: 0.3;}

A cor ainda poderá ser alterada usando o padrão HEX ou RGB.

Importante saber que ao usar a propriedade opacity a transparência será herdada por todos elementos filhos, mas caso você queira poderá aplicar a transparência por meio do RGBA ou HSLA.

Também é possível alterar o fundo adicionando uma imagem, a propriedade background-image a uma determinado elemento.

Exemplo de Alteração do Plano de Fundo - Imagem

body { background-image: url(“papel.png”);}

A imagem de fundo também poderá ser definida em elementos específicos como por exemplo <p>

Saiba que por padrão a imagem irá ser repetida até cobrir todo o elemento, tanto na horizontal (eixo x) como na vertical (eixo y).

É possível definir qual eixo será repetido pela propriedade background-repeat: repeat - (x ou y), também é possível definir para não ter repetição nesse caso ficaria background-repeat: no-repeat.

Exemplo de Alteração do Plano de Fundo - Repetição de Imagem

body {

background-repeat: repeat-x;

}

Lista de valores da propriedade background-repeat:

repeat-x (horizontalmente)

repeat-y (verticalmente)

no-repeat (sem repetição)

Além de permitir repetir ou não imagem é possível especificar qual é a posição que imagem de fundo pode ocupar no elemento.

Exemplo de Alteração do Plano de Fundo - Posição da Imagem

body {

background-repeat: no-repeat;

background-position: right-top;

}

Lista de valores da propriedade background-position:

Valores chave:

background-position: top;

background-position: bottom;

background-position: left;

background-position: right;

background-position: center;

Além dos valores chave, podem ser expressos por valores: percentuais, espessura, múltiplas imagens, relativos e globais.

Ainda é possível se a imagem pode ser uma fixa ou se poderá rola com o resto da página. Esse valor será aplicado pela propriedade background-attachment.

Exemplo de Alteração do Plano de Fundo - Fixação da imagem

body {

background-repeat: no-repeat;

background-position: right-top;

background-attachment: fixed;

}

Outro valor aplicado nesta propriedade é o scroll.

Saiba que existe a possibilidade abreviar todas as propriedades de imagem usando apenas background seguido dos valores color, image, repeat, position, ficando como demonstrado abaixo:

Exemplo de Alteração do Plano de Fundo - Abreviação

Body {

background:

#ffffff

url (“papel.png”)

no-repeat

fixed

right-top

propriedade

color

image

repeat

attachment

position

}

A ordem para abreviar os valores são: color, image, repeat, attachment, position. Mas é importante saber que caso algum dos valores não esteja em branco a abreviação vai continuar a ocorrer desde que os outros valores estejam seguindo a ordem.

É possível adicionar várias imagens de fundo a um elemento, isso ocorre por meio da propriedade backgorund-image, as diferenças imagens serão separadas por vírgulas. Para que as imagens possam ser ajustadas devem ser usadas as propriedades background-postion e background-repeat também separados por vírgulas os valores de cada imagem.

É possível usar a abreviação na propriedade background é capaz de alterar a imagem com uso de todas as propriedades acima

Exemplo de Múltiplos Fundos

#exemplo {

background: url(“papel.png”), right bottom no-repat, url(“pedra.png”), left top repeat;

}

Com a propriedade background-size é possível alterar o tamanho das imagens de fundo. Existem outros dois valores que podem alterar o tamanho do plano de fundo são contain (dimensiona a imagem de fundo para ser o maior possível) e cover (dimensiona a imagem de fundo para que a área de conteúdo seja completamente coberta pela imagem de fundo).

A propriedade background-size também aceita vários valores para imagens diferentes precisa apenas está separada por vírgula.

É possível colocar uma imagens de fundo em tamanho real que venha cobrir toda a janela do navegador o tempo todo, para isso o valor cover na propriedade background-size vai ser fundamental em conjunto com os valores no-repeat, center e fixed na propriedade background.

O CSS permite que plano de fundos exiba a transição de duas ou mais cores, o que é chamado de gradiente.

Exemplo de Fundo com gradiente

#box1 {

}

Pode também ser criado gradiente radial, que por padrão irá forma uma elipse.

Exemplo de Fundo com gradiente radial

#box1 {

}

E pode ser feito o gradiente cônico que é a transição de cores girando em torno de um ponto central.

Exemplo de Fundo com gradiente cônico

#box1 {

}

Resumo das funções de gradiente

conic-gradient() - Cria um gradiente cônico. Defina pelo menos duas cores (em torno de um ponto central).
linear-gradient() - Cria um gradiente linear. Defina pelo menos duas cores (de cima para baixo).
radial-gradient() - Cria um gradiente radial. Defina pelo menos duas cores (centro para bordas).
repeating-conic-gradient() - Repete um gradiente cônico.
repeating-linear-gradient() - Repete um gradiente linear.
repeating-radial-gradient() - Repete um gradiente radial.

Resumo de todas as propriedades de plano de fundo:

background - Define todas as propriedades do plano de fundo em uma declaração.
background-attachment - Define se uma imagem de fundo é fixa ou rola com o resto da página.
background-clip - Especifica a área de pintura do plano de fundo.
background-color - Define a cor de fundo de um elemento.
background-image - Define a imagem de fundo para um elemento.
background-origin - Específica onde a(s) imagem(ns) de fundo está(ão) posicionada(s).
background-position - Define a posição inicial de uma imagem de fundo.
background-repeat - Define como uma imagem de fundo será repetida.
background-size - Especifica o tamanho das imagens de fundo.

Bordas

No CSS é possível adicionar bordas aos elementos e essas bordas podem ser dos mais variados estilos, larguras e cores.

A propriedade que permite mudar o estilo da borda é o border-style e são aceitos os seguintes valores:

dotted - Define uma borda pontilhada.
dashed - Define uma borda tracejada.
solid - Define uma borda sólida.
double - Define uma borda dupla.
groove - Define uma borda ranhurada 3D. O efeito depende do valor da cor da borda.
ridge - Define uma borda 3D estriada. O efeito depende do valor da cor da borda.
inset - Define uma borda de inserção 3D. O efeito depende do valor da cor da borda.
outset - Define uma borda inicial 3D. O efeito depende do valor da cor da borda.
none - Não define borda.
hidden - Define uma borda oculta.

Cada lado da borda poderá assumir um valor diferente, logo poderá definir um valor para borda superior, borda direita, borda inferior e borda esquerda.

Além do estilo de borda é possível alterar a largura da borda em todos os seus lados. Essa alteração irá ocorrer por meio da propriedade border-width e aceita os valores fixos thin (fino), medium (médio) e thick (grosso) e os tamanhos específicos em (px; em; pt; cm …).

As cores da borda podem ser alteradas por meio da propriedade border-color e podem ser definidas pelo nome, HEX, RGB, HSL e a transparência, lembrando se o border-color não estiver definido vai herdar a cor do elemento. Como no estilo de borda e na largura a cor poderá ser definida para cada lado do elemento.

Para alteração dos lados da borda do elemento poderá especificar border-top-(propriedade), border-right-(propriedade), border-bottom-(propriedade) e border-left-(propriedade). Entende-se como propriedade são as mudanças que podem ocorrer no elemento que já foram vista até aqui: style, color, width por exemplo.

Exemplo de Alteração da Borda - Específica

p {

border-top-color: red;

border-right-color: blue

border-bottom-color: red;

border-left-color: blue;

}

Essa é uma das formas de estilizar os lados de uma borda.

Sempre que um propriedade (style, color, wigth) relacionado à borda tiver quatro valores, cada lado irá respeitar os valores sendo que o primeiro é da borda superior, seguido do lado direito, borda inferior e finaliza borda da esquerda.

Exemplo de Alteração da Borda - 4 valores

p {

border-color: red blue red blue;

}

Todos os lados serão estilizados, mas seguindo a ordem:

borda superior será vermelha
borda da direita será azul
borda inferior será vermelha
borda da esquerda será azul

Quando a propriedade tiver apenas 3 valores, será alterada a borda superior, seguida das bordas da direita e da esquerda e por último a borda inferior.

Exemplo de Alteração da Borda - 3 valores

p {

border-color: red blue red;

}

Todos os lados serão estilizados, mas seguindo a ordem:

borda superior será vermelha
borda da direita e da esquerda será azul
borda inferior será vermelha

Quando a propriedade tiver apenas dois valores, será alterada a borda superior e inferior com primeiro valor e a borda da direita e da esquerda com seguindo valor.

Exemplo de Alteração da Borda - 2 valores

p {

border-color: red blue;

}

Todos os lados serão estilizados, mas seguindo a ordem:

borda superior e inferior será vermelha
borda da direita e da esquerda será azul

E quando a propriedade tiver apenas um valor todos os lados irá receber aquele valor.

Exemplo de Alteração da Borda - 1 valores

p {

border-color: red;

}

Todos os lados serão estilizados com a cor vermelha.

As propriedades border-width, border style e border-color podem simplesmente ser abreviadas pela propriedade border ou pela suas variações de lateralidade border-top, border-right, border-bottom e border-left. Dessa forma a propriedade conterá a ordem dos seguintes valores: width, style e color.

Exemplo de Alteração da Borda - abreviação

p {

border: 5 px solid red;

}

Todos os lados serão estilizados com a cor vermelha, com largura de 5 px em linha sólida.

É possível arredondar as bordas de um elemento para isso deverá se usar a propriedade border-radius com valor que deseja utilizar.

Exemplo de Alteração da Borda - arredondadas

p {

border: 5 px solid red;

border-radius: 5px;

}

Todos os lados serão estilizados com a cor vermelha, com largura de 5 px em linha sólida e ficaram arredondados.

O border-radius é uma abreviação para as propriedades border-top-left-radius, border-top-right-radius, border-bottom-left-radius e border-bottom-right-radius.

Quando propriedade border-radius tiver quatro valores associados, o primeiro vai ser referente ao canto superior esquerdo, o segundo ao canto superior direito, o terceiro ao canto inferior direito e o último ao canto inferior esquerdo.

Exemplo de Alteração da Borda - arredondadas com 4 valores

p {

border: 5 px solid red;

border-radius: 15px 50px 15px 50px;

}

Todos os lados serão estilizados com a cor vermelha, com largura de 5 px em linha sólida e ficaram arredondados ,sendo que:

canto superior esquerdo com 15px
canto superior direito com 50 px
canto inferior esquerdo com 15 px.
canto inferior direito com 50px

Quando tiver três valores do atributo border-radius, o primeiro vai ser aplicado ao canto superior esquerdo, o segundo ao canto superior direito e inferior esquerdo e o terceiro ao canto inferior direito.

Exemplo de Alteração da Borda - arredondadas com 4 valores

p {

border: 5 px solid red;

border-radius: 15px 50px 15px;

}

Todos os lados serão estilizados com a cor vermelha, com largura de 5 px em linha sólida e ficaram arredondados ,sendo que:

canto superior esquerdo com 15px
canto superior direito e inferior esquerdo com 50 px
canto inferior direito com 15px

Quando o border-radius tiver dois valores associados, o primeiro se aplica aos cantos superior esquerdo e inferior direito e o segundo valor aos cantos superior direito e inferior esquerdo.

Exemplo de Alteração da Borda - arredondadas com 4 valores

p {

border: 5 px solid red;

border-radius: 15px 50px;

}

Todos os lados serão estilizados com a cor vermelha, com largura de 5 px em linha sólida e ficaram arredondados ,sendo que:

canto superior esquerdo e inferior direito com 15px
canto superior direito e inferior esquerdo com 50 px

O CSS permite estilizar a borda de um elemento usando uma imagem como borda. Para realizar essa estilização vai usar a propriedade border-image. Para que o border-image funcione é necessário um atributo border.

A propriedade border-image é uma abreviação das propriedades border-image-source, border-image-slice, border-image-outset e border-image-repeat.

Exemplo de Alteração da Borda - Imagem

p {

border: 5 px solid transparent;

border-image: url (borda.png) 30 round;

}

A imagem será esticada para criar a borda.

Resumo de todas as propriedades de borda

border - Define todas as propriedades da borda em uma declaração.
border-bottom - Define todas as propriedades da borda inferior em uma declaração.
border-bottom-color - Define a cor da borda inferior.
border-bottom-style - Define o estilo da borda inferior.
border-bottom-width - Define a largura da borda inferior.
border-color - Define a cor das quatro bordas.
border-image - Uma propriedade abreviada para definir todas as propriedades border-image-*.
border-image-source - Especifica o caminho para a imagem a ser usada como borda.
border-image-slice - Especifica como cortar a imagem da borda.
border-image-width - Especifica as larguras da imagem da borda.
border-image-outset - Especifica a quantidade pela qual a área da imagem da borda se estende além da caixa da borda.
border-image-repeat - Specifies whether the border image should be repeated, rounded or stretched.
border-left - Define 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 - Define todas as quatro propriedades border-*-radius para cantos arredondados.
border-top-left-radius - Define a forma da borda do canto superior esquerdo.
border-top-right-radius - Define a forma da borda do canto superior direito.
border-bottom-right-radius - Define a forma da borda do canto inferior direito.
border-bottom-left-radius - Defines the shape of the border of the bottom-left corner.
border-right - Define 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-style - Define o estilo das quatro bordas.
border-top - Define todas as propriedades da borda superior em uma declaração.
border-top-color - Define a cor da borda superior.
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.

Margem

As margens criam espaços em volta dos elementos, mesmo que tenha qualquer tipo de borda definida. A propriedade principal é margin, mas é possível estilizar todas as quatro (superior, direita, inferior e esquerda) margens de forma diferente.

Dessa forma além da propriedade margin, encontramos no CSS as propriedades margin-top, margin-right, margin-bottom e margin-left que podem ser acompanhados pelos seguintes valores:

auto - o navegador irá calcular a margem.
comprimento - especificado em px, pt, cm são alguns exemplos.
porcentagem (%) - vai especificar em percentuais definidos conforme a largura do elemento.
herança - pode ser herdado do elemento pai.

Atenção, não podem existir valores negativos para margem.

Os valores laterais podem ser abreviado pela propriedade margin quando:

Se na propriedade tiver os quatros valores, seguirá a sequência lado superior, direita, inferior e esquerda.

Exemplo de Alteração da Margem - 4 valores

body {

margin: 50px 25px 50px 25px;

}

Todos os lados possuirão a seguinte margem:

superior em 50px
direita em 25px
inferior em 50px
esquerda em 25px

Quando a propriedade margin tiver apenas três valores, será alterado lado superior com primeiro valor, lado direito e esquerdo com segundo valor e lado inferior com terceiro valor.

Exemplo de Alteração da Margem - 3 valores

body {

margin: 50px 25px 50px;

}

Todos os lados possuirão a seguinte margem:

superior em 50px
direita e esquerda em 25px
inferior em 50px

Quando a margin tiver apenas dois valores o primeiro irá alterar os lados superior e inferior e o segundo valor vai alterar o lado direita e esquerda do elemento.

Exemplo de Alteração da Margem - 2 valores

body {

margin: 50px 25px;

}

Todos os lados possuirão a seguinte margem:

superior e inferior em 50px
direita e esquerda em 25px

E quanto existe apenas um valor todos os lados terão a mesma margem.

Exemplo de Alteração da Margem - 1 valores

body {

margin: 50px;

}

Todos os lados possuem o mesmo tamanho de margem.

A margem pode ter seu valor como automático dessa forma será expresso após a propriedade com auto que irá centralizar horizontalmente o elemento dentro do container. Logo o espaço será dividido igualmente entre as margens da direita e da esquerda.

A margem poderá ter seu valor herdado do elemento pai, caso não tenha nenhuma propriedade atribuída diretamente a ele.

Resumo das propriedades de margem

margin - Uma propriedade abreviada para definir todas as propriedades de 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.

Preenchimento

Responsável por criar espaços ao redor do conteúdo de um elemento que esteja dentro de uma borda. Existem propriedades para definir cada lado do elemento, superior com padding-top, lado direito com padding-right, inferior com padding-bottom e lado esquerdo com padding-left.

A propriedade padding pode receber os valores:

length - sendo preenchido com px, ptx, cm, entre outros.
porcentagem (%) - específica um preenchimento em % da largura do elemento.
inherit -vai herdar o valor do elemento pai.

Quando o padding é usado com quatro valores, o primeiro representa o lado superior, em seguida o lado direito, lado inferior e por último esquerdo.

Exemplo de Alteração do Preenchimento - 4 valores

div {

padding: 50px 100px 50px 100px;

}

O preenchimento vai ser representado por:

lado superior com 50px
lado direito com 100px
lado inferior com 50px
lado esquerdo com 100px

Quando o padding estiver com três valores, o primeiro valor é referente ao lado superior, o segundo valor os lados direitos e esquerdo e terceiro valor o lado inferior.

Exemplo de Alteração do Preenchimento - 3 valores

div {

padding: 50px 100px 50px;

}

O preenchimento vai ser representado por:

lado superior com 50px
lado direito e esquerdo com 100px
lado inferior com 50px

O padding pode ser declarado com dois valores, sendo o primeiro referente ao lado superior e inferior e segundo aos lados direito e esquerdo.

Exemplo de Alteração do Preenchimento - 2 valores

div {

padding: 50px 100px;

}

O preenchimento vai ser representado por:

lado superior e inferior com 50px
lado direito e esquerdo com 100px

E se tiver apenas um valor na propriedade, esse irá por todos os lados do elemento.

Exemplo de Alteração do Preenchimento - 1 valores

div {

padding: 50px;

}

O preenchimento vai ser ocorrer em todos os lados.

Caso seja necessário manter uma largura real no elemento pode se usar a propriedade width e box-sizing, pois assim vai aumento o preenchimento e reduzir o espaço de conteúdo.

Exemplo de Alteração do Preenchimento e largura do elemento

div {

width: 300px;

padding: 25px;

box-sizing: border-box

}

O preenchimento vai ser ocorrer em todos os lados.

Resumo das propriedades de preenchimento

padding - Uma propriedade abreviada para definir 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 direito de um elemento.
padding-top - Define o preenchimento superior de um elemento.

Dimensão

Com o CSS é possível alterar altura (height), largura (width) e largura máxima (max-width) dos elementos do HTML. Essas propriedades irão alterar a área dentro do preenchimento, da borda e da margem.

Essas propriedades podem ter os seguintes valores:

auto - vai calcular a altura e largura (esse é padrão).
length - Define altura e largura em px, cm entre outros.
% - Define a altura e largura em porcentagem de bloco que contém.
initial - Define a altura e largura para seu valor padrão.
inherit - A altura e largura será herdada de seu valor pai.

Largura máxima (max-width) do elemento vai ser definida e pode ser especificado com os valores de px, cm, porcentagem por exemplo.

É importante conhecer como é formado o calculo de largura e altura dos elementos.

A largura total do elemento será igual largura, mais o preenchimento esquerdo, mais preenchimento direito, mais borda esquerda, mais borda direita, mais margem esquerda, mais margem direita.

A altura total do elemento será igual a altura, mais o preenchimento superior, mais o preenchimento inferior, mais borda superior, mais borda inferior, mais margem superior, mais margem inferior.

Resumo das propriedades de dimensão

height - Define a altura de um elemento.
max-height - Define a altura máxima de um elemento.
max-width - Define a largura máxima de um elemento.
min-height - Define a altura mínima de um elemento.
min-width - Define a largura mínima de um elemento.
width - Define a largura de um elemento.

Outline ou Contorno

Outline ou contorno é uma linha que fica em torno dos elementos, fora do alcance das bordas que faz o elemento se destacar.Logo o contorno é diferente das bordas , pois pode sobrepor outro conteúdo e por não fazer parte do elemento a largura e altura total do elemento não são afetadas pela largura do contorno.

Existe cinco propriedades de contorno, sendo elas: outline-style, outline-color, outline-width, outline-offset e outline. Importante que nenhuma das quatros propriedades irão funcionar se não tiver definida a propriedade outline-style.

O Contorno vai aceitar os seguintes valores:

dotted - Define um contorno pontilhado.
dashed - Define um contorno tracejado.
solid - Define um contorno sólido.
double - Define um contorno duplo.
groove - Define um contorno ranhurado 3D.
ridge - Define um contorno 3D estriado.
inset - Define um contorno de inserção 3D.
outset - Define um esboço inicial 3D.
none - Não define contorno.
hidden - Define um contorno oculto.

A propriedade outline-widgt vai especificar a largura do contorno e pode está associado aos valores: thin (fino com normalmente 1 px), medium (médio com normalmente 3px), thick (grosso com normalmente 5px) e poderá ter um tamanho específico.

Já outline-color irá definir a cor das linhas do contorno, que podem ser definidas pelo nome, HEX, RGB, HSL e valor de invert que garante que o contorno fique visível não importando a cor de fundo.

É possível abreviar todas as propriedades width, style e color usando simplemente outline:

Exemplo de Alteração do Contorno - Abreviação

p.1 {

outline: 5px solid red;

}

A contorno vai ter uma linha com 5px na cor vermelha.

Ainda é possível criar um espaço entre o contorno e a borda do elemento com a propriedade outline-offset.

Exemplo de Alteração do Contorno - Deslocamento do Contorno

p.1 {

margin: 30 px;

border: 1px solid blue;

outline: 5px solid red;

outline-offset: 15px;

}

Esse elemento vai ter uma borda em linha na cor azul de 1px com uma margem de 30px e o contorno vai está 15px deslocado em uma linha vermelha de 5px.

A propriedade outline-offset vai adicionar espaços entre um contorno e a borda de um elemento.

Resumo das propriedades de contorno

outline - Uma propriedade abreviada para definir a largura do contorno, o estilo do contorno e a cor do contorno em uma declaração.
outline-color - Define a cor de um contorno.
outline-offset - Especifica o espaço entre um contorno e a borda ou borda de um elemento.
outline-style - Sets the style of an outline.
outline-width - Define a largura de um contorno.

Textos

Pode-se estilizar o texto de um documento HTML de diversas formas que irão deixar os projetos com estilos únicos.

É permitido mudar a cor do texto, podendo ser especificada pela nome, HEX ou RGB. Com isso é bom destacar que é possível alterar a cor de fundo de um elemento para que possa gerar mais destaque ao texto.

O texto poderá ser alinhado a um elemento, para isso poderá usar as propriedades text-align, text-align-last, direction, unicode-bidi e vertical-align.

A propriedade text-align vai ser usada para alinhar o texto horizontalmente no elemento. Podendo ser alinhado à esquerda, à direita, ao centro ou justificado.

Ao alinhar o texto por último (text-align-last) vai alinhar a última linha do texto presente no elemento.

As propriedades direction e unicode-bidi irá alterar a direção do texto em um elemento.

E por último o alinhamento vertical será feito pela propriedade vertical-align.

Uma das estilizações possíveis é decorar o texto com linhas que podem ser sobrelinha ou sublinhado. As propriedades permitidas são text-decoration-line, text-decoration-color, text-decoration-style, text-decoration-trickness e text-decoration.

A propriedade text-decoration-line irá adicionar uma linha ao texto que pode receber diversos valores. Já o text-decoration-color irá atribuir uma cor a linha adicionada, podendo ser atribuída pelo nome, HEX ou RGB. Para estilizar a linha é possível fazê-lo com a propriedade tex-decoration-style e por último é possível alterar a espessura da linha com o text-decoration-thickness.

Todas as funções acima poderão ser abreviadas pela propriedade text-decoration.

Exemplo de Alteração do texto - abreviação da decoração

h1 {

text-decoration: undeline red double 5px;

}

O texto será sublinhado com linha dupla na cor vermelha com 5px.

Outra opção é a propriedade text-transform que permite alternar entre letras maiúsculas ou minúsculas em um texto.

É importante destacar as propriedades que permite fazer o espaçamento entre letras, altura da linha e entre as palavras e o espaço em branco. Para trabalhar o espaçamento no texto iremos usar seis propriedades que possuem resultados diferentes.

A propriedade text-indent será usada para especificar um recuo na primeira linha do texto, enquanto a propriedade letter-spacing é usada para criar espaços entre os caracteres de um texto.

line-height vai criar um espaço entre as linhas, enquanto word-spacing vai criar espaçamento entre as palavras de um texto e white-scpace vai tratar um espaço em branco dentro do elemento.

Ainda é capaz de estilizar o texto com sombras com a propriedade text-shodow.

Muitas vezes os textos possuem particularidades em relação a outros elementos e por conta disso muitos deles precisam ser tratados para melhorar tanto a visualização do conteúdo, o design do projeto e a experiência do usuário.

Quando o conteúdo estourou o elemento que ele está inserido, a propriedade text-overflow vai permitir que o texto seja sinalizado sobre a continuidade do conteúdo.

Já a propriedade word-wrap vai permitir que as palavras longas possam ser quebradas e colocadas na linha seguinte. Enquanto word-break irá especificar a regra de quebra de linha que deve ser usada e para especificar se as linhas de texto estão na horizontal ou vertical deve ser usar a propriedade writing-mode.

É possível com CSS inserir efeito de sombra em texto por meio da propriedade text-shadow. Dessa forma será especificado a sombra que será aplicada no horizontal e na vertical, a cor e o efeito de desfoque e caso seja necessário adicionar várias sombras ao mesmo texto basta separar os valores por vírgulas.

Exemplo de Alteração do texto - sombra

h1 {

text-shadow: 2 px 2px 5px red;

}

Texto com linha preta e sombra vermelha.

Resumo de propriedades que alteram o texto.

color - Especifica a cor do texto.
direction - Especifica a direção do texto/direção da escrita.
letter-spacing - Especifica o espaço entre os caracteres em um texto.
line-height - Especifica a altura da linha.
text-align - Especifica o alinhamento horizontal do texto.
text-align-last - Especifica como alinhar a última linha de um texto.
text-decoration - Define todas as propriedades de decoração de texto em uma declaração.
text-decoration-color - Especifica a cor da decoração de texto.
text-decoration-line - Especifica o tipo de decoração de texto a ser usado (sublinhado, sobrelinhado, etc.)
text-decoration-style - Especifica o estilo da decoração do texto (sólido, pontilhado, etc.)
text-decoration-thickness - Especifica a espessura da linha de decoração de texto.
text-indent - Especifica o recuo da primeira linha em um bloco de texto.
text-justify - Específica como o texto justificado deve ser alinhado e espaçado.
text-overflow - Específica como o conteúdo transbordado que não é exibido deve ser sinalizado ao usuário.
text-shadow - Específica o efeito de sombra adicionado ao texto.
text-transform - Controla a capitalização do texto (letras maiúsculas e minúsculas).
unicode-bidi - Usado junto com a propriedade direction para definir ou retornar se o texto deve ser substituído para oferecer suporte a vários idiomas no mesmo documento.
vertical-align - Define o alinhamento vertical de um elemento.
white-space - Específica como lidar com espaços em branco dentro de um elemento.
word-break - Especifica regras de quebra de linha para scripts não CJK.
word-spacing - Especifica o espaço entre as palavras em um texto.
word-wrap - Permite que palavras longas possam ser quebradas e passar para a próxima linha.
writing-mode - Especifica se as linhas de texto são dispostas horizontalmente ou verticalmente.

Fontes

Quando falamos em experiência do usuário e personalidade de marcas, a Fonte possui um papel fundamental. E quando falamos em papel fundamental temos que entender que as fontes possuem cinco principais famílias : as com serifa, as sem serifa, monoespaçadas, cursivas e as de fantasia.

Exemplo de Fonte conforme a sua família

Família Genérica

Fontes Especifica

Serifa

Times New Roman

Georgia

Garamond

Sem Serifa

Arial

Verdana

Monoespaçada

Courier New

Cursiva

Pacifico

Fantasy

Permanent marker

Amaric sc

Para alterar a fonte usamos a propriedade font-family, é importante saber quando o nome da fonte conter mais de duas palavras deve estar entre aspas.

Deve ser observado as chamadas fontes seguras da Web quando escolher uma fonte, essas fontes seguras da Web são fontes presentes em todos os navegadores e dispositivos.

As fontes mais seguras são:

Arial (sem serifa) - Essa fonte é uma das mais usadas para mídia online e impressa, é a fonte da Web mais segura e está disponível em todos os principais sistemas operacionais. Também é a fonte padrão no Google Docs.
Verdana (sem serifa) - Uma fonte muito popular com fácil legibilidade mesmo em tamanhos pequenos.
Helvética (sem serifa) - Considerada a queridinha dos designers, utilizada em diversos tipos de negócio.
Tahoma (sem serifa) - Essa fonte tem menos espaço entre os caracteres.
Trabuco MS (sem serifa) - Essa fonte deve ser usada com atenção pois não é suportada por todos os sistemas operacionais. Foi projetada pela Microsoft em 1996.
Times News Roman (com serifa) - Uma das fontes mais conhecidas no mundo, usada por muitos jornais e sites. E a fonte principal para todos os dispositivos Windows.
Georgia (com serifa) - Um fonte elegante e muito legível em diversos tamanhos, boa para ser usada em design responsivo a dispositivos móveis.
Garamond (com serifa) - Fonte muito usada em livros impressos, possui uma aparência atemporal e boa legibilidade.
Courier New (monoespaçada) - Essa é a fonte monoespaçada mais usada, normalmente encontramos essa fonte em exibições de codificação, em provedores de email e em roteiros de filmes.
Brush Script MT (cursiva) - Projetada para simular a caligrafia é uma fonte muito elegante e sofisticada, mas deve ser usada com cuidado pois pode gerar problemas de legibilidade.

Mas visando não correr risco do navegador não encontrar a fonte que foi selecionada para o projeto, deve-se fazer uma lista de fontes semelhantes na própria propriedade font-family, caso a primeira fonte não funcione o navegador irá tentar a próxima. Dica: sempre termine a lista com um nome de família de fonte genérico.

Normalmente nos projetos é comumente usados esse conjunto de fontes:

Fontes com serifa

“Time New Roman”, Times, serif
Georgia, serif
Garamond, serif

Fontes sem serifa

Arial, Helvetica, sans-serif
Tahoma, Verdana, sans-serif
"Trebuchet MS”, Helvetica, sans-serif
Geneva, Verdana, sans-serif

Fonte Monoespaçadas

“Courier New”, Courier, Monospace

Fonte Cursivas

“Brush Script MT”, cursive

Fontes de Fantasia

Copperplate, Papyrus, fantasy

Uma grande dica é verificar as fontes disponíveis no Google Fonts (https://fonts.google.com/) são mais 1000 fontes que podem ser usadas gratuitamente.

Ao selecionar a fonte no Google Fonts, no seu projeto você deve apenas adicionar o link na seção <head> da fonte que vai ser usada.

Exemplo de inclusão de fonte pelo Google Fonts

head {

<style>

body {

font-family:”Sofia”, sans-serif

}

</style>

</head>

Dessa forma poderá usar a fonte informada no seu projeto.

Voltando a estilização da fonte, normalmente para deixar o texto em itálico é usado a propriedade font-style e para determinar seu peso usa-se font-weight. Já a propriedade ``font-variant'' irá permitir especificar como essa fonte deve ser exibida.

Já o tamanho da fonte poderá ser alterado com a propriedade font-size, mas lembre-se de sempre usar as tags de HTML apropriadas para cada texto (<h1> a <h6> para títulos e <p> para parágrafos.

O tamanho poderá ser absoluto que não permite que seja alterado pelo usuário, o que pode acabar gerando problema de acessibilidade e comprometendo a experiência do usuário, mas se aplicado em fonte de saída conhecida poderá ser útil.

Unidades de medidas absolutas:

cm - centímetros.
mm - milímetros.
in - polegadas (1 pol = 96 px = 2,54 cm).
px - pixels (1 px = 1/96 de 1 polegada), permite ter um controle total sobre o tamanho do texto.
pt - pontos (1pt = 1/72 de 1in).
pc - picas (1 pc = 12 pt).

E tem o tamanho relativo que poderá ser alterado pelo usuário ou o tamanho irá se definir em relação aos elementos próximos.

Unidades de medidas relativas:

em - Em relação ao tamanho da fonte do elemento (2em significa 2 vezes o tamanho da fonte atual), permite que seja realizado redimensionamento do texto no menu do navegador.
ex - Em relação à altura x da fonte atual (raramente usada).
ch - Em relação à largura do "0" (zero).
rem - Relativo ao tamanho da fonte do elemento raiz.
vw - Relativo a 1% da largura da janela de visualização, se a janela de visualização tiver 50 cm de largura, 1vw é 0,5 cm.
vh - Relativo a 1% da altura da janela de visualização (Viewport = o tamanho da janela do navegador. Se a janela de visualização tiver 50 cm de largura, 1vw = 0,5 cm).
vmin - Relativo a 1% da dimensão menor da janela de visualização.
vmax - Relativo a 1% da dimensão maior da janela de visualização.
% - Em relação ao elemento pai.

Uma boa combinação de tamanho de fonte usando porcentagem e EM, pois essa solução funciona em todos os navegadores.

Exemplo de Alteração de tamanho da fonte - combinação de % + EM

body {

font-size: 100%;

}

h1 {

font-size: 2.5em;

}

Dessa forma irá responder melhor a qualquer tamanho de tela

A fonte também poderá ser alterada visando ser responsiva, onde o tamanho do texto seguirá o tamanho da janela de navegação, usando a unidade de medida vw.

Exemplo de Alteração de tamanho da fonte - responsivo vw

h1 {

font-size: 10vw;

}

Normalmente usando visando adaptação a todas as telas.

A fonte poderá ser abreviada pela propriedade font, que seguirá a ordem das propriedades: font-style, font-variant, font-weight, font-size, font-family.

Exemplo de Alteração da fonte - abreviação da dont

h1 {

font: italic small-caps bold 24px Georgia, serif;;

}

Dessa forma a fonte vai ser a Geórgia em itálico, minúsculo e negrito e com tamanho de 24px.

Nos projetos é possível que suas fontes próprias possam ser definidas por meio da regra @fgont-face, normalmente quando é usado uma fonte não padrão ela pode ser baixada automaticamente se estiver incluído o arquivo fonte em seu servidor web.

Existe diversos formatos de fonte diferente sendo eles: Fontes TrueType (TTF), normalmente usado nos sistemas operacionais mais comuns; Fontes OpenType (OTF) é um formato para fontes de computadores escaláveis, é usual seu uso nas principais plataformas de computadores; Formato de fonte aberta da Web (WOFF) é um forma de fonte para uso em página da web; Formato de fonte aberta da WEB (WOFF 2.0) oferece melhor compactaçaõ do que WOFF 1.0; Fontes/formas SVG permite que a criação de fontes dentro de um documento SVG; Fontes Open Type Incorporadas (EOT) São uma forma compacta de fontes OpenType para uso como fontes incorporadas em páginas da Web.

A regra @font-face, primeiro precisa ser definido um nome para a fonte e depois aponte para arquivo da fonte.

Exemplo de Regra @font-face

@font-face {

font-family: myFirstFont;

src: url (sansation_light.woff);

}

div {

font-family: myFirstFont;

}

Descritores de fontes (@font-face)

font-family - Requeridos. Define um nome para a fonte.
src - Requeridos. Define a URL do arquivo de fonte.
font-stretch - Opcional. Define como a fonte deve ser esticada. O padrão é "normal".
font-style - Opcional. Define como a fonte deve ser estilizada. O padrão é "normal".
font-weight - Opcional. Define o negrito da fonte. O padrão é "normal".
unicode-range - Opcional. Define o intervalo de caracteres UNICODE que a fonte suporta. O padrão é "U+0-10FFFF".

Resumo das propriedades da fonte

font - Define todas as propriedades da fonte em uma declaração.
font-family - Especifica a família de fontes para texto.
font-size - Especifica o tamanho da fonte do texto.
font-style - Especifica o estilo da fonte para o texto.
font-variant - Especifica se um texto deve ou não ser exibido em uma fonte de versalete.
font-weight - Especifica o peso de uma fonte.

Ícones

Os ícones podem ser adicionados ao projeto HTML, usando uma biblioteca de ícones. Essa biblioteca poderá ser retirada de sites como Awesome 4 Icons, Bootstrap 3 Icons, Google Icons.

Para adicionar no seu projeto você irá adicionar o link correspondente ao site que irá usar para ter acesso aos link no head do HTML.

Listas

As listas podem ser classificadas como ordenadas <ol> e não ordenadas <ul>. com o CSS é possível alterar os marcadores, definir uma imagem como marcador de item da lista ou mudar a cor de fundo da lista.

A propriedade list-style-type vai permitir modificar os marcadores. Os valores são diferentes para marcadores ordenados e não ordenados. Caso seja necessário, é possível remover o padrão dos marcadores colocando o valor none, mas deve zerar o margin e padding.

Poderá colocar uma imagem como marcador com a propriedade list-style-image e com a propriedade list-style-position permitirá alterar a localização do marcador.

É possível abreviar as propriedades list-style-type, list-syle-position e list-style-image com a propriedade list-style.

Também é possível mudar a cor da lista usando as propriedades background e color.

Resumo das propriedades de Lista

list-style - Define todas as propriedades de uma lista em uma declaração.
list-style-image - Especifica uma imagem como marcador de item de lista.
list-style-position - Especifica a posição dos marcadores de item de lista (pontos de bala).
list-style-type - Especifica o tipo de marcador de item de lista.

Tabelas

O CSS permite mudar consideravelmente a aparência de uma tabela em HTML. Logo as tabelas podem ser modificadas pelas propriedades border, width, height, text-align, padding, vertical-align, color, border-colapse que vai definir as bordas que devem ser recolhidas em uma única borda.

Resumo das propriedades que podem ser usadas em tabela

border - Define todas as propriedades da borda em uma declaração.
border-collapse - Especifica se as bordas da tabela devem ou não ser recolhidas.
border-spacing - Especifica a distância entre as bordas das células adjacentes.
caption-side - Especifica o posicionamento de uma legenda de tabela.
empty-cells - Especifica se as bordas e o plano de fundo devem ou não ser exibidos em células vazias em uma tabela.
table-layout - Define o algoritmo de layout a ser usado para uma tabela.

Layout - Propriedade de exibição

Para controlar o layout a propriedade mais importante é o display. O display vai permitir especificar como o elemento será exibido. Sabendo que o valor de exibição padrão nas maiorias dos elementos é block ou inline, dessa forma irá alterar a forma como o elemento é exibido e não o tipo de elemento que é.

O valor em bloco vai começar uma nova linha e ocupar toda largura disponível, os elementos em bloco mais comuns são: <div>, <h1> a <h6>, <p>, <form>, <header>, <footer> e <section>.

O valor inline não inicia em uma nova linha e só vão ocupar o que for necessário, são exemplos desse elemento: <span>, <a>, img>.

Além dos valores block e inline existe um terceiro valor a ser atribuído à propriedade display que é o valor inline-block permite definir uma largura e uma altura ao elemento, com isso irá respeitar as margens e preenchimentos superiores e inferiores e não vai adicionar um quebra de linha após o elemento, podendo ficar ao lado de outro elemento.

Por padrão a propriedade display: none é usada e não tem nenhuma alteração visual ou irá ocultar um elemento e página será exibida como se não existisse o elemento.

Mas as propriedades visibility: hidden; também vai ocultar o elemento, mas não afetará o layout ficando o espaço do elemento reservado a ele.

Para definir a largura máxima de elemento deve ser usar a propriedade max-width, enquanto para definir a largura usa-se width.

É possível ajustar a posição dos elementos por meio da propriedade position, usando os valores: estático, relativo, fixo, absoluto e adesivo.

position: static - são elementos que não são afetados pelas propriedades superior, inferior, esquerda e direita, vai está sempre posicionado de acordo com o fluxo normal da página.
position: relative - Ao definir as propriedades superior, inferior, direita e esquerda de um elemento fará com que ele seja ajustado par fora de sua posição normal.
position: fixed - esse elemento será posicionado em relação à janela de visualização, sempre irá permanecer no mesmo lugar.
position: absolute - Irá mover-se junto com a rolagem da página, caso não tenha ancestral. Possuindo um ancestral será posicionado em torno deste.
position: sticky - Esse posicionamento irá se orientar pela posição de rolagem do usuário. Esse valor vai alternar entre relative e fixed, conforme a posição da rolagem.

Quando os elementos são posicionados podem se sobrepor a outro elementos, para especificar a onde de sobreposição do elemento usa-se a propriedade z-index que vai definir qual elemento deve ser colocado na frente.

Importante que o z-index só irá funcionar com elementos posicionados ou itens flex. Caso os elementos sejam sobrepostos sem o uso de z-index o último elemento será mostrado no topo.

Quando o conteúdo é grande demais para o elemento que está alojado, acontece um estouro desse elemento e para ajustar esse estouro usa-se a propriedade CSS overflow.

Dessa forma vai definir se o conteúdo deve ser recortado ou adicionado a barra de rolagem, conforme os valores abaixo:

visible - Predefinição. O estouro não é cortado. O conteúdo é renderizado fora da caixa do elemento.
hidden - O estouro é cortado e o restante do conteúdo ficará invisível.
scroll - O estouro é cortado e uma barra de rolagem é adicionada para ver o restante do conteúdo.
auto - Semelhante a scroll, mas adiciona barras de rolagem apenas quando necessário.

É possível definir se o estouro deve ser ajustado na horizontal com a propriedade overflow-x ou na vertical com overflow-y.

Os elementos também podem flutuar por meio da propriedade float. Normalmente essa propriedade é usada para posicionar e formatar o conteúdo como deixar uma imagem ao lado de um texto. Ela pode assumir os seguintes valores:

left - O elemento flutua à esquerda de seu contêiner.
right - O elemento flutua à direita de seu contêiner.
none - O elemento não flutua (será exibido exatamente onde ocorre no texto). Isso é padrão.
inherit - O elemento herda o valor float de seu pai.

Após usar a propriedade float e queremos o próximo elemento abaixo deve-se usar a propriedade clear. Essa propriedade vai especificar que o próximo elemento deve ficar próximo do elemento flutuante. Clear pode assumir os seguintes valores:

none - O elemento não é empurrado abaixo dos elementos flutuantes à esquerda ou à direita. Isso é padrão.
left - O elemento é empurrado abaixo dos elementos flutuantes à esquerda.
right - O elemento é empurrado abaixo dos elementos flutuantes à direita.
both - O elemento é empurrado abaixo dos elementos flutuantes esquerdo e direito.
inherit - O elemento herda o valor clear de seu pai.

No CSS pode-se colocar sombras nos elementos com a propriedade box-shadow, essa sombra pode ser horizontal e vertical, essa sombra pode cores diferentes e poderá ter efeito de desfoque (blur) e spread irá definir o raio de dispersão. Com o inset onde altera a sombra externa para interna.

Para colocar múltiplas colunas no documento será usado as seguintes propriedades:

Vai especificar o número de colunas que o elemento vai ser dividido pela propriedade column-count, quanto column-gap especifica a lacuna entre as colunas.

A propriedade column-rule-style vai alterar o estilo entre as colunas, column-rule-width definir a largura entre as colunas e column-rule-color a vai definir a cor entre as colunas e a propriedade column-rule vai abreviar todas as três anterior.

Enquanto column-span vai especificar quantas colunas um elemento deve abranger e column-width- vai especificar a largura ideal para as colunas.

Com a propriedade resize vai permitir especificar se (e como) um elemento poderá ser redimensionado pelo usuário.

Resumo de propriedades de exibição e visualização

bottom - Define a borda da margem inferior para uma caixa posicionada.
box-shadow - Adiciona 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.
clear - Específica o que deve acontecer com o elemento que está próximo a um elemento flutuante.
clip - Recorta um elemento posicionado absolutamente.
column-count - Especifica o número de colunas em que um elemento deve ser dividido.
column-fill - Específica como preencher as colunas.
column-gap - Especifica o intervalo entre as colunas.
column-rule - Uma propriedade abreviada para definir todas as propriedades column-rule-*.
column-rule-color - Especifica a cor da regra entre as colunas.
column-rule-style - Especifica o estilo da regra entre as colunas.
column-rule-width - Especifica a largura da regra entre as colunas.
column-span - Especifica quantas colunas um elemento deve abranger.
column-width - Especifica uma largura ideal sugerida para as colunas.
columns - Uma propriedade abreviada para definir a largura da coluna e a contagem de colunas.
display - Específica como um elemento deve ser exibido.
float - Especifica se um elemento deve flutuar para a esquerda, direita ou nada.
left - Define a borda da margem esquerda para uma caixa posicionada.
overflow - Específica 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 com palavras longas, se elas ultrapassarem seu contêiner.
overflow-x - Especifica o que fazer com as bordas esquerda/direita do conteúdo se ultrapassar a área de conteúdo do elemento.
overflow-y - Especifica o que fazer com as bordas superior/inferior do conteúdo se ultrapassar a área de conteúdo do elemento.
position - Especifica o tipo de posicionamento de um elemento.
resize - Especifica se um elemento é ou não redimensionável pelo usuário.
right - Define a borda da margem direita para uma caixa posicionada.
top - Define a borda da margem superior para uma caixa posicionada.
visibility - Especifica se um elemento deve ou não ser visível.
z-index - Define a ordem de pilha de um elemento.

Transformações

As transformações permitem que os elementos sejam movidos, girados, dimensionados e inclinados ao passar o mouse por cima, por exemplo.

Para que essas transformações possam ocorrer é usando a propriedade transform e são associados as seguintes funções:

translate() - moverá um elemento de sua posição atual conforme estabelecido pelos eixos x e y.
rotate() - permite girar o elemento no sentido horário ou anti-horário.
scaleX() - vai aumentar ou diminuir a largura do tamanho do elemento.
scaleY() - vai aumentar ou diminuir a altura do tamanho do elemento.
scale() - vai aumentar ou diminuir o tamanho do elemento.
skewX() - Irá inclinar um elemento ao longo do eixo x.
skewY() - Irá inclinar um elemento ao longo do eixo y.
skew() - Irá inclinar um elemento ao longo do eixo.
matrix() - A matriz vai combinar todos os métodos de transformação 2D, abrevia todas funções: (scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()).

Existe ainda a transformação 3D que permite girar o elemento nos eixos x,y e z.

A função rotateX() vai girar o elemento em torno do eixo x, logo a função rotateY() vai girar em torno do eixo y e a rotateZ() vai girar o elemento em torno do eixo z.

Resumo das propriedades de transformação

transform - Aplica uma transformação 2D ou 3D a um elemento.
transform-origin - Permite alterar a posição em elementos transformados.
transform-style - Especifica como os elementos aninhados são renderizados no espaço 3D.
perspective - Específica a perspectiva de como os elementos 3D são visualizados.
perspective-origin - Especifica a posição inferior dos elementos 3D.
backface-visibility - Define se um elemento deve ou não estar visível quando não está voltado para a tela.

Resumo das funções associadas às transformações 2D

matrix(n,n,n,n,n,n) - Define uma transformação 2D, usando uma matriz de seis valores.
translate(x,y) - Define uma translação 2D, movendo o elemento ao longo dos eixos X e Y.
translateX(n) - Define uma translação 2D, movendo o elemento ao longo do eixo X.
translateY(n) - Define uma translação 2D, movendo o elemento ao longo do eixo Y.
scale(x,y) - Define uma transformação de escala 2D, alterando a largura e a altura dos elementos.
scaleX(n) - Define uma transformação de escala 2D, alterando a largura do elemento.
scaleY(n) - Define uma transformação de escala 2D, alterando a altura do elemento.
rotate(angle) - Define uma rotação 2D, o ângulo é especificado no parâmetro.
skew(x-angle,y-angle) - Define uma transformação de inclinação 2D ao longo dos eixos X e Y.
skewX(angle) - Define uma transformação de inclinação 2D ao longo do eixo X.
skewY(angle) - Define uma transformação de inclinação 2D ao longo do eixo Y.

Resumo das funções associadas às transformações 3D

matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) - Define uma transformação 3D, usando uma matriz 4x4 de 16 valores.
translate3d(x,y,z) - Define uma tradução 3D.
translateX(x) - Define uma tradução 3D, usando apenas o valor para o eixo X.
translateY(y) - Define uma tradução 3D, usando apenas o valor do eixo Y.
translateZ(z) - Define uma tradução 3D, usando apenas o valor para o eixo Z.
scale3d(x,y,z) - Define uma transformação em escala 3D.
scaleX(x) - Define uma transformação de escala 3D dando um valor para o eixo X.
scaleY(y) - Define uma transformação de escala 3D dando um valor para o eixo Y.
scaleZ(z) - Define uma transformação de escala 3D dando um valor para o eixo Z.
rotate3d(x,y,z,angle) - Define uma rotação 3D.
rotateX(angle) - Define uma rotação 3D ao longo do eixo X.
rotateY(angle) - Define uma rotação 3D ao longo do eixo Y.
rotateZ(angle) - Define uma rotação 3D ao longo do eixo Z.
perspective(n) - Define uma vista em perspectiva para um elemento transformado em 3D.

Transição

Permite alterar o valor da propriedade por determinado período, sem problemas. As propriedades associadas à transição são: transition, transition-delay, transition-duration, transition-property e transition-timing-function.

Para que as transições aconteçam é preciso especificar a propriedade a qual deseja o efeito e tempo de duração do efeito. É possível alterar vários valores com abreviação transition.

A transition-timing-function vai ajustar a curva de velocidade de transição, essa propriedade pode ter os seguintes valores:

ease - especifica um efeito de transição com um início lento, depois rápido e depois termina lentamente (este é o padrão).
linear - especifica um efeito de transição com a mesma velocidade do início ao fim.
ease-in - especifica um efeito de transição com um início lento.
ease-out - especifica um efeito de transição com um final lento.
ease-in-out - especifica um efeito de transição com início e fim lentos.
cubic-bezier(n,n,n,n) - permite definir seus próprios valores em uma função cúbica-bézier.

A propriedade transition-delay atrasa o efeito da transição conforme o tempo especificado.

E podemos ainda combinar a transição com a transformação permitindo melhor dessa forma a experiência do usuário.

Resumo das Propriedades de transição

transition - Uma propriedade abreviada para definir as quatro propriedades de transição em uma única propriedade.
transition-delay - Especifica um atraso (em segundos) para o efeito de transição.
transition-duration - Especifica quantos segundos ou milissegundos um efeito de transição leva para ser concluído.
transition-property - Especifica o nome da propriedade CSS para a qual se destina o efeito de transição.
transition-timing-function - Específica a curva de velocidade do efeito de transição.

Animação

A animação vai permitir que um elemento mude gradualmente de um estilo para outro.

Para isso você deve definir uma regra de animação dentro @keyframes e vincular um elemento a essa animação. A duração da animação vai ser configurada com a propriedade animation-duration, caso essa propriedade não esteja configurada não ocorrer a animação.

Já a propriedade animation-delay irá atrasar o início da animação no tempo que for configurado. Enquanto a propriedade animation-iteration-count vai especificar quantas vezes que a animação deve ser executada.

A propriedade animation-direction vai trazer os valores que irão definir como a animação deve ser reproduzida.

normal - A animação é reproduzida normalmente (para a frente). Isso é padrão.
reverse - A animação é reproduzida na direção inversa (para trás).
alternate - A animação é reproduzida primeiro para a frente e depois para trás.
alternate-reverse - A animação é reproduzida primeiro para trás e depois para a frente.

Já a curva de velocidade especificada na propriedade animation-timing-function pode receber os seguintes valores:

ease - Especifica uma animação com início lento, rápido e final lento (este é o padrão).
linear - Especifica uma animação com a mesma velocidade do início ao fim.
ease-in - Especifica uma animação com um início lento.
ease-out - Especifica uma animação com um final lento.
ease-in-out - Especifica uma animação com início e fim lentos.
cubic-bezier(n,n,n,n) - Permite definir seus próprios valores em uma função cúbica-bezier.

E o preenchimento da animação é de responsabilidade da propriedade animation-fill-mode que vai especificar o estilo para o elemento antes e depois da animação. Pode receber os seguintes valores:

none - Valor padrão. A animação não aplicará nenhum estilo ao elemento antes ou depois de ser executado.
forwards - O elemento manterá os valores de estilo definidos pelo último quadro-chave (depende da direção da animação e da contagem de iteração da animação).
backwards - O elemento obterá os valores de estilo definidos pelo primeiro quadro-chave (depende da direção da animação) e reterá isso durante o período de atraso da animação.
both - A animação seguirá as regras para frente e para trás, estendendo as propriedades da animação em ambas as direções.

A propriedade animation irá abreviar todas as outras, na seguinte sequência: animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count e animation-direction.

Exemplo de Animação - abreviação

div {

animation: exemplo 5s linear 2s infinite alternate;

}

Resumo de Propriedade de Animação

@keyframes - Especifica o código de animação.
animation - Uma propriedade abreviada para definir 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 alternados.
animation-duration - Especifica quanto tempo uma animação deve levar para completar um ciclo.
animation-fill-mode - Especifica um estilo para o elemento quando a animação não está sendo reproduzida (antes de começar, depois de terminar ou ambos).
animation-iteration-count - Especifica o número de vezes que uma animação deve ser reproduzida.
animation-name - Especifica o nome da animação @keyframes.
animation-play-state - Especifica se a animação está em execução ou pausada.
animation-timing-function - Específica a curva de velocidade da animação.

Propriedade de Ajuste de Objeto

Essa propriedade vai ser usada para redimensionar <img> e <video> para caber no container, para isso vai ser usada a propriedade object-fit. Essa propriedade poderá receber diversos valores que irão gerar resultados diferentes.

fill - Este é o padrão. A imagem é redimensionada para preencher a dimensão especificada. Se necessário, a imagem será esticada ou comprimida para caber.
contain - A imagem mantém sua proporção, mas é redimensionada para caber dentro da dimensão especificada.
cover - A imagem mantém sua proporção e preenche a dimensão dada. A imagem será cortada para caber.
none - A imagem não é redimensionada.
scale-down - a imagem é reduzida para a menor versão.

Visando manter a proporção e preencher a dimensão dada, pode ser usar object-fit: cover.

Já com object-fit: contain irá manter a proporção da imagem, mas irá redimensionar para caber dentro da dimensão informada.

Para preencher a dimensão informada será usado object-fit: fill, caso seja necessário a imagem será esticada ou comprimida.

E para redução de escala, onde a imagem será reduzida para um menor versão se usa object-fit: scale-down.

Com a propriedade object-position deve se especificar como uma <img> ou <video> será posicionado dentro do container.

Resumo de Propriedade de Objeto

object-fit - Especifica como um <img> ou <video> deve ser redimensionado para caber em seu contêiner.
object-position - Especifica como um <img> ou <video> deve ser posicionado com coordenadas x/y dentro de sua "própria caixa de conteúdo".

Mascaramento

É usado para criar uma máscara para colocar sobre um elemento para ocultar parcialmente ou totalmente partes do elemento, para isso é usado propriedade mask-image que pode utilizar arquivos PNG, SVG, um elemento SVG <mask> ou um gradiente CSS.

Resumo das propriedades usadas para mascaramento.

mask-image - Especifica uma imagem a ser usada como uma camada de máscara para um elemento.
mask-mode - Especifica-se a imagem da camada de máscara é tratada como uma máscara de luminância ou como uma máscara alfa.
mask-origin - Especifica a posição de origem (a área de posição da máscara) de uma imagem de camada de máscara.
mask-position - Define a posição inicial de uma imagem de camada de máscara (em relação à área de posição da máscara).
mask-repeat - Específica como a imagem da camada de máscara é repetida.
mask-size - Especifica o tamanho de uma imagem de camada de máscara.

Variáveis

var () são funções usadas para inserir valor de uma variável.

Com acesso ao DOM, que significa que podem ser criadas variáveis locais e globais, é possível alterar as variáveis com JavaScript com base na consulta de mídias.

A sintaxe da função var ():

Sintaxe da função var()

var (-- name, value)

name - Requeridos. O nome da variável deve começar com dois traços (--) e faz distinção entre maiúsculas e minúsculas!
value - Opcional. O valor de fallback (usado se a variável não for encontrada).

É importante saber que as variáveis ao serem global poderá ser acessada/usada de todo documento e as locais poderão ser usadas apenas onde está declarada.

Para se criar um variável global, deve-se declarada dentro do :root, este seletor é correspondente ao elemento raiz do documento. E para criar uma variável local deve se declarar dentro do seletor que irá utilizar.

Ao usar as variáveis o documento vai ter seu código com mais fácil leitura e mais compreensível o que torna muito mais fácil alterar os valores se necessário.

Flexbox

Para iniciar a codificação em flexbox deve definir um container flex, para se tornar flexível isso vai ser definido pela propriedade display com valor flex.

Os container flex terão as seguintes propriedades relacionadas:

flex-direction vai definir em qual direção o container vai empilhar os itens flexíveis (column, column-reverse, row e row-reverse)
flex-wrap vai especificar se os itens flexíveis devem ser encapsulados (wrap, nowrap e wrap-reverse)
flex-flow vai abreviar as as propriedades direction e wrap, justify-content vai ser usado para alinhar os itens (center, flex-start, flex-end, space-around e space-between)
align-items vai permitir alinhar os itens flexíveis (center, flex-start, flex-end, stretch e baseline)
align-content vai alinhar as linhas (space-between, space-around, stretch, center, flex-start e flex-end.

Os elementos filhos de container flex tornarão automaticamente um item flex, com isso a propriedade de order vai permitir especificar os itens flexíveis, já o flex-grow vai especificar quanto um item flexível irá crescer em relação aos outros itens. Enquanto a flex-shrink vai especificar a redução em relação a outro item flexível e o flex-basic vai mensurar o comprimento inicial do item. Todas essas propriedades serão abreviadas pela a propriedade flex, ordem grow, shrink e basic.

A propriedade align-self vai determinar o alinhamento do item selecionado dentro do container flex.

Resumo das propriedades Flexbox

align-content - Modifica o comportamento da propriedade flex-wrap. É semelhante a align-items, mas em vez de alinhar itens flexíveis, alinha linhas flexíveis.
align-items - Alinha verticalmente os itens flexíveis quando os itens não usam todo o espaço disponível no eixo cruzado.
align-self - Especifica o alinhamento de um item flexível (substitui a propriedade align-items do contêiner flexível).
display - Especifica o tipo de caixa usado para um elemento HTML.
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 dentro de um contêiner flexível.
flex-flow - Uma propriedade abreviada para flex-direction e flex-wrap.
flex-grow - Específica quanto um item flexível crescerá em relação ao restante dos itens flexíveis dentro do mesmo contêiner.
flex-shrink - Especifica o quanto um item flexível diminuirá em relação ao restante dos itens flexíveis dentro do mesmo contêiner
flex-wrap - Especifica se os itens flexíveis devem ser agrupados ou não, se não houver espaço suficiente para eles em uma linha flexível.
justify-content - Alinha horizontalmente os itens flexíveis quando os itens não usam todo o espaço disponível no eixo principal.
order - Especifica a ordem dos itens flexíveis dentro do mesmo contêiner.