Seletores e propriedades
Se você terminou o curso de HTML, sua página está estruturalmente correta, mas visualmente crua. É exatamente esse problema que o CSS resolve.
Estudar esta lição interativa →Se você fez o curso de HTML: a estrutura de tudo, chegou até aqui com uma página de perfil completa, semântica e acessível, só que com uma aparência bem simples: sem cores de marca, sem espaçamento pensado, sem tipografia refinada. Este curso parte exatamente daí. CSS (Cascading Style Sheets, "folhas de estilo em cascata") é a linguagem que diz como cada elemento deve aparecer: que cor, que tamanho, que espaçamento, que posição.
Se o HTML é a planta de uma casa (onde fica a sala, onde fica o quarto), o CSS é a decoração: a cor da parede, o tipo de piso, o estofado do sofá. A planta continua a mesma, mas a decoração transforma completamente a experiência de estar naquele espaço. Você pode pintar a mesma sala de cores diferentes sem mexer numa parede sequer, é exatamente essa a relação entre HTML e CSS.
Uma regra de CSS tem duas partes: um seletor (o que você quer estilizar, como .card ou h2) e uma declaração entre chaves, com pares de propriedade: valor (o que mudar, como color: red;). Veja isso rodando ao vivo, HTML e CSS juntos, exatamente como vai ser durante todo este curso:
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. O seletor .card mira a div com class="card"; cada propriedade dentro das chaves muda um aspecto visual dela.
Um exemplo de produto real: o botão "Comprar" de qualquer loja on-line tem uma cor de fundo chamativa (geralmente a cor de marca), texto legível por cima e cantos arredondados, tudo isso é CSS puro, decidido por regras exatamente como as que você acabou de ver, só que aplicadas a uma tag <button> em vez de uma <div>.
Esquecer o ponto e vírgula no fim de uma declaração (color: red sem ;) costuma passar despercebido quando é a última propriedade das chaves, mas dá problema se você adicionar outra logo depois sem separá-las: o navegador lê red background: blue como um valor só, que não faz sentido, e descarta as duas declarações coladas (o restante da regra continua valendo). Adote o hábito de sempre fechar com ;, mesmo na última linha.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Edite as propriedades dentro de .card e clique em Rodar.