Introdução

docs.scrimba.com

Juno

Bem-vindo ao guia de CSS! Sou Juno, e esta é minha parte favorita da web para ensinar. HTML te dá a estrutura de uma página, e CSS é onde ela ganha vida: cor, espaçamento, tipo, toda a aparência da coisa.

Vamos começar desde a primeira linha de CSS e construir lentamente, uma ideia de cada vez. Se você consegue escrever um pouco de HTML, está pronto para tudo aqui.

Nada é nunca básico demais para perguntar, então vá no seu ritmo e chegaremos lá juntos!

Juno

Bem-vindo ao guia de CSS. Sou Ace, e gosto de manter as coisas práticas. Você já consegue estruturar uma página, então aqui focamos em transformar essa estrutura em um layout que você realmente entregaria.

Cada capítulo é o conceito, depois o que fazer com ele: leia, tente, construa. Layout é onde CSS deixa de parecer decoração e começa a parecer engenharia, e essa é a parte divertida.

Juno

Bem-vindo ao guia de CSS. Sou Sol, e tenho estilizado páginas tempo suficiente para ter cometido cada erro uma vez. Estes são os docs para pessoas que querem saber como CSS realmente resolve o que você escreve, não apenas qual propriedade move qual pixel.

Espere a cascata explicada corretamente, os casos extremos de layout e os detalhes de performance e acessibilidade que a maioria dos tutoriais pula. CSS parece indulgente, e o espaço entre estilos que renderizam e estilos que funcionam em todas as telas é onde o trabalho real vive. Leia atentamente e questione tudo, inclusive eu.

Este guia é para qualquer pessoa que consegue escrever um pouco de HTML e quer que suas páginas se pareçam com a forma como as imagina. CSS, que significa Cascading Style Sheets (Folhas de Estilo em Cascata), é a linguagem que descreve como uma página fica: suas cores, fontes, espaçamento e o arranjo de tudo na tela. HTML diz o que está na página; CSS diz como deve aparecer. Uma palavra rápida sobre dois termos que você verá por todo: uma propriedade é uma coisa que você pode estilizar, como color ou font-size, e um seletor é como você aponta CSS para os elementos que quer estilizar. Cada conceito aqui é escrito em sua totalidade, com profundidade, exemplos e algo para pesquisar sempre que precisar de uma resposta rápida.

Você não precisa de nenhum background em design para começar. Se consegue colocar um heading e um parágrafo em uma página, tem o suficiente para iniciar, e tudo o mais é introduzido conforme surge. CSS é a segunda linguagem que quase todo desenvolvedor web aprende, logo após HTML, porque uma página sem ela é nada além de texto sem estilo.

O guia funciona de baixo para cima. Você aprenderá como anexar estilos a uma página e direcionar os elementos certos, como o modelo de caixa controla espaçamento e tamanho, como trabalhar com cor e tipografia, e depois como fazer layout de uma página com flexbox e grid e torná-la responsiva a qualquer tela. Cada ideia é pequena por si mesma, e elas se juntam em interfaces que você realmente consegue entregar.

A abordagem aqui é explicar o que cada peça de CSS faz e por quê, não apenas o que digitar. Qualquer pessoa pode colar uma propriedade de um exemplo e ver algo mudar na tela. A distância entre isso e construir layouts que se adaptam, mantêm a legibilidade e são baratos de mudar é entender como o navegador decide o que seus estilos significam quando se sobrepõem. Esse entendimento é o que perdura além de qualquer projeto isolado.

JunoCSS recompensa experiências Aqui tem uma coisa legal sobre CSS: você vê o resultado no instante em que muda algo. Ajuste uma cor, mude um pouco o espaçamento, e a página atualiza na sua frente. Esse feedback rápido torna isso uma das melhores partes da web para aprender experimentando, então tente coisas enquanto lê.

JunoCSS recompensa experiências CSS te oferece um feedback loop rápido: mude um valor, veja renderizar, ajuste. Confie nisso. A forma mais rápida de desenvolver um sentimento real para layout é abrir as ferramentas do navegador, mudar propriedades em tempo real e observar o que se move. Tudo neste guia foi feito para ser testado, não apenas lido.

JunoCSS recompensa experiências O feedback loop é a melhor ferramenta de ensino do CSS, então use as ferramentas de dev do navegador como um laboratório: inspecione o modelo de caixa, alterne declarações, observe a cascata escolher um vencedor em tempo real. Ler sobre especificidade é uma coisa; observar uma regra perder para outra no painel de estilos é o que faz isso ficar na memória.

Conheça seus guias

Este guia é hospedado por três guias, e você escolhe qual deles mostra você ao redor. O material é o mesmo para todos; seu guia define a voz em que é contado, e nas páginas que se adaptam, quão profundo cada seção vai.

• Juno ensina a trilha iniciante: quente e paciente, analogias simples, nada assumido.
• Ace ensina a trilha intermediária: prática e build-first, direto ao que você realmente faz.
• Sol ensina o Deep Dive: o mecanismo, as compensações e os detalhes de produção que todos os outros pulam.

Mude de guia a qualquer hora do 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 pronto, o guia começa a sério. O próximo capítulo, O que é CSS, cobre o que CSS realmente é, como ele se associa com HTML, e o pequeno vocabulário de regras, seletores e propriedades a partir do qual todo o resto da trilha é construído.

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