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.

Quer ter acesso a todos os cursos desse Guia?

Mais conte�dos de CSS

Exerc�cios

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.

Curso

O que � CSS?

Tais propriedades dos elementos, bem como os seus valores, s�o escritas em regras, assunto do artigo abaixo:

Artigo

Introdu��o pr�tica ao CSS

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.

Artigo

CSS: Seletores

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.

Artigo

Aplicando estilos a elementos de textoNovo!

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!

Exerc�cios

Carreira Front-end: CSS

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:

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 :)

Guia

Front-end web na pr�tica

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:

Documenta��o

Flexbox

J� no curso e exemplos abaixo voc� ver� algumas possibilidades pr�ticas de uso do flexbox na constru��o de layouts responsivos:

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:

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:

Curso

O que � LESS?

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:

Guia de consulta

Front-end Web na pr�tica Guia

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: