CSS (Folhas de Estilo em Cascata)

CSS (Cascading Style Sheets) é uma linguagem usada para adicionar estilo e melhorar o apelo visual dos elementos HTML em uma página da web. Ele desempenha um papel crucial na melhoria da estética de um site, assim como a decoração, cor das paredes, móveis, material do sofá e forma das janelas e portas contribuem para a aparência geral de uma casa.

Adicionando CSS para Estilizar HTML

CSS nos permite controlar a apresentação e o layout dos elementos HTML, incluindo cores, fontes, espaçamento e mais. Aqui está como podemos aplicar estilos CSS aos nossos elementos HTML:

Estilos Inline

Usando o atributo style, podemos aplicar estilos CSS diretamente a elementos HTML individuais. Este método é útil para adicionar estilos rápidos e pontuais.

index

Estilos Internos

Também podemos incluir estilos CSS dentro das tags <style> na seção <head> do documento HTML. Este método é útil para aplicar estilos a múltiplos elementos dentro do mesmo documento.

index

Folhas de Estilo Externas

Para projetos maiores ou quando queremos reutilizar estilos em várias páginas, é comum usar folhas de estilo externas. Crie um arquivo CSS separado (por exemplo, index.css) e vincule-o ao documento HTML usando a tag <link>.

Por favor, verifique os arquivos index.html e index.css no exemplo.

index

Seletores CSS

Os seletores CSS têm como alvo elementos HTML com base em critérios como tipo de elemento, classe ou ID. Um seletor especifica o elemento exato ao qual estilos específicos devem ser aplicados.

Seletor de Elemento

Alvo todos os elementos de um tipo específico.

Seletor de Classe

Alvo elementos com um atributo de classe específico.

Seletor de ID

Alvo um elemento específico com um atributo ID único.

Propriedades CSS

As propriedades CSS definem como os elementos selecionados devem ser estilizados. Aqui estão algumas propriedades CSS comuns:

color define a cor do texto;
background-color define a cor de fundo de um elemento;
font-size define o tamanho do texto;
margin adiciona espaçamento ao redor de um elemento.

Podemos personalizar a aparência da página da web aplicando estilos CSS aos elementos HTML para criar experiências visualmente atraentes e amigáveis ao usuário.

Exemplo:

index

Tutorial em Vídeo

Tudo estava claro?

Obrigado pelo seu feedback!

Seção 2. Capítulo 3