CSS - Parte 01

CSS - Introdução
●

●

Folhas de estilos em cascata — Cascading Style
Sheets (CSS) — é uma ferramenta fantástica para construção do layout dos seus websites.
Um editor de texto simples é o ideal para o aprendizado de HTML e de CSS porque eles não afetam e nem modificam o código que você digita.

O que fazer com CSS?
●

●

●

É uma linguagem para estilos que define o layout de documentos HTML.
CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos e muito mais.
HTML pode ser (in)devidamente usado para definir o layout de websites. Contudo CSS proporciona mais opções e é mais preciso e sofisticado. CSS é suportado por todos os navegadores atuais.

Diferença entre CSS e HTML
●

HTML é usado para estruturar conteúdos.

●

CSS é usado para formatar conteúdos estruturados.

Os benefícios concretos do uso de CSS incluem:
●

●
●

●

controle do layout de vários documentos a partir de uma simples folha de estilos; maior precisão no controle do layout; aplicação de diferentes layouts para servir diferentes mídias (tela, impressora, etc.); emprego de variadas, sofisticadas e avançadas técnicas de desenvolvimento.

Como funciona CSS?
●

Muitas propriedades usadas em Cascading
Style Sheets (CSS) são semelhantes àquelas do HTML.

Sintaxe básica das CSS

Como funciona CSS?
●

Um exemplo de folha de estilos com apenas uma regra.

H1 {font-size: 48pt}
●

●

●

Nesta regra, H1 é o seletor e {font-size: 48pt} é o bloco da declaração, que estabelece um tamanho de fonte
(propriedade font-size) para todos os objetos marcados com <H1>.
Se usa dois-pontos (:) e não igual (=) para aplicar um valor a uma propriedade. Pode haver mais de uma declaração de estilo para um seletor.
Isto pode ser feito em outro bloco. Cada linha acrescenta ou sobrepõe declarações feitas em linhas anteriores.

Como funciona CSS?
●

No exemplo a seguir, o texto marcado com <H1> será azul e terá tamanho de 18pt porque a regra H1 { fontsize: 18pt } ocorreu depois da