EasyCode365EasyCode365

Fundamentos de CSS

Comece aqui para estilizar suas primeiras páginas web com cores, espaçamento, tipografia e layouts para iniciantes.

  1. O que é CSS?

    Aprenda o que é CSS, como CSS e HTML trabalham juntos, e como escrever estilos com tags style, estilos inline e folhas de estilo externas.

  2. Sintaxe CSS e seletores básicos

    Aprenda a estrutura de uma regra CSS, declarações e seletores básicos como seletores de elemento, classe, ID e seletores agrupados.

  3. Seletores CSS avançados e combinadores

    Pratique seletores CSS avançados, como seletores de atributo, filho, irmãos, descendentes e o seletor universal.

  4. Especificidade, herança e cascata

    Entenda o peso dos seletores, a ordem da cascata, herança, regras conflitantes e quando usar ou evitar !important.

  5. Valores, unidades e cores em CSS

    Aprenda valores, unidades e cores comuns em CSS, incluindo px, em, rem, porcentagens, RGB, RGBA, HSL e cores hexadecimais.

  6. Dominando o modelo de caixa CSS

    Entenda a área de conteúdo, padding, bordas, margens, colapso de margens e como box-sizing afeta o layout.

  7. Noções básicas de tipografia web

    Aprenda o básico de tipografia web, incluindo font-family, tamanho da fonte, line-height, alinhamento e formatação simples de texto.

  8. Fundos e bordas

    Aprenda a estilizar fundos e bordas com cores, imagens, repetição, estilos de borda e border-radius.

  9. Interativa

    Aula interativa: margin, padding, border

    Pratique margin, padding, largura da borda, estilo da borda e border-radius com uma caixa CSS ao vivo.

  10. Criando links e navegação

    Aprenda a estilizar estados de links e criar barras de navegação verticais e horizontais simples.

  11. Estilizando listas e tabelas

    Aprenda a estilizar listas e tabelas com marcadores personalizados, espaçamento, bordas, alinhamento, linhas alternadas e layouts de dados legíveis.

  12. Estilizando formulários e botões

    Aprenda a estilizar inputs, labels, checkboxes, botões, estados de foco e estilos padrão de formulários do navegador.

  13. Formatação visual básica e posicionamento

    Aprenda o fluxo do documento, valores display como block, inline e inline-block, além de posicionamento relativo e absoluto básico.

  14. Elementos flutuantes e clearfix

    Aprenda como floats funcionam, como o texto envolve elementos flutuantes e como clear e clearfix resolvem problemas de layout.

  15. Introdução ao CSS Flexbox

    Aprenda o básico de contêineres flex, itens flex, direção, alinhamento, quebra de linha, espaçamento e proporções.

  16. Interativa

    Aula interativa: CSS Flexbox

    Pratique direção, quebra de linha, alinhamento, espaçamento e proporções de itens no Flexbox com playgrounds focados ao vivo.

  17. Introdução ao CSS Grid

    Aprenda os conceitos básicos do CSS Grid, incluindo contêineres grid, itens grid, linhas, colunas, gaps e layouts simples de página.

  18. Interativa

    Aula interativa: Layout com CSS Grid

    Pratique colunas, linhas, gaps, spanning e auto-placement do CSS Grid com um playground ao vivo.

  19. Introdução ao design responsivo e media queries

    Aprenda media queries básicas, layouts mobile-first, breakpoints e como adaptar páginas para celular, tablet e desktop.