Quer ter acesso a todos os cursos desse Guia?
Guia Completo de CSS
Nesse Guia de Consulta você encontrará o conteúdo que precisa para iniciar seus estudos em CSS, recurso fundamental para a construção de páginas web.
Introdução
Chegando agora na programação web? Sem problema! Assista ao vídeo abaixo e tire as suas primeiras dúvidas.
CSS é a linguagem que cuida da aparência de uma página web.
- Não é uma linguagem de programação
- É aplicado ao HTML
- Usa regras e propriedades para customizar elementos
Assista ao curso abaixo onde falamos sobre essas e outras características em detalhes.

Ver grade completa
Tais propriedades dos elementos, bem como os seus valores, são escritas em regras, assunto do artigo abaixo:
Uma regra é conectada com um elemento a partir de um seletor. No artigo abaixo falamos sobre os seletores de elemento, classe e id, que são os mais utilizados.
Pronto para avançar? Ótimo!
No próximo conteúdo conheceremos algumas das propriedades dos elementos de texto e com isso vamos praticar o que aprendemos até aqui.
Hora de se certificar! 🎉🎉🎉
Vamos certificar o que aprendemos até aqui? Siga em frente e resolva alguns exercícios selecionados para você e consiga o seu primeiro certificado!

Praticando
Para dominar o CSS é preciso praticar. Somente dessa forma, estilizando páginas, testando suas funcionalidades você se sentirá “confortável” com essa linguagem e preparado para avançar nos estudos. Para lhe ajudar nessa etapa separamos alguns conteúdos:
Artigos:
-
ArtigoAplicando estilos a elementos de textoNovo!
Ver introdução
Quer ter acesso completo a todos os conteúdos?Saiba mais -
ArtigoComo centralizar divs em HTML e CSS
Ver introdução
free -
ArtigoCSS: como criar elementos arredondados
Ver introdução
free -
ArtigoComo criar um slider com CSS e HTML
Ver introdução
free -
ArtigoInterface Metro: Criando um Menu Metro com HTML e CSS
Ver introdução
free
Cursos:
Quer ver mais exemplos práticos envolvendo CSS? Então não deixe de acessar o Guia Cenários Práticos Front-end no link abaixo :)

Flexbox
Flexbox é um recurso do CSS3 que permite organizar elementos dentro de um container de forma eficiente, mesmo que suas dimensões variem, como na Figura 1.

Atualmente o Flexbox é extremamente importante para implementar a responsividade em páginas web, portanto saber utilizá-lo é fundamental para o programador front-end atualmente. No link abaixo você verá uma introdução a esse recurso e conhecerá as propriedades do CSS envolvidas no seu uso:

Já no curso e exemplos abaixo você verá algumas possibilidades práticas de uso do flexbox na construção de layouts responsivos:
-
ProjetoMenu com Flex-GrowQuer ter acesso completo a todos os conteúdos?Saiba mais
-
ProjetoComo criar uma tela de login com Flexbox e Media QueriesQuer ter acesso completo a todos os conteúdos?Saiba mais
-
CursoConteúdo adaptável com CSS Flex
Ver grade completa
Quer ter acesso completo a todos os conteúdos?Saiba mais -
ProjetoComo centralizar divs com display flexQuer ter acesso completo a todos os conteúdos?Saiba mais
Media Queries
As media queries são regras do CSS que nos permitem aplicar determinadas formatações apenas em condições específicas. Por exemplo, por meio delas podemos aplicar certos estilos somente quando a página for acessada através de um dispositivo com certas dimensões mínimas ou máximas, bem como quando a página for visualizada em modo impressão.
Esse recurso é também amplamente empregado para obter a característica de responsividade nas páginas, fazendo com que elas se comportem adequadamente em dispositivos com diferentes dimensões. Para isso, normalmente verificamos a largura do dispositivo e aplicamos em cada situação estilos específicos para dar ao conteúdo a melhor apresentação.
Para aprender a usar as media queries você pode consultar o seguinte conteúdo:
Em seguida, nos exemplos abaixo você poderá ver situações práticas de uso das media queries:
Documentação
Nesta seção você encontrará conteúdos criados com o intuito de documentar os recursos do CSS, apresentando o que é e a aplicabilidade de cada recurso juntamente com um exemplo prático. Utilize esse material para consulta rápida:
-
Documentaçãobackground
Ver introdução
free -
Documentaçãoborder
Ver introdução
free -
Documentaçãoborder-radius
Ver introdução
free -
Documentaçãobox-sizing
Ver introdução
free -
Documentaçãocolors
Ver introdução
free -
DocumentaçãoFlexbox
Ver introdução
free -
Documentação@font-face
Ver introdução
free -
DocumentaçãoMedia Queries
Ver introdução
free -
Documentaçãoposition
Ver introdução
free -
Documentaçãoopacity
Ver introdução
free -
DocumentaçãoSeletores
Ver introdução
free -
Documentaçãotext-shadow e box-shadow
Ver introdução
free -
DocumentaçãoPseudo-elementos
Ver introdução
free -
DocumentaçãoCSS CompletoQuer ter acesso completo a todos os conteúdos?Saiba mais
Pré-processadores
Pré-processadores são ferramentas cujo objetivo é otimizar a escrita de folhas de estilo. Eles oferecem uma sintaxe mais robusta, com recursos que não estão presentes no CSS, e que auxiliam na construção de front-ends. No curso abaixo você conhecerá o LESS, um dos principais pré-processadores de CSS do mercado:

Ver grade completa
Conteúdo Extra
Aqui separamos um conteúdo adicional para que você possa aprofundar seus estudos no CSS:
Próximos passos
Desenvolvimento web é uma área ampla e que requer o conhecimento de várias tecnologias, mas no que diz respeito ao front-end, três são fundamentais: HTML, CSS e JavaScript.
Caso queira rever os conceitos de HTML, sua estrutura, tags, etc., sugerimos que acesse o Guia de Referência HTML. Se, por outro lado, preferir avançar no estudo de outras linguagens para o front-end, a dica é acessar o Guia de Referência JavaScript:
E se quiser colocar em prática tudo que aprendeu de HTML, CSS e JavaScript, uma boa ideia é ver o Guia que traz Cenários Práticos de Front-End:

Por fim, com uma boa noção de CSS e já tendo visto JavaScript, um interessante próximo passo é conhecer alguns frameworks que podem facilitar seu trabalho, por já oferecerem componentes e formatações amplamente utilizados no nosso dia a dia. A seguir separamos o Guia de Referência sobre o principal framework atualmente:

Além disso, a DevMedia publica com frequência novos conteúdos sobre front-end, os quais você pode conferir nos Guias de Consulta abaixo:
E você pode conferir todo o conteúdo de Front-end clicando aqui.
<Perguntas frequentes>