Introdução

O CSS (Cascading Style Sheets) não é uma linguagem de programação ou marcação. É uma sequência de declarações de propriedades e seus valores para a manipulação da forma como o conteúdo de uma página Web.

É responsável pelo aspecto da página, pelo layout, mas não somente para isso. Ele nasceu também com outra responsabilidade: garantir acessibilidade, tanto para máquinas quanto para pessoas. Isso quer dizer que ele veio para agilizar a leitura das páginas web pelos navegadores e também para facilitar a vida dos usuários com necessidades especiais ou não.

Sintaxe

A sintaxe básica do CSS é formada por três partes:

• Seletor: de maneira geral é um componente HTML identificado por uma tag, classe ou ID;

• Propriedade: é um atributo HTML ao qual será aplicada a regra CSS;

• Valor: é uma característica específica assumida pela propriedade.

seletor{
        propriedade: valor;
}

É recomendado terminar cada regra de uma propriedade com o uso do ponto e vírgula. Um conjunto de regras é cercado por colchetes. Para o código ficar mais legível, também recomenda-se colocar somente uma regra por linha.

Comentários

Os comentários podem ser inseridos utilizando /* e */ . Comentários são ignorados pelos navegadores.

/* Este é um comentário CSS*/

Quando deseja-se aplicar uma regra em vários seletores, estes podem ser agrupados. Cada seletor deve ser separado por vírgula.

h1, h2, h3 {
    color: blue;
}

Utilizando CSS em documentos HTML

• Folha de estilos inline: as regras CSS são aplicadas diretamente nas tags HTML. Este método geralmente é pouco utilizado por não aproveitar as vantagens do uso do CSS:

<h1 style=”color: yellow”></h1>

• Folha de estilo interna: é ideal para ser utilizada em uma única página. As regras de CSS são declaradas no próprio documento HTML, utilizando a tag style atribuindo o valor da propriedade para ”text/css”:

<style type=”text/css”>
    h1{
        color: blue;
    }
</style>

Pode-se utilizar o CSS em documentos HTML de três maneiras:

• Importar arquivo CSS externo: esta forma de uso é bastante interessante quando o estilo é aplicado em várias páginas. Dessa maneira é possível alterar a aparência de diversos documentos alterando apenas um arquivo. Pode-se importar um arquivo CSS utilizando a tag link.

<link rel=”stylesheet” type=”text/css” href=”estilos.css”>

Se vários estilos forem aplicados a um mesmo elemento HTML em uma página, irá prevalecer a folha de estilos mais específica. O CSS é considerado na seguinte prioridade:

• Estilo inline;

• Folha de estilos interna;

• Folha de estilos externa;

• Padrão do navegador.

Cores no CSS

As principais maneiras de se utilizar cores em CSS são através de:

• função rgb: rgb(0 a 255, 0 a 255, 0 a 255), mistura de vermelho, verde e azul;
• código hexadecimal: #003333;
• nome da cor: blue, red, yellow, etc.

Este link traz uma tabela com o nome das cores suportadas em CSS com o seu código hexadecimal ao lado.

Unidades de Medida

As principais unidades de medida utilizadas em CSS são:

Seletores ID e Class

O CSS oferece a opção de identificar alguns elementos com as propriedades ID e class. Estas propriedades podem ser aplicadas nas tags HTML.

Quando um elemento HTML é nomeado com a propriedade ID, ele passa ser único, ou seja, não se pode utilizar o mesmo ID para mais de um elemento em uma mesma página HTML. Isso é exatamente o que o difere da propriedade class, pois vários elementos de uma mesma página HTML podem possuir valor igual em seu atributo class. O CSS possibilita usar estes valores para que sejam especificados em quais elementos os efeitos deverão ser aplicados.

Exemplo do seletor ID:

#cor {
    color: green;
}

Exemplo do seletor class:

.cor {
    color: green;
}