Introdução ao CSS

Juno

Bem-vindo ao manual de CSS! Eu sou o Juno, e essa é a parte da web que eu mais gosto de ensinar. O HTML te dá a estrutura de uma página, e é no CSS que ela ganha vida: cor, espaçamento, tipografia, toda a aparência da coisa.

Vamos começar pela primeira linha de CSS e ir construindo devagar, uma ideia por vez. Se você consegue escrever um pouco de HTML, você já está pronto para tudo o que vem por aqui.

Nenhuma pergunta é básica demais para ser feita, então vá no seu ritmo e chegaremos lá juntos!

Juno

Bem-vindo ao manual de CSS. Eu sou o Ace, e gosto de manter as coisas práticas. Você já consegue estruturar uma página, então aqui vamos focar em transformar essa estrutura em um layout que você realmente colocaria no ar.

Cada capítulo segue a mesma lógica: primeiro o conceito, depois o que fazer com ele: ler, testar, construir. É no layout que o CSS deixa de parecer decoração e passa a parecer engenharia, e é aí que a coisa fica divertida.

Juno

Bem-vindo ao manual de CSS. Eu sou o Sol, e já estilizei páginas por tempo suficiente para ter cometido cada erro possível pelo menos uma vez. Este material é para quem quer entender como o CSS realmente resolve o que você escreve, e não só qual propriedade empurra qual pixel.

Espere uma explicação de verdade sobre a cascade, os casos extremos de layout, e os detalhes de performance e acessibilidade que a maioria dos tutoriais deixa de lado. O CSS parece tolerante, e é justamente na diferença entre estilos que renderizam e estilos que se sustentam em qualquer tela que está o trabalho de verdade. Leia com atenção e questione tudo, inclusive o que eu digo.

Este manual é para qualquer pessoa que já sabe escrever um pouco de HTML e quer que suas páginas tenham a aparência que ela imagina. O CSS, sigla para Cascading Style Sheets, é a linguagem que descreve a aparência de uma página: suas cores, fontes, espaçamentos, e como tudo se organiza na tela. O HTML diz o que existe na página; o CSS diz como isso deve aparecer. Uma palavra rápida sobre dois termos que você vai ver o tempo todo por aqui: uma property (propriedade) é uma coisa que você pode estilizar, como color ou font-size, e um selector (seletor) é a forma de apontar o CSS para os elementos que você quer estilizar. Cada conceito aqui é explicado por completo, com profundidade, exemplos e algo para consultar sempre que você precisar de uma resposta rápida.

Você não precisa de nenhuma experiência com design para começar. Se você consegue colocar um título e um parágrafo em uma página, já tem o suficiente para começar, e tudo o mais é apresentado conforme surge a necessidade. O CSS é a segunda linguagem que quase todo desenvolvedor web aprende, logo depois do HTML, porque uma página sem ele nada mais é do que texto sem estilo.

O manual segue do básico ao avançado. Você vai aprender a ligar estilos a uma página e direcioná-los para os elementos certos, como o modelo de caixa controla espaçamento e tamanho, como trabalhar com cor e tipografia, e depois como organizar uma página com flexbox e grid e fazer com que ela se adapte a qualquer tela. Cada ideia é pequena por si só, e juntas elas formam interfaces que você realmente pode colocar no ar.

A abordagem aqui é explicar o que cada parte do CSS faz e por quê, não só o que digitar. Qualquer pessoa consegue copiar uma propriedade de um exemplo e ver algo mudar na tela. A distância entre isso e construir layouts que se adaptam, continuam legíveis e são baratos de alterar está em entender como o navegador decide o que os seus estilos significam quando eles se sobrepõem. Esse entendimento é o que permanece além de qualquer projeto específico.

JunoO CSS recompensa quem gosta de experimentar Aqui vai uma coisa ótima sobre CSS: você vê o resultado no instante em que muda algo. Ajuste uma cor, mova um espaçamento, e a página se atualiza na sua frente. Esse retorno rápido faz dele uma das melhores partes da web para aprender experimentando, então tente coisas enquanto lê.

JunoO CSS recompensa quem gosta de experimentar O CSS te dá um ciclo de feedback bem rápido: você muda um valor, vê o resultado renderizado, ajusta de novo. Aproveite isso. A forma mais rápida de desenvolver uma sensibilidade real para layout é abrir as ferramentas do navegador, mudar propriedades em tempo real e observar o que se move. Tudo neste manual foi feito para ser testado, não só lido.

JunoO CSS recompensa quem gosta de experimentar O ciclo de feedback é a melhor ferramenta de ensino do CSS, então use as dev tools do navegador como um laboratório: inspecione o modelo de caixa, ative e desative declarações, observe a cascade escolhendo uma vencedora em tempo real. Ler sobre especificidade é uma coisa; ver uma regra perder para outra no painel de estilos é o que faz o conceito ficar de verdade na sua cabeça.

Conheça seus guias

Este manual é apresentado por três guias, e você escolhe qual deles vai te acompanhar. O conteúdo é o mesmo para todo mundo; o que muda com o guia é o tom em que ele é contado, e, nas páginas que se adaptam, o quanto cada seção se aprofunda.

Troque de guia quando quiser pelo seletor no topo de qualquer página, ou abra Preferências no canto inferior direito para mudar seu guia, idioma ou tamanho da fonte.

Quando estiver tudo certo, o manual começa de verdade. O próximo capítulo, O que é CSS, cobre o que o CSS realmente é, como ele se combina com o HTML, e o pequeno vocabulário de regras, seletores e propriedades sobre o qual todo o resto da trilha é construído.

Prefere aprender construindo?O curso gratuito de HTML e CSS da Scrimba cobre o mesmo conteúdo através de cinco projetos e mais de 75 desafios interativos.→