Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login

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.

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (4)  (0)

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.

Introdução

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. Em seguida é só assistir o 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. Nos links 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 dois Guias de Referência sobre os principais frameworks atualmente:

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Ajude-nos a evoluir: você gostou do post?  (4)  (0)

Para avaliar você precisa ser um assinante MVP :)

Ficou com alguma dúvida?