CONTEÚDO: INTRODUÇÃO AO CSS

1. O que é CSS?

CSS significa Cascading Style Sheets (Folhas de Estilo em Cascata). O CSS é uma linguagem usada para dar estilo às páginas Web criadas com HTML. Enquanto o HTML serve para estruturar o conteúdo (textos, imagens, botões), o CSS é responsável pela aparência visual da página.

Exemplos do que o CSS faz:

• Mudar cores dos textos;
• Alterar o tamanho das letras;
• Definir cores de fundo;
• Posicionar elementos na página.

2. Importância do CSS no Desenvolvimento Web

O CSS é muito importante porque:

• Melhora a aparência dos sites, tornando-os mais bonitos e organizados;
• Facilita a leitura do conteúdo;
• Permite a separação entre conteúdo e design: o HTML → conteúdo o CSS → aparência
• Ajuda a manter e actualizar os sites com mais facilidade;
• Garante uma melhor experiência do utilizad

3. Tipos de Folhas de Estilo CSS

Existem três formas principais de aplicar CSS em uma página HTML:

3.1 CSS Inline

O CSS inline é aplicado directamente dentro da tag HTML. Exemplo: <"p style="color: blue;">"Este texto é azul<"/p>

Características:
• É simples e rápido;
• Serve para pequenas alterações;
• Não é recomendado para páginas grandes

3.2 CSS Interna (Internal CSS)

O CSS interno é escrito dentro da própria página HTML, usando a tag .
Exemplo:
<"style>
p {
color: green;
}

Características:
• Organiza melhor o código que o CSS inline;
• Aplica estilo a vários elementos ao mesmo tempo;
• É usado quando o estilo é apenas para uma página

SINTAXE BÁSICA DO CSS E SELETORES

1. Sintaxe Básica do CSS

O CSS é escrito através de regras de estilo. Cada regra é composta por um seletor e um bloco de declarações. O seletor indica qual elemento HTML será estilizado, enquanto as declarações definem como esse elemento irá aparecer.

Estrutura básica de uma regra CSS:

seletor {
propriedade: valor;
}

Exemplos do que compõe a sintaxe do CSS:
• Seletor – escolhe o elemento HTML;
• Propriedade – define o que será alterado;
• Valor – indica como será a alteração;
• Cada declaração termina com ponto e vírgula (;).

2. Seletores Simples em CSS

Os seletores são usados para indicar quais elementos HTML receberão estilo. Os principais seletores simples são:

• Seletor de elemento (tag): seleciona elementos pelo nome da tag;
• Seletor de classe: seleciona elementos que possuem uma classe específica;
• Seletor de ID: seleciona um elemento com identificador único;
• Seletor universal: seleciona todos os elementos da página.

3. Tipos de Seletores Simples

3.1 Seletor de Elemento

O seletor de elemento utiliza o nome da tag HTML e aplica o estilo a todos os elementos desse tipo.

Exemplo:

p {
color: blue;
}

Características:
• Aplica o estilo a todas as tags iguais;
• É simples e muito utilizado;
• Possui baixa prioridade em relação a classes e IDs.

3.2 Seletor de Classe

O seletor de classe é identificado por um ponto (.) e permite aplicar estilos a vários elementos diferentes.

Exemplo:

.texto {
font-size: 18px;
}

Características:
• Pode ser reutilizado em vários elementos;
• Usa o ponto (.) antes do nome;
• É muito comum no desenvolvimento web.

3.3 Seletor de ID

O seletor de ID utiliza o símbolo # e identifica um único elemento na página HTML.

Exemplo:

#principal {
background-color: lightgray;
}

Características:
• Deve ser único na página;
• Usa o símbolo #;
• Possui maior prioridade que classes e elementos.