Este curso divide os fundamentos do CSS em partes claras e de fácil compreensão. Nos próximos módulos, você aprenderá como os principais aspectos do CSS funcionam e como usá-los efetivamente nos seus projetos. Use o painel de menu ao lado do logotipo "Aprenda CSS" para navegar pelos módulos.
Você aprenderá os fundamentos do CSS, como modelo de caixa, cascata e especificidade, flexbox, grade e Z-index. Você também aprenderá sobre funções, tipos de cores, gradientes, propriedades lógicas e herança para se tornar um desenvolvedor de front-end completo, pronto para assumir qualquer interface do usuário.
Cada módulo está cheio de demonstrações interativas e autoavaliações para você testar seu conhecimento. Além de aprender com leituras e demonstrações, há um episódio de podcast que acompanha cada tópico como outra maneira de aprender e continuar expandindo seu conhecimento.
Este curso foi criado para desenvolvedores de CSS iniciantes e avançados. Você pode conferir a série do início ao fim para ter uma compreensão geral do CSS ou usar o app como referência para assuntos específicos de estilo. Para iniciantes em desenvolvimento da Web em geral, confira Aprender HTML para saber como escrever marcação e vincular suas folhas de estilo.
Você aprenderá a fazer o seguinte:
Modelo de caixa
Como tudo o que o CSS exibe é uma caixa, entender como funciona o modelo de box CSS é uma base fundamental do CSS.
Seletores
Para aplicar CSS a um elemento, é necessário selecioná-lo. O CSS oferece várias maneiras diferentes de fazer isso, e você pode conhecê-las neste módulo.
A cascata
Às vezes, duas ou mais regras CSS concorrentes podem ser aplicadas a um elemento. Saiba como o navegador escolhe qual usar e como controlar essa seleção.
Especificidade
Este módulo analisa em detalhes a especificidade, uma parte fundamental da cascata.
Herança (link em inglês)
Algumas propriedades CSS são herdadas se você não especificar um valor para elas. Descubra como isso funciona e como usá-lo a seu favor neste módulo.
Cor
Há várias maneiras diferentes de especificar a cor no CSS. Este módulo examina os valores de cor mais usados.
Unidades de dimensionamento
Saiba como dimensionar elementos usando CSS, trabalhando com as mídias flexíveis da Web.
Layout
Uma visão geral dos vários métodos de layout disponíveis ao criar um componente ou layout de página.
Flexbox (link em inglês)
O Flexbox é um mecanismo de layout projetado para dispor grupos de itens em uma dimensão. Aprenda a usá-la neste módulo.
Grade
O CSS Grid Layout fornece um sistema de layout bidimensional, controlando o layout em linhas e colunas. Descubra tudo o que a grade tem a oferecer.
Propriedades lógicas
As propriedades e os valores lógicos relativos ao fluxo são vinculados ao fluxo do texto, não à forma física da tela. Saiba como aproveitar essa abordagem mais recente do CSS.
Espaçamento
Descubra como selecionar o melhor método de espaçamento entre elementos para o método de layout que você está usando e o componente que está criando.
Pseudoelementos
Um pseudoelemento é como adicionar ou segmentar um elemento extra sem precisar adicionar mais HTML. Eles têm diversos papéis, e você vai aprender sobre eles neste módulo.
Pseudoclasses
Com as pseudoclasses, é possível aplicar CSS com base nas alterações de estado. Isso significa que o design pode reagir a entradas do usuário, como endereços de e-mails inválidos.
Bordas
As bordas fornecem um frame para as caixas. Saiba como alterar o tamanho, o estilo e a cor das bordas usando CSS.
Sombras
Há várias maneiras de adicionar sombras a textos e elementos no CSS. Saiba como usar cada opção e para que tarefas elas foram projetadas.
Foco
Entenda a importância do foco nos seus aplicativos da Web. Você vai aprender a gerenciar o foco e garantir que o caminho pela página funcione para pessoas que usam o mouse e o teclado para navegar.
Z-index e contextos de empilhamento
Descubra como controlar a ordem em que os elementos se sobrepõem uns aos outros usando o Z-index e o contexto de empilhamento.
Funções
O CSS tem várias funções integradas. Saiba mais sobre algumas das principais funções e como usá-las.
Gradientes
Neste módulo, você descobrirá como usar os vários tipos de gradientes disponíveis no CSS. Os gradientes podem criar uma série de efeitos úteis, sem que apps gráficos precisem criar imagens.
Animações
Uma animação é uma ótima maneira de destacar elementos interativos e adicionar interesse e diversão aos seus designs. Saiba como adicionar e controlar efeitos de animação com CSS.
Filtros
Com os filtros no CSS, é possível aplicar efeitos que só seriam possíveis em um aplicativo gráfico. Neste módulo, você vai descobrir o que está disponível.
Modos de combinação
Crie efeitos de composição misturando duas ou mais camadas e aprenda a isolar uma imagem com um fundo branco neste módulo sobre modos de combinação.
Listas
Estruturalmente, uma lista é composta por um elemento de contêiner de lista preenchido com itens de lista. Neste módulo, você vai aprender a definir o estilo de todas as partes de uma lista.
Transições
Aprenda a definir transições entre os estados de um elemento. Use transições para melhorar a experiência do usuário fornecendo feedback visual para a interação do usuário.
Estourar
Overflow é como você lida com conteúdo que não se encaixa em um tamanho pai definido. Neste módulo, você vai pensar fora da caixa e aprender a estilizar um conteúdo que ultrapassa o limite.
Planos de fundo
Aprenda a definir o estilo dos planos de fundo das caixas usando CSS.
Texto e tipografia
Saiba como estilizar textos na Web.
Conclusão e próximas etapas
Outros recursos para ajudar você nas próximas etapas.
Tudo pronto para aprender sobre CSS? Vamos começar.