Seleções:

Formas de usar CSS:

  • Em um arquivo local, importando com a tag link na head do HTML.
  • Importando uma biblioteca externa, como o Bootstrap, através do Node Package Manager ou do CDN deliver.
  • No próprio arquivo HTML, com a tag style, que fica na head.

Formas de selecionar elementos:

  • inline : Em um elemento específico, com a propriedade style.
  • class : Aplicando uma classe no elemento.
  • id : Usando a Identificação.
  • Selecionando de acordo com a tag do elemento.

Na nomenclatura de classes, é bom que sejamos o mais específicos e genéricos ao mesmo tempo. Se formos muito específicos, não poderemos reutilizar o código. Caso formos muito genéricos, teremos que combinar classes para alcançar os resultados desejados.

Força das seleções

Inline > Id > Class > Tags

Sendo que é possível combinar as seleções, usando a classe + tag, por exemplo, assim somando sua força.
O CSS com a seleção mais forte sobrepõe o com a seleção mais fraca.

Boas práticas:

Usar classes nos ajuda a não repetir código e a termos um código mais organizado, mas quando vamos fazer algo muito específico e que não queremos repetir, pode ser melhor usar a seleção inline, principalmente quando não vamos escrever um código muito extenso, caso contrário é melhor usar o id. Uma diferença fundamental entre id e class é que usamos id para definir comportamento e class para estilo.

Seletores avançados de CSS:

  • > : seleciona somente os filhos diretos de um elemento.
  • + : seleciona o irmão mais próximo do elemento.
  • ~ : seleciona todos os elementos seguintes.
  • :not() : seleciona elementos, declarando uma exceção.

div > p -> seleciona todos o parágrafos que são filhos diretos de uma div.

h3 + p -> seleciona o parágrafo irmão de um título h3.

img ~ li -> seleciona todos os itens de listas que vêm depois de uma imagem.

div:not(.exemplo) -> seleciona todas as div que não possuem a classe exemplo.

Cores, medidas e espaçamentos:

Cores:

As cores podem ser definidas pelo nome em inglês, por código hexadecimal, ou seguindo o pardão RGB.

Cor Branca:

white - #FFFFFF ou #FFF (abreviado) - rgb(255, 255, 255)
RGB - rgb( valor da cor vermelha, verde e azul ), os valores variam de 0 a 255
Hex - #vermelho, verde e azul - valores que variam de 00 a FF.

Espaçamentos:

  • width : Largura do elemento.
  • height : Altura do elemento.
  • max-width e max-height : Definem uma largura e altura máxima.
  • margin : Espaçamento externo.
  • padding : Espaçamento interno.
  • border : Borda, devemos passar a espessura, o estilo (sólida, pontilhada, etc) e a cor.
  • border-radius : Arredonda os vértices da borda.

Unidades de medida:

  • % : Unidade proporcional, referente ao tamanho da tela.
  • px : Pixel, por não ser proporcional, pode não ser a mais unidade mais adequada pensando na acessibilidade e responsividade.
  • em : Unidade proporcional, referente ao tamanho da fonte do elemento pai. EM significa ephemeral (efêmero), que muda.
  • rem : Unidade relativa ao tamanho da fonte do elemento raiz (html). REM significa root ephemeral, que muda porém a partir da raiz.
  • vw : Unidade referente ao tamanho da largura da tela - viewport width.
  • vh : Unidade referente ao tamanho da altura da tela - viewport height.
  • 9999px: Valor infinito do CSS.

Fonte com 24px

Fonte com 1.5em

10% de padding para baixo.

1.5em de padding para baixo.

30px de padding para baixo.

Cálculos com CSS:

Embora seja uma funcionalidade usado somente em momentos muito específicos, existe a função calc no css, onde é possível fazer operações matemáticas. Exemplo:

width: calc(40% + 55px);
width: calc(10em + 20%);

Variáveis com CSS:

Para simplificar o código e evitar problemas com refatorações e mudanças de tema, podemos usar variáveis no CSS, instanciando-as com --nome-da-variavel: valor; e depois as utilizando com var(--nome-da-variavel).

:root {
--branco: #FFF;
--fonte-sans: sans-serif;
--rosa: #F0F;
}
.exemplo-variaveis {
font-family: var(--fonte-sans);
background-color: var(--rosa);
color: var(--branco);
}

Texto e fonte:

Propriedades:

  • font-size : tamanho da fonte.
  • font-family : fonte utilizada, podemos importar fontes da API de fontes do Google.
  • font-style : estilo da fonte, italic (itálico) por exemplo.
  • font-weight : peso da fonte, bold (negrito) por exemplo.
  • color : cor da fonte.
  • text-align : alinhamento do texto (left, right, center e justify)
  • text-transform : altera o texto, uppercase - maiúsculo, lowercase - minúsculo, capitalize - somente a primeira letra maiúscula.
  • text-decoration : decoração do texto, underline (sublinhado) por exemplo.
  • line-height : altura da linha, que é proporcional à fonte. Aumento essa propriedade, é possível aumentar o espaçamento entre linhas.

Importando fontes:

As fontes padrões não são as mais adequadas para a internet, pois em sua maioria, foram feitas pensando em textos impressos. Usar fontes externas pode padronizar o conteúdo em todos os navegadores, deixar a página mais agradável esteticamente, e ainda ganhamos mais alternativas.

É possível importar fontes da API Google Fonts, uma das mais usadas no mercado: Google Fonts

Depois de importar na head do HTML, basta usar no CSS:

body {
font-family: 'Monstserrat', sans-serif;
}

Caracteres especiais unicode:

É possível usar caracteres unicode na sua página HTML, basta pesquisar na internet, copiar e colar. Veja alguns exemplos:

  • Ψ
  • η
  • 🙂

Podemos colocar emojis, símbolos ou até caracteres de outros alfabetos no nosso site desse modo. É possível simplesmente copiar e colar símbolos ou usar um código HTML específico, que cada símbolo tem para utilizá-los.

Veja mais no site Unicode Table

Usando pseudo classes e elementos:

Pseudoclasses:

  • hover : Cursor sobre o elemento.
  • focus : Clique do mouse.
  • active : Clicar e segurar do mouse.
  • required : Elemento obrigatório.
  • first-child : Primeiro elemento filho.
  • last-child : Último elemento filho.
  • nth-child : Número n da lista.
#hover:hover {
background-color: #FFF;
color: #222;
}
#focus:focus {
background-color: lightcyan;
color: fuchsia;
}
#active:active {
background-color: floralwhite;
color: firebrick;
}

Pseudoelementos no CSS:

Podemos criar elementos que não existem no HTML com CSS, atribuindo classes por exemplo. Pseudoelementos criados com CSS existem somente de forma visual, não é possível selecioná-los com o mouse, por exemplo.

Alguns exemplos:

  • first-letter : Primeira letra.
  • first-line : Primeira linha.
  • before : Podemos inserir algo no HTML antes do elemento.
  • after : Podemos inserir HTMl depois do elemento.

Colocando o texto entre parentêses:

.entre-parenteses::before {
content: "( ";
}
.entre-parenteses::after {
content: " )";
}
.entre-parenteses::first-letter {
font-weight: bold;
}

Primeira letra em negrito.

Primeira letra maior.

.primeira-em-negrito::first-letter {
font-weight: bold;
}
.primeira-maior::first-letter {
font-size: 1.4em;
}

Display e posicionamento:

A propriedade display:

  • none : desabilita a visualização do elemento.
  • inline : o elemento ocupa somente o seu tamanho original, não é possível alterar sua altura ou largura.
  • block : o elemento ocupa toda a largura do seu elemento pai.
  • inline-block : ocupa o espaço relativo ao seu próprio tamanho, podendo ser alterado com as propriedades height e width.

Posicionamento, a propriedade position:

  • static : Elementos posicionados de acordo com a ordem que aparecem no HTML.
  • absolute : Posição relativa ao seu antecessor mais próximo, o elemento fica por cima da apresentação.
  • fixed : Posição fixa na janela do navegador.
  • relative : Segue seu posicionamento normal, pode ser definido com as propriedades right, left, top e bottom.
  • sticky : Posição relativa à barra de rolagem do navegador.

Usando float:

A propriedade float permite que "levantemos" um elemento, contudo afetando também os elementos posteriores, por isso devemos usar a propriedade clear para limpar o float.

Imagem de Exemplo
Usando float, é possível fazer com que outros elementos flutuem ao redor de outro.
Agora basta limpar o float no próximo elemento.
/* Marcando o início do float */
float: left;
/* Limpando-o, passando qual o tipo de float deve ser limpo */
clear: left;

Degradês e opacidade:

Degradês em CSS:

É possível fazer muitas coisas com essa funcionalidade, podemos passar quantas cores quisermos, ângulo de inclinação e até mesmo qual a porcentagem que cada cor deverá ocupar.

Aplicando o degradê no background:

.degrade {

background: linear-gradient(grey, lightgrey, white);

}
.degrade-vertical {

background: linear-gradient(90deg, grey, lightgrey, white);

}
.degrade-circular {

background: radial-gradient(lightgrey, white);

}

Fazendo um Arco Íris com Degradê:

.arco-iris {
background: linear-gradient(90deg, red, orange, yellow, green, blue, darkblue, violet);
}

Opacidade e alinhamento

  • opacity : podemos diminuir a visibilidade do elemento.
  • rgba : podemos definir uma cor com opacidade.
  • vertical-align : é possível alterar o alinhamento padrão.
Imagem de Exemplo opacity: 50%; vertical-align: top; color: rgba(0,0,0,60%)

Transition, transform e responsividade:

Transições:

Com a propriedade transition, é possível fazer com que uma mudança ocorra de forma gradual, precisamos definir o tempo da transição e qual a transformação.

#botao-transicao {
transition: 1.5s all;
}
#botao-transicao:hover {
background-color: #FFF;
color: #222;
}

Transformações:

Usando CSS, é possível fazer algumas transformações nos elementos a partir de certos eventos (pseudoclasses). Podemos, por exemplo, rotacionar o elemento, aumentar seu tamanho e entre outros.

Aumentando o tamanho

Rotacionando elemento.

.transformar {
transition: 1.5s all;
}
.scale:hover {
transform: scale(1.2);
}
.rotate:hover {
transform: rotate(360deg);
}

Fazendo adaptações para celulares:

É possível fazer adaptações na visualização dependendo das dimensões da tela do dispositivo:

Precisamos, antes de tudo, definir uma nova tag meta na head do html, com as propriedades name="viewport" e content="width=device-width", assim fazendo com que a largura da página seja igual à largura da tela do dispositivo.

Depois, basta fazer as alterações no CSS:

@media screen and (max-width: 480px) {
/* Definindo propriedades diferentes para telas com até 480 px de largura */
}

Sombreamento:

Aplicando sombras:

Para sombrear um elemento, basta utilizarmos a propriedade box-shadow, que recebe o valor no eixo X (horizontal), eixo Y (vertical), blur (espalhamento), intensidade da borda e a cor.

box-shadow: 10px 10px #222; /* sem transparência na sombra */
box-shadow: -10px -10px 15px #222; /* com blur de 15px e aplicando coordenadas X e Y negativas */
box-shadow: 10px 10px 15px 5px #222; /* Intensidade de borda em 5px */
box-shadow: 10px 10px #222, -10px -10px #CDCD; /* colocando mais de uma sombra no elemento */
box-shadow: inset 0 0 20px #AAA; /* sombra interna */
text-shadow: 1px 1px green; /* sombras em textos */

Display flex:

O display flex é utilizado para alterar a forma como os elementos filhos se distribuem pela container flex (qualquer tag pai que possua a propriedade display: flex).

Principais propriedades:

flex-direction - Direção na qual os itens são posicionados:

  • row: Horizontal, da esquerda para direita
  • row-reverse: Horizontal, da direita para esquerda
  • column: Vertical, de cima para baixo
  • column-reverse: Vertical, da baixo para cima
FlexDirectionRow
FlexDirectionRow-reverse
FlexDirectionColumn
FlexDirectionColum-reverse

flex-wrap - Espaço que os elementos vão ocupar:

  • nowrap: Todos os elementos vão ocupar uma só linha, mesmo que seus tamanhos tenham que diminuir
  • wrap: Os elementos vão se agrupar em várias linhas, de cima para baixo
  • wrap-reverse: Igual ao wrap, mas de baixo para cima

Também existe a propriedade flex-flow, que combina a flex-direction com flex-wrap. Exemplo: flex-flow: row wrap;

nowrap

wrap

wrap-reverse

justify-content - Define o alinhamento dos elementos com relação ao eixo principal (depende da flex-direction):

  • flex-start: Começo do flex, exemplo: esquerda quando o flex-direction: row
  • flex-end: Fim do flex, exemplo: para baixo quando o flex-direction: column
  • center: Meio do flex
  • space-between: Elementos se distribuem com o mesmo espaço entre eles, sem espaçamento entre o primeiro e o começo nem entre o último e o fim
  • space-around: O mesmo espaçamento entre o começo e o fim de cada elemento
  • space-evenly: A distância entre dois elementos, assim como a distância entre um elemento e um extremo são iguais

flex-start

flex-end

center

space-between

space-around

space-evenly

align-items - Parecido com o justify-content, apenas com a direção perpendicular ao eixo principal do flex:

  • stretch: os elementos se esticam para ocupar todo o container
  • center: no meio do eixo secundário
  • flex-start: no começo do eixo secundário
  • flex-end: no fim do eixo secundário
  • baseline: os elementos se alinham de acordo com sua base normal

Exemplos com flex-direction: column

stretch

center

flex-start

flex-end

baseline

align-content - Configura o alinhamento quando há mais de uma linha no container:

  • flex-start: agrupa os elementos no começo do flex
  • flex-end: agrupa os elementos no final do flex
  • center: coloca os elementos no centro do container
  • space-between: elementos distribuídos igualmente, com a primeira linha no flex-start e a última no flex-end
  • space-around: elementos distribuídos igualmente, com um mesmo espaço entre as linhas
  • space-evenly: cada elemento é distribuído com o mesmo espaçamento em sua volta
  • stretch: as linhas se esticam para ocupar todo o espaço

gaps - determinam os espaçamentos entre os itens, funcionando como uma margin

  • gap: espaçamento geral em volta do elemento
  • column-gap: espaçamento entre colunas
  • row-gap: espaçamento entre linhas

align-self - propriedade colocada num item dentro de container flex, que sobrescreve seu alinhamento original:

Possui os mesmos valores que align-items. Exemplo com flex-flow: column wrap, e com align-items: center. A quarta barra se encontra no começo (align-self: flex-start) e a quinta no fim (align-self: flex-end).

Display-grid:

O display grid serve para alterar a forma como o conteúdo da página é posicionado, ideal para layouts mais complexos e que não seguem uma estrutura linear, contendo seções uma do lado da outra, ocupando um espaço pré determinado de linhas e colunas.

A propriedade grid:

Com a propriedade grid é possível definir as linhas e colunas, assim como seus tamanhos de forma enxuta.

Exemplos:

div 1
div 2
div 3
div 4
div 5
div 6

Foram definidas duas linhas e três colunas, cada uma ocupando o mesmo espaço, por causa do valor auto na propriedade grid:

grid: {
auto auto / auto auto auto;
/* linhas / colunas */
}
div 1
div 2
div 3
div 4
div 5
div 6

No caso acima, definimos a fração que cada linha e coluna podem ocupar, assim delimitando seus tamanhos facilmente. Também podemos definir seus tamanhos com outras unidades, como em, rem, px, % e entre outras.

grid: {
1fr 2fr / 1fr 1fr 2fr;
/* 1/3 2/3 / 1/4 1/4 2/4 */
}

Grid areas:

Uma outra forma de usar grid é com as grid areas, onde podemos definir áreas específicas e já onde serão posicionadas, assim como quais linhas e colunas ocuparão.

Cabeçalho
Menu lateral
Conteúdo principal
Rodapé
.grid-area {
display: grid;
grid-template-areas: 'vermelho vermelho vermelho vermelho'
'azul verde verde verde'
'azul verde verde verde'
'azul verde verde verde'
'azul amarelo amarelo amarelo';
color: #FFFFFF;
font-weight: 600;
text-align: center;
}
.vermelho {
background-color: #EE1111;
grid-area: vermelho;
padding: 1rem;
border-radius: 1rem;
}
.azul {
background-color: #1111EE;
grid-area: azul;
padding: 1rem;
border-radius: 1rem;
}
.verde {
background-color: #11EE11;
grid-area: verde;
padding: 1rem;
border-radius: 1rem;
}
.amarelo {
background-color: #EEEE11;
grid-area: amarelo;
padding: 1rem;
border-radius: 1rem;
}

É importante saber que é possível usar os displays grid e flex em conjunto, cada seção dentro de um container grid pode ser um container flex. Também podemos adicionar espaçamento entre as linhas e colunas de um grid com as propriedades grid-row-gap e grid-column-gap, de forma parecida com o que temos no display flex.