Pré-requisitos

• Ultimate HTML

Bem-vindo ao Mundo do Design para Web

CSS (Cascading Style Sheets) transforma HTML simples em páginas web visualmente atraentes e fáceis de usar. Controla cores, layout, espaçamento e toda a apresentação—essencialmente dando vida aos seus projetos.

O que é CSS?

CSS, abreviação de Cascading Style Sheets, é 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:

O lado esquerdo da ilustração mostra o HTML puro. O lado direito mostra como o CSS pode transformar o mesmo conteúdo com estilo e cor.

Compreendendo a Sintaxe do CSS

O 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 quais elementos HTML a regra se aplica, enquanto o bloco de declarações contém um ou mais pares de propriedade e valor que definem o estilo.

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?

Os próximos capítulos abordarão seletores, propriedades, valores e técnicas práticas de estilização. Ao final, será possível transformar HTML básico em designs limpos e atraentes.