Série

CSS: da Sintaxe ao Flexbox

DevCast: CSS

CSS é um item que não pode faltar na caixa de ferramentas de um programador web, pois é com ela que descrevemos para o navegador como os elementos em uma página serão apresentados para o usuário. Abrindo esta série, no DevCast dessa semana, conversamos sobre a necessidade de aprender essa linguagem nos dias atuais e a importância de não deixá-la de lado em seus estudos. Confira!

Aprenda CSS: Da Sintaxe ao Flexbox

Curso

O que é CSS?

Neste curso vamos conhecer o CSS (Cascading Style Sheets - ou Folhas de Estilos em Cascatas), uma linguagem declarativa, amplamente usada na programação web, e que tem como objetivo definir a formatação visual de documentos estruturados, como HTML.

2 Aulas

Suporte

999 programadores já iniciaram esse curso

Acessar o Curso

Curso

Introdução ao CSS na prática

CSS forma, juntamente com HTML e JavaScript, os fundamentos da programação web. Com ele descrevemos para o navegador como uma página deve ser apresentada para o usuário. Neste contexto, o CSS coloca à nossa disposição um vasto conjunto de propriedades capazes de alterar as características visuais dos elementos em um documento HTML. Cada uma dessas propriedades possui um conjunto aplicável de valores, o que torna o CSS uma linguagem de declaração de estilos rica e poderosa. Neste curso veremos como utilizar essas propriedades para estilizar uma página na prática, enquanto conhecemos os rudimentos desta linguagem.

17 Aulas

Suporte

609 programadores já iniciaram esse curso

Acessar o Curso

Curso

Como criar sua primeira página com CSS

Neste curso usaremos a linguagem CSS para customizar a aparência de uma página HTML. Para isso, usaremos um documento HTML separado em áreas, sendo elas cabeçalho, bloco de conteúdo principal e um rodapé. Veremos passo a passo como selecionar parágrafos, títulos, listas, dentre outros elementos presentes neste documento, para gradualmente, através das propriedades disponibilizadas pelo CSS chegarmos a aparência desejada para a página.

6 Aulas

Suporte

749 programadores já iniciaram esse curso

Acessar o Curso

Curso

Criando uma estrutura Front-end de navegação

Neste curso criamos uma estrutura de um layout onde abordamos três características: a responsividade sem a utilização de frameworks como o bootstrap; um menu expandable; e também veremos uma barra lateral com scroll independente do conteúdo do site.

7 Aulas

Suporte

1624 programadores já iniciaram esse curso

Acessar o Curso

Curso

Curso de Pseudo classes do CSS

Nesse curso aprenderemos a aplicar estilo baseado no estado do elemento com as pseudo classes do CSS. Veremos como aplicar o efeito de zebrado em uma tabela, assim como selecionar o primeiro elemento em um parent, aplicar estilo quando um input estiver desabilitado ou for de preenchimento obrigatório e realizar seleções mais complexas com o parâmetro das pseudo classes nth-.

5 Aulas

Suporte

670 programadores já iniciaram esse curso

Acessar o Curso

Curso

Conteúdo adaptável com CSS Flex

Neste curso front-end veremos como criar uma página onde a altura dos boxes se ajusta, assim o layout da página não quebra devido ao tamanho do seu conteúdo, usando a propriedade Flex do CSS. Confira!

4 Aulas

Suporte

166 programadores já iniciaram esse curso

Acessar o Curso

CSS: Download dos projetos completos

306

programadores já acessaram esses projetos

Projeto

Como criar sua primeira página com CSS

Documentação

Ver projeto

Projeto

Criando uma estrutura Front-end de navegação

Documentação

Ver projeto

Projeto

Pseudo classes do CSS

Documentação

Ver projeto

Projeto

Conteúdo adaptável com CSS Flex

Documentação

Ver projeto

Projeto

Introdução ao CSS na prática

Documentação

Ver projeto

Certificado

É hora de contar pra todo mundo que você agora é fera no CSS! Clique no botão abaixo e gere os seus certificados para os cursos que assistiu acima.

Gerar certificado

CSS: Dúvidas Frequentes e Suporte

Confira abaixo algumas respostas para perguntas comuns sobre o CSS.

Qual framework CSS eu devo usar?

Desenvolver o front-end de uma aplicação pode levar dias, dependendo das funcionalidades que deverão ser implementadas. Pensando em como tornar esse processo mais ágil e barato, muitas empresas têm adotado soluções prontas no front-end de suas aplicações, a exemplo do Materialize, Bootstrap e Foundation.

Geralmente esses frameworks tem funcionalidades similares e acaba sendo uma questão de familiaridade optar por um ou outro. Contudo, o Bootstrap tem se destacado ao longo dos anos por ser mais completo que os demais, fornecendo, além do design, um conjunto de plugins compatíveis com a jQuery que podem ser utilizados para atender a necessidades comuns de projetos de software como slideshows, tooltips, menus sandwich, entre outros.
O que é CSS Grid?

CSS Grid permite ao desenvolvedor organizar o conteúdo de uma página de forma semelhante a que fazemos com tabelas, mas com linhas e colunas abstratas que podem se sobrepor ou serem dispostas em camadas. Assim como no Flexbox, quando trabalhamos com CSS Grid temos um conjunto de propriedades que, quando combinadas, permitem chegar ao estilo desejado.

Um bom exemplo do uso do sistema de grid é o do framework Bootstrap que, apesar de não utilizar essa tecnologia no momento em que esse texto foi escrito, já trazia em seu modo de organizar os elementos uma forma de trabalho muito próxima.

Por exemplo, no Bootstrap podemos utilizar uma classe como col-md-6 para definir que uma coluna deve ocupar o lugar de seis. Geralmente, nesse sistema a página é dividida em doze colunas virtuais totais. No CSS Grid, essa declaração pode ser feita com a propriedade grid-column e com o valor span 6.
Como eu posso validar o meu CSS?

Quando escrito de forma incorreta o CSS pode apresentar erros difíceis de serem rastreados, por serem visíveis em apenas alguns navegadores. Atualmente, existem diversos IDEs criados especialmente para criação de código front-end que podem validar folhas de estilo durante a sua escrita. Mesmo quando utilizamos editores de texto, podemos usar ferramentas como o CSSLint, uma interface de linha de comando que procura por problemas no código CSS.

A W3C, consórcio que mantém o CSS, disponibiliza em um de seus sites um serviço desenvolvido para a leitura e validação de arquivos CSS. Para acessá-lo você pode ir até o site https://jigsaw.w3.org/css-validator/, informar endereço da sua página ou enviar sua folha de estilo para análise.