12 capítulos · 124 aulas

Curso de CSS

Aprenda a dar vida e beleza às suas páginas web, transformando o esqueleto HTML em interfaces visuais incríveis com o CSS.

1

Introdução ao CSS

Entenda o que é CSS, sua importância e como ele se conecta com o HTML para criar páginas visualmente atraentes.

  1. O que é CSS e por que ele é tão importante?
  2. Como o CSS funciona: a conexão com o HTML
  3. Três formas de usar CSS: inline, interno e externo
  4. Sintaxe básica do CSS: seletores, propriedades e valores
  5. Comentários no CSS: organizando seu código
2

Seletores CSS: Mirando nos Elementos Certos

Domine a arte de selecionar elementos HTML específicos para aplicar estilos, como um arqueiro que acerta o alvo.

  1. Seletor de Tipo (Elemento): Estilizando todos os 'iguais'
  2. Seletor de Classe: Dando um 'sobrenome' aos elementos
  3. Seletor de ID: O 'RG' único de um elemento
  4. Seletores Combinadores: Relacionando elementos
  5. Seletores de Atributo: Estilizando por características
  6. Seletores de Pseudoclasse: Estilizando estados e posições
  7. Seletores de Pseudoelemento: Estilizando partes de um elemento
  8. Seletor Universal (*): Aplicando a todos os elementos
  9. Encadeando Seletores: Combinando para maior precisão
3

Cores e Fundos: Pintando sua Página Web

Explore as propriedades CSS para definir cores de texto, fundos e bordas, dando vida visual aos seus designs.

  1. Cores no CSS: Nomes, Hexadecimal, RGB e HSL
  2. Propriedade color: Estilizando o texto
  3. Propriedade background-color: Preenchendo o fundo
  4. Propriedade background-image: Usando imagens de fundo
  5. Propriedades background-repeat e background-position
  6. Propriedade background-size: Ajustando o tamanho da imagem de fundo
  7. Propriedade background-attachment: Fundo fixo ou rolante
  8. Shorthand background: Atalho para todas as propriedades de fundo
  9. Gradientes CSS: Transições de cores suaves
4

Fontes e Textos: Dando Voz às Suas Palavras

Personalize a tipografia da sua página, controlando fontes, tamanhos, estilos e alinhamento do texto.

  1. Propriedade font-family: Escolhendo a 'letra' do seu texto
  2. Propriedade font-size: Controlando o tamanho do texto
  3. Propriedade font-weight: Negrito e a 'grossura' da fonte
  4. Propriedade font-style: Itálico e outros estilos
  5. Propriedade text-align: Alinhando o texto
  6. Propriedade text-decoration: Sublinhado, riscado e mais
  7. Propriedade text-transform: Maiúsculas e minúsculas
  8. Propriedade line-height: Espaçamento entre linhas
  9. Propriedade letter-spacing e word-spacing: Espaçamento entre letras e palavras
  10. Shorthand font: Atalho para propriedades de fonte
  11. Importando fontes do Google Fonts
5

Modelo de Caixa (Box Model): Entendendo o Espaço dos Elementos

Compreenda como cada elemento HTML é tratado como uma 'caixa' e como controlar seu tamanho, espaçamento e bordas.

  1. O que é o Box Model e por que ele é fundamental?
  2. Propriedade width e height: Definindo o tamanho do conteúdo
  3. Propriedade padding: O 'acolchoamento' interno da caixa
  4. Propriedade border: As 'paredes' da sua caixa
  5. Propriedade margin: O 'espaçamento' externo entre caixas
  6. Shorthands para padding, border e margin
  7. Box-sizing: content-box vs border-box
  8. Colapso de Margens: Um comportamento inesperado
6

Display e Posicionamento: Organizando Elementos na Tela

Aprenda a controlar como os elementos são exibidos e posicionados na página, criando layouts complexos e responsivos.

  1. Propriedade display: block, inline e inline-block
  2. Propriedade display: none: Escondendo elementos
  3. Propriedade position: static, relative, absolute, fixed e sticky
  4. Propriedades top, right, bottom, left: Ajustando a posição
  5. Propriedade z-index: Controlando a ordem de empilhamento
  6. Propriedade float: Flutuando elementos para layouts de coluna
  7. Propriedade clear: Limpando os floats
  8. Propriedade overflow: Lidando com conteúdo que 'transborda'
  9. Propriedade visibility: Escondendo mas mantendo o espaço
7

Flexbox: O Guia Definitivo para Layouts Flexíveis

Domine o Flexbox, uma ferramenta poderosa para criar layouts responsivos e organizar itens em uma única dimensão (linha ou coluna).

  1. O que é Flexbox e por que usá-lo?
  2. Contêiner Flex (Flex Container): O pai que organiza os filhos
  3. Itens Flex (Flex Items): Os filhos que se adaptam
  4. Propriedade flex-direction: Orientando os itens (linha ou coluna)
  5. Propriedade justify-content: Alinhando itens no eixo principal
  6. Propriedade align-items: Alinhando itens no eixo cruzado
  7. Propriedade flex-wrap: Quebrando linhas de itens
  8. Shorthand flex-flow: Atalho para flex-direction e flex-wrap
  9. Propriedade align-content: Alinhando linhas de itens (com flex-wrap)
  10. Propriedade order: Mudando a ordem visual dos itens
  11. Propriedade flex-grow: Fazendo itens 'crescerem'
  12. Propriedade flex-shrink: Fazendo itens 'encolherem'
  13. Propriedade flex-basis: Definindo o tamanho inicial do item
  14. Shorthand flex: Atalho para flex-grow, flex-shrink e flex-basis
  15. Propriedade align-self: Alinhando um item individualmente
  16. Exemplos práticos de layouts com Flexbox
8

CSS Grid Layout: A Rede para Layouts Bidimensionais

Explore o CSS Grid, a ferramenta mais poderosa para criar layouts complexos e responsivos em duas dimensões (linhas e colunas).

  1. O que é CSS Grid e quando usá-lo?
  2. Contêiner Grid (Grid Container): A 'tabela' que organiza os filhos
  3. Itens Grid (Grid Items): Os filhos que ocupam as células
  4. Propriedade grid-template-columns: Definindo as colunas
  5. Propriedade grid-template-rows: Definindo as linhas
  6. Unidade fr: A unidade 'fracionária' para grids flexíveis
  7. Função repeat(): Simplificando a criação de linhas e colunas
  8. Propriedades grid-gap, grid-column-gap, grid-row-gap: Espaçamento entre células
  9. Propriedades grid-column-start, grid-column-end, grid-row-start, grid-row-end: Posicionando itens
  10. Shorthands grid-column e grid-row: Atalhos para posicionamento
  11. Propriedade grid-area: Nomeando áreas do grid
  12. Propriedade grid-template-areas: Desenhando o layout com nomes
  13. Propriedades justify-items, align-items, place-items: Alinhando itens dentro das células
  14. Propriedades justify-content, align-content, place-content: Alinhando o grid inteiro
  15. Exemplos práticos de layouts com CSS Grid
9

Transformações e Filtros Visuais: Dando Vida e Efeitos aos Elementos

Aprenda a mover, girar, escalar e distorcer elementos, além de aplicar filtros visuais como desfoque e saturação, para criar designs dinâmicos e interativos.

  1. O que são transform e filter e suas aplicações?
  2. Propriedade transform: Movendo, girando e escalando elementos
  3. Função translate(): Movendo elementos (X, Y, Z)
  4. Função rotate(): Girando elementos (2D e 3D)
  5. Função scale(): Aumentando e diminuindo elementos
  6. Função skew(): Distorcendo elementos
  7. Propriedade transform-origin: Definindo o ponto de pivô
  8. Múltiplas Transformações: Combinando efeitos
  9. Propriedade filter: Aplicando efeitos visuais (desfoque, saturação, etc.)
  10. Funções de filter: blur(), brightness(), contrast(), grayscale()
  11. Funções de filter: hue-rotate(), invert(), opacity(), saturate(), sepia()
  12. Combinando transform e filter para efeitos avançados
10

Transições e Animações: Dando Movimento à Sua Página

Adicione vida e interatividade aos seus designs com transições suaves e animações CSS, criando experiências de usuário dinâmicas.

  1. O que são Transições CSS e como elas funcionam?
  2. Propriedade transition-property: O que vai mudar?
  3. Propriedade transition-duration: Quanto tempo vai durar?
  4. Propriedade transition-timing-function: A 'velocidade' da transição
  5. Propriedade transition-delay: Quando a transição começa?
  6. Shorthand transition: Atalho para todas as propriedades de transição
  7. O que são Animações CSS e como elas se diferenciam das transições?
  8. Regra @keyframes: Definindo os 'quadros' da animação
  9. Propriedade animation-name: Chamando sua animação
  10. Propriedade animation-duration: Quanto tempo dura a animação?
  11. Propriedade animation-timing-function: A 'velocidade' da animação
  12. Propriedade animation-delay: Quando a animação começa?
  13. Propriedade animation-iteration-count: Quantas vezes a animação se repete?
  14. Propriedade animation-direction: Direção da animação (normal, alternate)
  15. Propriedade animation-fill-mode: O que acontece antes e depois da animação?
  16. Propriedade animation-play-state: Pausando e retomando animações
  17. Shorthand animation: Atalho para todas as propriedades de animação
  18. Exemplos práticos de transições e animações
11

Variáveis CSS e Funções: Reutilizando e Otimizando

Aprenda a usar variáveis CSS para tornar seu código mais organizado, fácil de manter e reutilizável, e explore funções úteis.

  1. O que são Variáveis CSS (Custom Properties) e por que usá-las?
  2. Declarando e usando Variáveis CSS: --nome-da-variavel e var()
  3. Escopo das Variáveis CSS: Global e Local
  4. Função calc(): Realizando cálculos no CSS
  5. Funções de Cor: rgb(), rgba(), hsl(), hsla()
  6. Funções de String: attr()
12

Boas Práticas e Otimização CSS

Adote as melhores práticas para escrever CSS limpo, organizado, eficiente e fácil de manter, garantindo a qualidade do seu código.

  1. Organização do Código CSS: Modularização e Estrutura
  2. Convenções de Nomenclatura: BEM, OOCSS, SMACSS
  3. Evitando o uso de !important: Quando e por que evitar
  4. Minificação e Compressão de CSS: Otimizando para performance
  5. Ferramentas de Linter e Formatador: Mantendo o código limpo
  6. Performance CSS: Dicas para um carregamento rápido