CSS - Introdução

Introdução

O CSS (Cascading Style Sheets) é uma linguagem fundamental para o design e a apresentação de páginas da web. Ele desempenha um papel crucial na criação de layouts atraentes e na formatação de conteúdo para tornar os sites visualmente agradáveis e funcionais. Neste capítulo, exploraremos o mundo do CSS, desde seus conceitos básicos até suas propriedades avançadas.

O que é CSS?

CSS é uma linguagem de estilo utilizada para descrever a aparência e o formato de documentos HTML. É uma parte essencial do desenvolvimento web moderno, permitindo que os designers controlem a apresentação visual de páginas da web. Com CSS, você pode definir cores, fontes, espaçamento, posicionamento e muito mais.

Como o CSS funciona?

O funcionamento do CSS é baseado em regras de estilo que são aplicadas aos elementos HTML. Uma regra de estilo é composta por um seletor e um conjunto de propriedades e valores. O seletor identifica os elementos HTML aos quais a regra se aplica, enquanto as propriedades especificam como esses elementos devem ser estilizados.

Sintaxe Básica

seletor {
  propriedade: valor;
}

Seletor: Pode ser um elemento HTML (por exemplo, p para parágrafos), uma classe (por exemplo, .destaque), um ID (por exemplo, #cabecalho), ou uma combinação de seletores.
Propriedade: Define a característica a ser estilizada (por exemplo, color para a cor do texto).
Valor: Especifica o valor da propriedade (por exemplo, blue para a cor azul).

Herança e Cascata

Duas características fundamentais do CSS são a herança e a cascata:

Herança: Alguns estilos aplicados a elementos pai são herdados por seus elementos filhos. Por exemplo, se você definir a fonte para o elemento body, os elementos filhos também usarão essa fonte, a menos que sejam substituídos por uma regra de estilo específica.
Cascata: Quando várias regras de estilo se aplicam a um elemento, o CSS usa regras de precedência para determinar qual estilo será aplicado. Isso permite que você crie estilos globais e locais, e as regras locais geralmente têm precedência sobre as regras globais.

Propriedades CSS Comuns

Existem centenas de propriedades CSS disponíveis, mas algumas das mais comuns incluem:

color: Define a cor do texto.
font-family: Especifica a família de fontes a ser usada.
font-size: Define o tamanho da fonte.
margin e padding: Controlam o espaçamento em torno dos elementos.
border: Define as bordas de um elemento.
background-color: Especifica a cor de fundo de um elemento.
text-align: Alinha o texto dentro de um elemento.
display: Controla como um elemento é exibido no layout.

Seletores CSS

Os seletores CSS permitem que você segmente elementos específicos em uma página para aplicar estilos. Alguns tipos comuns de seletores incluem:

Seletor de Tipo: Segmenta elementos por seu tipo, como p para parágrafos.
Seletor de Classe: Segmenta elementos com base em classes, como .destaque.
Seletor de ID: Segmenta elementos com base em IDs exclusivos, como #cabecalho.
Seletor Universal: Segmenta todos os elementos na página, usando *.
Seletor de Atributo: Segmenta elementos com base em atributos, como [type="text"].

CSS com HTML

Existem três maneiras principais de usar CSS em uma página da web: através de um arquivo externo, estilos inline e estilos embutidos. Cada método tem seus próprios usos e considerações. Vamos explicar cada um deles de forma didática:

1. Arquivo Externo (Link Externo):

O que é: Um arquivo CSS externo é um arquivo separado com extensão ".css" que contém todas as regras de estilo para sua página da web. Esse arquivo é vinculado ao seu arquivo HTML usando a tag <link>.

Como funciona: A tag <link> é colocada no <head> do arquivo HTML e aponta para o arquivo CSS externo usando o atributo href. As regras de estilo contidas no arquivo CSS externo são aplicadas a todos os elementos HTML correspondentes em todas as páginas que vinculam esse arquivo CSS.

Quando usar: O uso de um arquivo CSS externo é recomendado para manter os estilos separados do conteúdo. É útil quando você deseja aplicar os mesmos estilos a várias páginas da web ou quando trabalha em equipes de desenvolvimento.

Exemplo:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="estilos.css" type="text/css">
</head>
<body>
  <!-- Conteúdo HTML aqui -->
</body>
</html>

2. Estilos Inline:

O que é: Estilos inline são regras de estilo definidas diretamente em um elemento HTML usando o atributo style.

Como funciona: Você adiciona o atributo style a um elemento HTML e define as propriedades de estilo diretamente dentro dele. Os estilos inline se aplicam apenas ao elemento em que estão definidos.

Quando usar: Estilos inline são úteis quando você deseja aplicar um estilo específico a um elemento único ou quando precisa de uma formatação rápida. No entanto, eles não são recomendados para estilos complexos ou para aplicar os mesmos estilos a vários elementos.

Exemplo:

<p style="color: blue; font-size: 16px;">Este é um parágrafo com estilo inline.</p>

3. Estilos Embutidos (Internal Styles):

O que é: Estilos embutidos são regras de estilo definidas no cabeçalho HTML usando a tag <style>.

Como funciona: A tag <style> é colocada no <head> do arquivo HTML e contém todas as regras de estilo que se aplicam à página. Os estilos embutidos se aplicam aos elementos HTML correspondentes na mesma página.

Quando usar: Estilos embutidos são úteis quando você deseja aplicar estilos a uma única página sem criar um arquivo CSS externo. Eles são úteis para páginas pequenas ou projetos simples.

Exemplo:

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: green;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>Este é um parágrafo com estilo embutido.</p>
</body>
</html>

Resumo:

Arquivo Externo: Recomendado para projetos maiores e reutilização de estilos.
Estilos Inline: Úteis para estilos específicos de elementos individuais.
Estilos Embutidos: Adequados para páginas pequenas ou projetos simples.

A escolha entre essas técnicas depende do tamanho do projeto, da necessidade de reutilização de estilos e da complexidade dos estilos a serem aplicados. Geralmente, o uso de arquivos CSS externos é uma prática recomendada para manter o código organizado e facilitar a manutenção.

Propriedades Comuns

Cor e Texto:

color: Valores de cor. Define a cor do texto.

Fontes:

font-family: Nome(s) de fonte. Especifica a família de fontes para o texto.

font-size: Tamanho de fonte. Define o tamanho da fonte do texto.

font-weight: Normal, negrito, número. Define a espessura da fonte.

Alinhamento de Texto:

text-align: left, right, center, justify. Alinha o texto horizontalmente dentro de um elemento.

line-height: Valor numérico ou normal. Controla o espaçamento entre as linhas de texto.

Fundos:

background-color: Valores de cor. Define a cor de fundo de um elemento.

background-image: URL da imagem. Define uma imagem de fundo para um elemento.

Espaçamento:

margin: Valor numérico ou auto. Controla o espaço fora do elemento (espaço externo).

padding: Valor numérico. Controla o espaço dentro do elemento (espaço interno).

Bordas:

border: Largura, estilo, cor. Define uma borda ao redor do elemento.

Dimensões:

width: Valor numérico, auto. Define a largura do elemento.

height: Valor numérico, auto. Define a altura do elemento.

Exibição e Posicionamento:

display: inline, block, flex, etc. Especifica como um elemento deve ser exibido no layout.

position: static, relative, absolute, fixed, sticky. Controla o posicionamento de um elemento em relação ao seu contexto.

top, right, bottom, left: Valores numéricos, auto. Define a posição de um elemento posicionado.

Flutuação e Claração:

float: left, right, none. Controla como um elemento deve flutuar ao lado de outros elementos.

clear: left, right, both, none. Controla como um elemento deve se comportar em relação a elementos flutuantes.

Empilhamento e Ordem:

z-index: Valor numérico. Define a ordem de empilhamento de elementos posicionados.

Decoração de Texto:

text-decoration: none, underline, overline, line-through. Define a decoração de texto, como sublinhado, tachado, etc.

Conclusão

O CSS é uma ferramenta poderosa que permite que desenvolvedores e designers controlem a apresentação visual de páginas da web. Neste capítulo, exploramos os conceitos fundamentais do CSS, incluindo como ele funciona, a sintaxe das regras de estilo, herança, cascata e algumas propriedades comuns. Com um entendimento sólido do CSS, você estará preparado para estilizar e personalizar páginas da web de forma eficaz e atraente. Continuar aprendendo e praticando o CSS é fundamental para aprimorar suas habilidades de design web.

Onde estudar: https://developer.mozilla.org/pt-BR/docs/Learn/Getting_started_with_the_web/CSS_basics