Pré-requisitos

• Ultimate HTML

Nota

Se você é novo em desenvolvimento web e ainda não explorou HTML, recomendamos começar pelo HTML. O HTML é a base para o CSS, e ter uma compreensão sólida de HTML irá aprimorar sua experiência com CSS.

Bem-vindo ao Mundo do Design para Web

CSS (Cascading Style Sheets) é uma ferramenta poderosa que transforma páginas web comuns em experiências visualmente impressionantes e fáceis de usar. Atuando como a "varinha mágica" do design para web, CSS define como o conteúdo criado com HTML aparece na tela, adicionando estilo, cor e estética para destacar seus projetos.

O que é CSS?

CSS, abreviação de Cascading Style Sheets (Folhas de Estilo em Cascata), é uma linguagem de estilização utilizada para definir a apresentação de documentos em HTML (Hypertext Markup Language). Mas o que isso significa?

Pense no HTML como a fundação de uma casa – ele fornece a estrutura e o layout essenciais para sua página web. Agora, imagine o CSS como o designer de interiores dessa casa. Ele é responsável por adicionar estilos, cores e estética à estrutura, tornando-a convidativa e visualmente atraente.

Veja esta ilustração:

À esquerda, observa-se o HTML puro fornecendo a estrutura básica. À direita, o mesmo HTML ganha vida com o CSS, demonstrando seu poder de estilização.

Compreendendo a Sintaxe do CSS

CSS pode parecer inicialmente uma linguagem estrangeira, mas segue uma sintaxe simples. Uma regra CSS consiste em um seletor e um bloco de declarações. O seletor indica a qual(is) elemento(s) HTML a regra se aplica, enquanto o bloco de declarações contém um ou mais pares de propriedade-valor que definem a estilização.

Vamos analisar com um exemplo:

p {
  color: purple;
  background-color: green;
}

• O p é o seletor, indicando que esta regra se aplica a todos os elementos <p>;
• color: purple; especifica que a cor do texto deve ser roxa;
• background-color: green; especifica que a cor de fundo deve ser verde.

Exploraremos mais a fundo seletores, propriedades e valores nos próximos capítulos, mas por enquanto, lembre-se de que o CSS permite selecionar elementos e aplicar estilos dentro das chaves {}.

O Que Vem a Seguir?

Nos próximos capítulos, vamos aprofundar em seletores CSS, propriedades, valores e técnicas para tornar suas páginas web visualmente atraentes. Ao final deste curso, você terá as habilidades para transformar HTML simples em designs que cativam e inspiram.