Imagem do Curso gratuito CSS

Curso online gratuitoCSS

Duração do curso online: 6 horas e 1 minutos

4.78

EstrelaEstrelaEstrelaEstrelaEstrela

(27)

Domine CSS e transforme layouts em interfaces profissionais. Curso online gratuito, com exercícios e certificado para turbinar seu portfólio front-end.

Neste curso gratuito, aprenda sobre

  • O que é CSS e como ele estiliza documentos HTML
  • Sintaxe de regras CSS: seletores, propriedades e valores
  • Formas de uso do CSS: inline, incorporado (style) e externo (arquivo .css)
  • Seletores simples: tag, classe, id, universal e atributos
  • Seletores compostos: descendente, filho, adjacente e irmãos gerais
  • Pseudo-classes e pseudo-elementos, incluindo :lang() e estados de links
  • Cascata, especificidade, ordem de prioridade e herança no CSS
  • Box model: content, padding, border e margin; como calcular tamanhos
  • Unidades absolutas e relativas (px, em, %, etc.) e quando usar cada uma
  • Tipografia e texto: font-family, espaçamentos, alinhamento e decoração
  • Backgrounds: cor, imagem, repetição e posicionamento do fundo
  • Estilização de listas, cabeçalhos e links (incluindo remover borda de imagem-link)
  • Layouts e posicionamento: fluxo normal, float, absoluto e z-index
  • Construção de menus (CSS/jQuery), dropdown, sprites e efeitos CSS3 + validação

Descrição do curso

CSS é a linguagem que dá forma, cor e personalidade às páginas da web. Se você já sabe um pouco de HTML e quer sair do “site cru” para criar interfaces agradáveis, consistentes e fáceis de manter, este curso online gratuito de CSS é o próximo passo. Aqui você aprende a estilizar elementos com segurança, entender por que uma regra funciona (ou não) e ganhar repertório para construir páginas modernas com mais controle visual e menos tentativa e erro.

Ao longo das aulas, você vai entender a lógica da sintaxe do CSS, como escolher a melhor forma de aplicar estilos (inline, incorporado ou arquivo externo) e, principalmente, como escrever seletores eficientes para atingir exatamente os elementos certos. O curso explora desde seletores simples e compostos até pseudo-classes e pseudo-elementos, abrindo caminho para efeitos e estados comuns do dia a dia, como interações em links, variações por idioma e ajustes finos sem alterar o HTML.

Um ponto-chave para evoluir rápido é dominar o efeito cascata e a herança. Você vai aprender a prever prioridades entre estilos, reduzir conflitos e organizar seu código com clareza. Também aprofunda no Box Model, que é a base para dimensionar elementos, controlar espaçamentos, bordas e comportamento do layout. Isso se conecta ao uso correto de medidas absolutas e relativas, permitindo que você escolha unidades adequadas para tipografia, espaçamento e responsividade.

O curso ainda trabalha estilos de texto e fontes para melhorar legibilidade e hierarquia visual, além de propriedades de background para compor fundos com cor e imagens. Na prática, você desenvolve a capacidade de estilizar cabeçalhos, links e listas com acabamento profissional, cuidando de detalhes que fazem diferença na experiência do usuário.

Na parte de layout e posicionamento, você entende o fluxo normal dos elementos e quando usar float, posicionamento absoluto e z-index para controlar sobreposição. A formação segue para a construção de layouts tableless com duas e três colunas, criação de menus apenas com CSS e conceitos que ajudam a estruturar melhor o HTML para facilitar a manutenção do visual. Você também conhece técnicas úteis como CSS Sprite, bordas arredondadas e sombreamento com CSS3, e aprende a validar seu CSS para identificar problemas e garantir compatibilidade.

Com exercícios ao longo do caminho, este curso é indicado para quem quer começar no Front-End, melhorar um portfólio ou ganhar mais autonomia ao criar páginas e interfaces. Ao final, você terá uma base sólida para estilizar sites do zero e evoluir para temas como responsividade, frameworks e design systems com muito mais confiança.

Conteúdo do curso

  • Aula em vídeo: Universidade XTI - CSS - 01 - Introdução 10m
  • Exercício: _O que é CSS?
  • Aula em vídeo: Universidade XTI - CSS - 02 - Sintaxe 14m
  • Exercício: Qual é a função do seletor em uma regra CSS?
  • Aula em vídeo: Universidade XTI - CSS - 03 - Utilização Inline, Incorporado e Externo 14m
  • Exercício: _Qual é a vantagem de utilizar o estilo incorporado em relação ao estilo online?
  • Aula em vídeo: Universidade XTI - CSS - 04 - Seletores Simples - Parte1 12m
  • Exercício: Quais são os cinco tipos de seletores simples mencionados na aula sobre CSS?
  • Aula em vídeo: Universidade XTI - CSS - 05 - Seletores Simples - Parte2 05m
  • Exercício: Qual seletor CSS é usado para elementos com um atributo específico?
  • Aula em vídeo: Universidade XTI - CSS - 06 - Seletores Compostos 08m
  • Exercício: Quais são os tipos de seletores compostos discutidos na aula?
  • Aula em vídeo: Universidade XTI - CSS - 07 - Pseudo Seletores - Parte1 09m
  • Exercício: _O que são pseudo-elementos e pseudo-classes em CSS?
  • Aula em vídeo: Universidade XTI - CSS - 08 - Pseudo Seletores - Parte2 07m
  • Exercício: _Qual é a função do pseudo-classe Lang em CSS?
  • Aula em vídeo: Universidade XTI - CSS - 09 - Efeito Cascata e Herança 14m
  • Exercício: Qual é a ordem de importância das folhas de estilo no CSS, segundo o efeito cascata?
  • Aula em vídeo: Universidade XTI - CSS - 10 - BoxModel - Parte1 12m
  • Exercício: _O que é o box model no CSS?
  • Aula em vídeo: Universidade XTI - CSS - 11 - BoxModel - Parte2 08m
  • Exercício: Quais são os três atributos essenciais para definir a borda de um elemento no CSS?
  • Aula em vídeo: Universidade XTI - CSS - 12 - Medidas Absolutas e Relativas 11m
  • Exercício: _Quais são os três tipos de medidas lineares no CSS?
  • Aula em vídeo: Universidade XTI - CSS - 13 - Textos Fontes 14m
  • Exercício: Qual é a finalidade da propriedade CSS 'font-family'?
  • Aula em vídeo: Universidade XTI - CSS - 14 - Textos Espaçamento e Alinhamento 09m
  • Exercício: _Qual é a propriedade que controla o espaçamento entre as letras de um texto em CSS?
  • Aula em vídeo: Universidade XTI - CSS - 15 - Textos Decoração 04m
  • Exercício: Quais são as funções da propriedade CSS 'text-decoration'?
  • Aula em vídeo: Universidade XTI - CSS - 16 - Background - Parte1 14m
  • Exercício: _Qual é a propriedade utilizada para adicionar cor de fundo a um elemento no CSS?
  • Aula em vídeo: Universidade XTI - CSS - 17 - Background - Parte2 03m
  • Exercício: Quais são as quatro propriedades do CSS que podem ser usadas para configurar o fundo de um elemento?
  • Aula em vídeo: Universidade XTI - CSS - 18 - Estilização de Cabeçalhos 06m
  • Exercício: _Qual é a propriedade utilizada para colocar uma borda acima do cabeçalho?
  • Aula em vídeo: Universidade XTI - CSS - 19 - Estilização de Links - Parte1 14m
  • Exercício: Quais são as quatro pseudo-classes de links mencionadas na aula de CSS?
  • Aula em vídeo: Universidade XTI - CSS - 20 - Estilização de Links - Parte2 02m
  • Exercício: _Como podemos remover a borda de uma imagem que está dentro de um link usando CSS?
  • Aula em vídeo: Universidade XTI - CSS - 21 - Estilização de Listas 10m
  • Exercício: Qual é a forma correta de estilizar listas em páginas web?
  • Aula em vídeo: Universidade XTI - CSS - 22 - Menu DropDown com jQuery Parte1 14m
  • Exercício: _Qual é a tag utilizada como container do menu na construção de drop-down em CSS?
  • Aula em vídeo: Universidade XTI - CSS - 23 - Menu DropDown com jQuery - Parte2 12m
  • Exercício: Qual é a principal função da biblioteca JavaScript mencionada na explicação?
  • Aula em vídeo: Universidade XTI - CSS - 24 - Posicionamento Fluxo Normal 11m
  • Exercício: _Qual é o fluxo normal de posicionamento dos elementos em uma página HTML?
  • Aula em vídeo: Universidade XTI - CSS - 25 - Posicionamento Float 14m
  • Exercício: Como o esquema de posicionamento 'float' altera a distribuição dos elementos em um documento HTML?
  • Aula em vídeo: Universidade XTI - CSS - 26 - Posicionamento Absoluto 10m
  • Exercício: _O que acontece quando um elemento é posicionado com esquema de fluxo absoluto?
  • Aula em vídeo: Universidade XTI - CSS - 27 - Posicionamento Z Index 08m
  • Exercício: Qual a função principal da propriedade z-index no CSS?
  • Aula em vídeo: Universidade XTI - CSS - 28 - Layout Introdução Tableless - Parte1 13m
  • Exercício: _Qual é a importância de nomear bem as estruturas no HTML na hora de trabalhar com layout em CSS?
  • Aula em vídeo: Universidade XTI - CSS - 29 - Layout Introdução Tableless - Parte2 07m
  • Exercício: Quais são as desvantagens do layout com largura líquida?
  • Aula em vídeo: Universidade XTI - CSS - 30 - Layout com 2 Colunas 10m
  • Exercício: _Qual é o próximo passo para construir um layout de duas colunas após definir o cabeçalho e o rodapé?
  • Aula em vídeo: Universidade XTI - CSS - 31 - Layout com 3 Colunas 11m
  • Exercício: Como estruturar um layout de três colunas em HTML?
  • Aula em vídeo: Universidade XTI - CSS - 32 - Menu só com CSS 03m
  • Exercício: _Qual é a propriedade CSS utilizada para esconder os submenus do menu principal?
  • Aula em vídeo: Universidade XTI - CSS - 33 - CSS Sprite 10m
  • Exercício: Qual é a principal vantagem do uso da técnica CSS Sprite em páginas HTML?
  • Aula em vídeo: Universidade XTI - CSS - 34 - Bordas Arredondadas e Sombreamento CSS 3 06m
  • Exercício: _Qual é a propriedade utilizada para definir o arredondamento de bordas em um elemento HTML utilizando CSS na versão 3?
  • Aula em vídeo: Universidade XTI - CSS - 35 - Última Aula 04m
  • Exercício: Qual é uma função do validador de CSS mencionado na aula?

Este curso gratuito inclui:

6 horas e 1 minutos de curso online em vídeo

Certificado digital de conclusão de curso ( Gratuito )

Exercícios para treinar seus conhecimentos

100% gratuito, do conteúdo ao certificado

Pronto para começar?Baixe o app e comece hoje mesmo.

Instale o app agora

para ter acesso ao curso
Ícone representando cursos de tecnologia e negócios

+ de 5.000 cursos gratuitos

Programação, Inglês, Marketing Digital e muito mais! Aprenda o que quiser, gratuitamente.

Ícone de calendário com alvo representando planejamento de estudos

Plano de estudos com IA

A Inteligência Artificial do nosso aplicativo pode criar um cronograma de estudos para o curso que você escolher.

Ícone de profissional representando carreira e negócios

Do zero ao Sucesso profissional

Melhore seu currículo com nosso Certificado gratuito e depois utilize nossa Inteligência Artificial para buscar seu emprego dos sonhos.

Você também pode utilizar o QR Code ou os Links abaixo

QR Code - Baixar Cursa - Cursos Online

Comentários do Curso: CSS

MO

Marcos Oliveira

EstrelaEstrelaEstrelaEstrelaEstrela

Gostei muito do curso bastante explicativo e didatico

Mais cursos gratuitos em Programação Front-End

Ebook + Áudiobooks gratuitos! Aprenda ouvindo ou lendo!

Baixe o Aplicativo agora para ter acesso a + de 5000 cursos gratuitos, exercícios, certificado e muito conteúdo sem pagar nada!

  • Cursos online 100% gratuitos do início ao fim

    Milhares de cursos online em vídeo, ebooks e áudiobooks.

  • Mais de 60 mil exercícios gratuitos

    Para testar seus conhecimentos no decorrer dos cursos online

  • Certificado Digital gratuito válido em todo o Brasil

    Gerado diretamente na galeria de fotos do seu celular e enviado ao seu e-mail

Aplicativo Cursa na tela de ebook, na tela de curso em vídeo e na tela de exercícios do curso, mais o certificado de conclusão de curso