Parte do Journey de HTMLPopularJornadaAprenda CSS
Um curso de CSS gratuito e interativo. Você estiliza HTML de verdade em cada aula - seletores, o box model, cores, fontes, flexbox, grid, design responsivo - com uma prévia ao vivo enquanto você digita e um certificado gratuito ao concluir. Faz parte da jornada mais ampla de HTML, então o contexto de marcação de que o CSS precisa está ali mesmo.
269,396+ codders inscritos
- Ideal para iniciantes
Ajuda de codificação com IA
Lições interativas e práticas
Narração em áudio em todas as lições
Questionários para testar seu conhecimento
Certificado grátis de conclusão
Programa
Esta seção faz parte do Journey de HTML. O programa completo tem mais seções - clique em qualquer prévia abaixo para vê-la na página do Journey.
- Seção 1Fundamentals60 lições
Seção 2
Styling with CSS
Começar seçãoIniciarExpandirRecolherBring your web pages to life with colors, layouts, and stylesIntrodução
5 lições540- 01O que é CSS?DesafioQuiz
- 02Sintaxe CSSDesafioQuiz
- 03Comentários CSSQuiz
- 04A Tag HeadDesafioQuiz
- 05A Tag TitleDesafioMaestriaQuiz
Adicionando CSS
4 lições725- 01CSS InlineDesafioMaestriaQuiz
- 02CSS InternoDesafioMaestriaQuiz
- 03CSS ExternoDesafioMaestriaQuiz
- 04Desafio de Estilização BásicaDesafio
Seletores Básicos
7 lições1247- 01Introdução aos SeletoresDesafioQuiz
- 02Seletor de TipoDesafioMaestriaQuiz
- 03Seletor de ClasseDesafioMaestriaQuiz
- 04Seletor de IDDesafioMaestriaQuiz
- 05Seletores de GrupoDesafioMaestriaQuiz
- 06Seletor UniversalDesafioMaestriaQuiz
- 07Desafio de SeleçãoDesafio
Fundamentos de Texto
8 lições1450- 01Cor do TextoDesafioMaestriaQuiz
- 02Família da FonteDesafioMaestriaQuiz
- 03Tamanho da FonteDesafioMaestriaQuiz
- 04Peso da FonteDesafioMaestriaQuiz
- 05Alinhamento de TextoDesafioMaestriaQuiz
- 06Decoração de TextoDesafioMaestriaQuiz
- 07Desafio de Recapitulação nº 1Desafio
- 08Desafio de Recapitulação nº 2Desafio
Cores e Planos de Fundo
5 lições834- 01Cor de FundoDesafioMaestriaQuiz
- 02Cores HEXDesafioMaestriaQuiz
- 03Cores RGBDesafioMaestriaQuiz
- 04Transparência com RGBADesafioQuiz
- 05Desafio de Revisão nº 1Desafio
Cardápio de Café
Projeto3 lições1- 01Fundamentos de TipografiaDesafio
- 02Estilização de TextoProjeto
- 03Cores e Planos de FundoProjeto
Modelo de Caixa Parte 1
6 lições943- 01O que é o Modelo de Caixa?Quiz
- 02PaddingDesafioMaestriaQuiz
- 03MargensDesafioMaestriaQuiz
- 04BordasDesafioMaestriaQuiz
- 05Largura e AlturaDesafioMaestriaQuiz
- 06Desafio de RevisãoDesafio
Modelo de Caixa Parte 2
5 lições834- 01Box SizingDesafioQuiz
- 02Border RadiusDesafioMaestriaQuiz
- 03OverflowDesafioMaestriaQuiz
- 04Box ShadowDesafioMaestriaQuiz
- 05Desafio de RevisãoDesafio
Flex Box
6 lições943- 01O que é Flex Box?DesafioQuiz
- 02Flex DirectionDesafioMaestriaQuiz
- 03Justify ContentDesafioMaestriaQuiz
- 04Align ItemsDesafioMaestriaQuiz
- 05O Centro PerfeitoDesafioQuiz
- 06Desafio de Flex BoxDesafio
Formulário de Login
Projeto4 lições1- 01CorpoDesafio
- 02Container do FormulárioProjeto
- 03InputProjeto
- 04BotãoProjeto
Técnicas de Layout
7 lições1152- 01Elementos Block vs InlineDesafioQuiz
- 02Fundamentos de PosicionamentoDesafioMaestriaQuiz
- 03Posicionamento RelativoDesafioMaestriaQuiz
- 04Posicionamento AbsolutoDesafioMaestriaQuiz
- 05Posicionamento FixoDesafioMaestriaQuiz
- 06Fundamentos de Z-IndexDesafioQuiz
- 07Desafio de RecapitulaçãoDesafio
Fundamentos do Design Responsivo
6 lições1052- 01O que é Design Responsivo?DesafioQuiz
- 02Meta Tag ViewportDesafioQuiz
- 03Layouts FluidosDesafioMaestriaQuiz
- 04Unidades de ViewportDesafioMaestriaQuiz
- 05Fundamentos de Media QueriesDesafioMaestriaQuiz
- 06Imagens FlexíveisDesafioMaestriaQuiz
Página Web de Tonga
Projeto6 lições1- 01Menu de NavegaçãoDesafio
- 02Cabeçalho de Boas-vindasProjeto
- 03Seção SobreProjeto
- 04Seção de ContatoProjeto
- 05Tag ViewportProjeto
- 06Media QueryProjeto
Desafios Finais
4 lições4- 01Organizar ItensDesafio
- 02Lista de FilmesDesafio
- 03Convite de CasamentoDesafio
- 04Notificação FlutuanteDesafio
Seção 3
CSS Mastery
Começar seçãoIniciarExpandirRecolherTake you css skills to the next level!Domínio de Seletores – Combinação
6 lições539- 01IntroduçãoQuiz
- 02Seletor de DescendenteDesafioQuiz
- 03Seletor de FilhoDesafioQuiz
- 04Seletor de Irmão AdjacenteDesafioQuiz
- 05Seletor de Irmão GeralDesafioQuiz
- 06Desafio de RecapitulaçãoDesafio
Pseudo-classes Interativas
5 lições431- 01Pseudo-classesQuiz
- 02Efeitos de HoverDesafioQuiz
- 03Efeitos de FocoDesafioQuiz
- 04Estilos AtivosDesafioQuiz
- 05Desafio de RecapitulaçãoDesafio
Pseudo-classes estruturais
5 lições432- 01Pseudo-classes estruturaisQuiz
- 02Selecionando o primeiro filhoDesafioQuiz
- 03Selecionando o último filhoDesafioQuiz
- 04O poder dos padrões: Usando nth-childDesafioQuiz
- 05Desafio de recapitulaçãoDesafio
Projeto de Menu Dropdown
4 lições4- 01Adicionar o submenuDesafio
- 02Exibir o submenuDesafio
- 03Mais estilizaçãoDesafio
- 04Input e botãoDesafio
Efeitos visuais
5 lições536- 01GradientesDesafioQuiz
- 02Filtros CSSDesafioQuiz
- 03TransformaçõesDesafioQuiz
- 04Transições e Efeitos de HoverDesafioQuiz
- 05Desafio de RevisãoDesafio
Landing Page
5 lições5- 01Estilizar a seção do cabeçalhoDesafio
- 02Estilizar o botãoDesafio
- 03Layout da seçãoDesafio
- 04Layout de cardDesafio
- 05Adicionar toques finaisDesafio
Construa com CSS Grid
4 lições426- 01Fundamentos do GridDesafioQuiz
- 02Posicionamento de Itens com Grid-rowDesafioQuiz
- 03Áreas NomeadasDesafioQuiz
- 04Desafio de RevisãoDesafio
Site Flavor Fiesta
4 lições4- 01Configurando o gridDesafio
- 02CabeçalhoDesafio
- 03A parte principalDesafio
- 04RodapéDesafio
Desafios Finais
5 lições5- 01Destacar Menu AtivoDesafio
- 02Linhas de Tabela ZebradasDesafio
- 03Efeito Hover em BotõesDesafio
- 04Layout de Cards em GridDesafio
- 05Imagem Hero DesfocadaDesafio
- Seção 4Practical Frontend35 lições
- Seção 5JavaScript in Action27 lições
Por que aprender CSS com a Coddy
- Escreva CSS no seu navegador e veja a página se reestilizar ao vivo. Sem etapa de build, sem configurar um editor. Cada mudança em um seletor ou propriedade aparece instantaneamente, então você vê o que cada regra realmente faz.
- O essencial do CSS: seletores e especificidade, o box model, posicionamento, flexbox, CSS grid, transições, media queries e design responsivo. O CSS de que todo desenvolvedor front-end precisa no dia a dia.
- As dicas de IA ajudam você a depurar as coisas que sempre confundem - surpresas de especificidade, estouros de layout, comportamentos estranhos do flexbox - sem estragar a solução, para que o CSS se torne intuitivo em vez de mágico.
- Certificado de CSS gratuito ao concluir a seção. Combina naturalmente com os cursos de HTML e JavaScript para uma base completa de front-end.
Perguntas frequentes sobre aprender CSS
O que é CSS?
CSS (Cascading Style Sheets) é a linguagem que controla a aparência das páginas HTML - cores, fontes, espaçamento, layout, animações, comportamento responsivo em diferentes tamanhos de tela. O HTML define o que está na página; o CSS define como ela é apresentada.
CSS é difícil de aprender?
O CSS básico - seletores, cores, fontes, o box model - é fácil de pegar em algumas horas. As partes mais difíceis vêm depois: regras de especificidade, layouts com flexbox e grid e fazer tudo ficar bom em qualquer tamanho de tela. O curso as introduz em passos pequenos com uma prévia ao vivo, então você vê exatamente o que cada regra faz.
Devo aprender HTML antes de CSS?
Sim. O HTML define a estrutura de uma página; o CSS a estiliza. Sem HTML, você não tem nada para estilizar. É por isso que esta seção de CSS faz parte da jornada de HTML - a seção de fundamentos de HTML vem primeiro, e depois você passa a maior parte da jornada estilizando-o.
Qual é a diferença entre CSS, Flexbox e Grid?
Flexbox e Grid são módulos de layout dentro do CSS - não são tecnologias separadas, são recursos do CSS. O Flexbox é melhor para layouts unidimensionais (uma linha de cards, uma barra de navegação). O Grid é melhor para layouts bidimensionais (uma página inteira, um layout de cards complexo). A maioria dos sites reais usa os dois, e o curso aborda quando recorrer a cada um.
Posso aprender CSS online de graça?
Sim. A seção interativa de CSS é gratuita - aulas completas, exercícios de programação, uma prévia ao vivo e um certificado. Tudo roda no navegador, então você não precisa instalar nenhum editor ou ferramenta para começar.
Recebo um certificado após o curso de CSS?
Sim. Concluir a seção de CSS dá a você um certificado de conclusão gratuito. Uma prova verificável que você pode adicionar ao seu currículo ou compartilhar no LinkedIn junto aos certificados de HTML e JavaScript como parte de um portfólio de front-end.
