Este curso divide os fundamentos do CSS em partes claras e fáceis de entender. Nos próximos módulos, você vai aprender como funcionam os principais aspectos do CSS e como usá-los de maneira eficaz nos seus projetos. Use o painel de menu ao lado do logotipo "Aprenda CSS" para navegar pelos módulos.
Você vai aprender os fundamentos do CSS, como o modelo de caixa, a cascata e a especificidade, o flexbox, a grade e o z-index. Você também vai 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 qualquer interface do usuário.
Cada módulo tem 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 para cada tópico como outra forma de aprender e continuar expandindo seus conhecimentos.
Este curso foi criado para desenvolvedores de CSS iniciantes e avançados. Você pode ler a série do início ao fim para entender o CSS de cima para baixo ou usar como referência para assuntos específicos de estilização. Para quem não tem experiência com desenvolvimento da Web, confira Aprenda HTML e saiba como escrever marcações e vincular suas folhas de estilo.
Você vai aprender a:
Modelo de caixa
Como tudo que o CSS mostra é uma caixa, entender como o modelo de caixa do CSS funciona é uma base fundamental do CSS.
Seletores
Para aplicar CSS a um elemento, você precisa selecioná-lo. O CSS oferece várias maneiras de fazer isso, e você pode conhecer todas elas neste módulo.
Aninhamento
Aninhar regras de estilo CSS pode tornar suas folhas de estilo mais organizadas, fáceis de ler e de manter.
A cascata
Às vezes, duas ou mais regras CSS conflitantes podem ser aplicadas a um elemento. Saiba como o navegador escolhe qual usar e como controlar essa seleção.
Especificidade
Este módulo analisa 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. Saiba como isso funciona e como usar a seu favor neste módulo.
Cor
Há várias maneiras diferentes de especificar cores em CSS. Este módulo examina os valores de cores mais usados.
Unidades de dimensionamento
Saiba como dimensionar elementos usando CSS e trabalhe com o meio flexível da Web.
Layout
Uma visão geral dos vários métodos de layout que você pode escolher ao criar um layout de componente ou página.
Flexbox
O Flexbox é um mecanismo de layout projetado para organizar grupos de itens em uma dimensão. Aprenda a usar neste módulo.
Grade
O layout de grade CSS oferece um sistema de layout bidimensional, controlando o layout em linhas e colunas. Descubra tudo o que a grade tem a oferecer.
Propriedades lógicas
Propriedades e valores lógicos e relativos ao fluxo são vinculados ao fluxo de texto, não ao formato físico da tela. Aprenda a aproveitar essa abordagem mais recente do CSS.
Propriedades personalizadas
Com as propriedades personalizadas, ou variáveis CSS, é possível organizar e reutilizar valores no CSS para que os estilos sejam mais flexíveis e fáceis de entender.
Espaçamento
Saiba como selecionar o melhor método de espaçamento de 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 várias funções, e você pode saber mais sobre elas neste módulo.
Pseudoclasses
As pseudoclasses permitem aplicar CSS com base em mudanças de estado. Isso significa que seu design pode reagir à entrada do usuário, como um endereço de e-mail inválido.
Bordas
Uma borda fornece um frame para suas caixas. Saiba como mudar o tamanho, o estilo e a cor das bordas usando CSS.
Sombras
Há várias maneiras de adicionar sombras a texto e elementos em CSS. Saiba como usar cada opção e as tarefas para as quais elas foram criadas.
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 um mouse e um teclado para navegar.
Cursores e ponteiros
O cursor é uma maneira essencial para os usuários saberem com o que estão interagindo. Neste módulo, você vai aprender a estilizar cursores em circunstâncias específicas.
Z-index e contextos de empilhamento
Saiba como controlar a ordem em que os elementos são colocados uns sobre os outros usando o z-index e o contexto de empilhamento.
Posicionamento da âncora
O posicionamento de âncora do CSS oferece uma maneira de posicionar declarativamente um elemento em relação a outro.
Pop-up e caixa de diálogo
Um popover é qualquer elemento com um atributo popover e é útil para uma ampla variedade de padrões interativos, incluindo dicas, alertas, notificações e muito mais.
Funções
O CSS tem uma variedade de funções integradas. Saiba mais sobre algumas das principais funções e como usá-las.
Trajetos, formas, recorte e mascaramento
Caminhos, formas, recorte e mascaramento dão aos desenvolvedores a capacidade de renderizar formas complexas em CSS usando várias funções que podem criar experiências memoráveis para os usuários.
Gradientes
Neste módulo, você vai descobrir como usar os vários tipos de gradientes disponíveis em CSS. Os gradientes podem criar vários efeitos úteis sem a necessidade de apps gráficos para criar imagens.
Animações
A 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 em CSS, é possível aplicar efeitos que você só achava possível em um aplicativo de gráficos. Neste módulo, você vai descobrir o que está disponível.
Modos de fusã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 mesclagem.
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 estilizar todas as partes de uma lista.
Contadores
O CSS oferece várias maneiras de controlar os contadores em uma lista para diferentes casos de uso. Neste módulo, você vai aprender a controlar os contadores em uma lista.
Transições
Aprenda a definir transições entre 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.
Transições de visualização para SPAs
As transições de visualização oferecem uma maneira de mostrar continuidade ou contexto entre as páginas no seu SPA.
Transbordamento
O estouro é como você lida com conteúdo que não cabe em um tamanho pai definido. Neste módulo, você vai pensar fora da caixa e aprender a estilizar conteúdo excedente.
Planos de fundo
Aprenda a estilizar os planos de fundo das caixas usando CSS.
Texto e tipografia
Saiba como estilizar texto na Web.
Consultas de contêiner
Ao contrário das consultas de mídia, as consultas de contêiner permitem fazer ajustes mais específicos aos elementos com base no tamanho e no estado dos ancestrais ou contêineres.
Conclusão e próximas etapas
Mais recursos para ajudar você nas próximas etapas.
Então, tudo pronto para aprender CSS? Vamos começar.