Guia de Referência

CSS


Nesse Guia de Referência 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

CSS (Cascading Style Sheets) é a linguagem oficial para estilização de páginas HTML. Com ela é possível definir todas as características relacionadas à aparência dos elementos presentes em uma página, customizando cores, formas, fontes, etc. Ademais, em conjunto com HTML e JavaScript, compõe a base para o desenvolvimento de aplicações web, o que reforça a sua importância. Vamos, então, aprender sobre CSS.

Você está ingressando na área da programação web? Se acenou positivamente, provavelmente esteja com algumas dúvidas que são bastante comuns nesse momento, como por onde começar ou o que aprender primeiro, não é mesmo? Acredite, também passamos por isso e pensando em lhe ajudar preparamos um DevCast que foca exatamente nesse assunto:

Agora que você já sabe da importância do HTML e do CSS no desenvolvimento web, é hora de aprender a estilizar suas páginas. Antes disso, no entanto, é importante saber exatamente o que é o CSS.

Neste momento você já sabe o que é o CSS e está se preparando para criar o primeiro exemplo. Surge então a dúvida: Qual ferramenta posso utilizar para programar com essa tecnologia? Para conhecer as principais opções, confira o DevCast a seguir:

Pronto! Com isso você está preparado para por as mãos na massa. Apenda como criar a primeira página com CSS e em seguida assista ao curso completo.

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

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.

Exemplo de flexbox
Figura 1. Flexbox

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:

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:

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

Ficou com alguma dúvida?