Sintaxe Básica do CSS: Guia Completo

CSS (Cascading Style Sheets) é uma linguagem de estilo utilizada para definir a apresentação de documentos HTML. Com o CSS, podemos controlar o layout, cores, fontes e diversos outros aspectos visuais de uma página web. Este artigo irá introduzir a sintaxe básica do CSS, essencial para qualquer desenvolvedor web.

Estrutura de uma Regra CSS

A sintaxe básica do CSS é composta por seletores e declarações. Uma regra CSS completa é formada da seguinte maneira:

seletor {  propriedade: valor; }

• Seletor: Indica o elemento HTML ao qual a regra será aplicada.

• Propriedade: Especifica o aspecto visual que será alterado.

• Valor: Define o novo valor da propriedade.

   

Exemplos de Seletores

1. Seletor de Elemento Aplica estilos a todos os elementos de um tipo específico.

   p {  color: blue; }

2. Seletor de Classe Aplica estilos a elementos com uma classe específica. No HTML, uma classe é definida com o atributo class.

   .minha-classe {  font-size: 16px; }

3. Seletor de ID Aplica estilos a um único elemento com um ID específico. No HTML, um ID é definido com o atributo id.

   #meu-id {  margin: 20px; }

4. Seletor de Atributo Aplica estilos a elementos com um atributo específico.

   input[type="text"] {  border: 1px solid #000; }

Agrupando Seletores

Podemos aplicar o mesmo conjunto de declarações a múltiplos seletores separando-os com vírgulas.

h1, h2, h3 {  font-family: Arial, sans-serif; }

Comentários em CSS

Comentários são utilizados para deixar notas ou desativar trechos de código, e são ignorados pelo navegador.

/* Este é um comentário */ p {  color: green; /* Comentário em linha */ }

Propriedades e Valores Comuns

1. Cor de Texto

   body {  color: #333; }

2. Cor de Fundo

   div {  background-color: #f0f0f0; }

3. Fontes

   p {  font-size: 14px;  font-family: 'Helvetica', sans-serif; }

4. Espaçamento Interno (Padding) e Externo (Margin)

   .container {  padding: 20px;  margin: 10px; }

5. Bordas

   img {  border: 2px solid #000; }

Importando CSS Externo

Podemos manter nossos estilos em arquivos CSS separados e importá-los nos documentos HTML utilizando a tag .

<link rel="stylesheet" href="styles.css">

Conclusão

Compreender a sintaxe básica do CSS é fundamental para desenvolver páginas web atraentes e funcionais. Este guia cobriu os conceitos essenciais, como a estrutura das regras CSS, tipos de seletores, propriedades comuns e como importar arquivos CSS. Com essa base, você estará pronto para explorar mais funcionalidades e avançar no domínio do CSS.

Explore mais sobre CSS e continue aprimorando suas habilidades para criar websites incríveis!