Meu primeiro CSS




CSS significa Cascading Style Sheets, em português, folhas de estilo em cascata. É uma linguagem de formatação para o HTML. É nele que controlamos posicionamento, cores, formatação de fonte (tamanho, família, decoração, dentre outras propriedades).

Por meio de regras, podemos alterar os valores das propriedades dos elementos do HTML e aplicar algumas específicas por meio de classes (class) e identificadores (id).

A estrutura da regra de CSS (sintaxe)


elemento {
       propriedade1: valor1;
       propriedade2: valor2;
}

Variações:

.classe{
       propriedade1: valor1;
       propriedade2: valor2;
}

#id{
       propriedade1: valor1;
       propriedade2: valor2;
}

Estude mais sobre a sintaxe do CSS no W3Schools ou no Site do Maujor.

O que diferencia visualmente uma classe de um id é seu início, em que o primeiro inicia-se com um ponto (.) e o último por uma cerquilha (#). O elemento é o próprio nome da tag de HTML, ex: body; p; h1; ul; li; dentre outros.

Tecnicamente, as diferenças são:

ID: utilizado em elementos únicos na página, por isto possui maior relevância. Ex: topo e rodapé.
CLASS: pode ser utilizada várias vezes na página, possui relevância média. Ex: largura de colunas.
ELEMENTO: aplicado a todos os elementos na página, possui baixa relevância. Ex: p; div; h1; body, dentre outros.

Sendo assim, um sobrepõe o outro. ID sobrepõe a CLASSE que sobrepõe o ELEMENTO

ID > CLASS > Elemento


Exercício

  1. Crie um novo arquivo no bloco de notas (Windows) ou no Editor de Texto, no modo somente texto (Mac). 
  2. Copie e cole o código abaixo.
  3. Salve com o nome estilo.css.
  4. Salve-o no mesmo local do arquivo HTML (exercicio01.html, se o mesmo do exercício HTML parte 1)
  5. Abra o arquivo HTML no navegador e veja o resultado.

Código:






Referência:

W3Schools. CSS. Disponível em <http://www.w3schools.com/css/>. Acesso em Set 2013.