Introdução ao CSS
Autor: Maik Basso | Publicado: 2012-02-09T17:39:00-02:00




CSS ou Folha de Estilos em Cascata é uma linguagem de estilização de documentos Web. Com o CSS, por exemplo, é possível colocar como fundo de um elemento HTML, uma imagem, uma cor ou um gradiente.

A sintaxe do CSS
Uma declaração CSS é denominada regra. Um conjunto de regras aplicadas a um mesmo elemento recebe o nome de classe. Um conjunto de classes e regras CSS recebe o nome de folha de estilos.
A sintaxe do CSS é composta de um seletor (identificação do(s) elementos que serão estilizados), seguido das propriedades CSS e seus respectivos valores entre chaves.
Exemplo:

Seletor{ Propriedade CSS: Valor }

Se houver mais de uma propriedade CSS formando uma regra, devemos separá-las usando ponto e vírgula (;).
Exemplo:

Seletor{ Propriedade CSS 1: Valor; Propriedade CSS 2: Valor; }

A utilização do ponto e vírgula após o valor do último elemento de uma regra CSS é facultativo.
Para facilitar a interpretação futura de uma folha de estilos, é recomendável que as regras CSS sejam desenvolvidas em forma de cascata, como no exemplo abaixo.
Exemplo:

Seletor{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Propriedade CSS 1: Valor; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Propriedade CSS 2: Valor; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Propriedade CSS 3: Valor; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Propriedade CSS 4: Valor; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Propriedade CSS 5: Valor; 
}
Seletor{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Propriedade CSS 1: Valor; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Propriedade CSS 2: Valor; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Propriedade CSS 3: Valor; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Propriedade CSS 4: Valor; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Propriedade CSS 5: Valor; 
}

Se em uma mesma regra CSS seja necessário o uso de múltiplos seletores, os mesmos devem ser separados por vírgula.
Exemplo:

Seletor 1, Seletor 2, Seletor 3{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Propriedade CSS 1: Valor; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Propriedade CSS 2: Valor; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Propriedade CSS 3: Valor; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Propriedade CSS 4: Valor; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Propriedade CSS 5: Valor; 
}


Seletores
Um seletor indica ao browser a quais elementos da página HTML ele deve aplicar as propriedades CSS utilizadas na construção de uma regra.
Normalmente o valor de um seletor é o próprio nome da tag HTML.
Exemplo:

a{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Propriedade CSS 1: Valor; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Propriedade CSS 2: Valor; 
}

Tomando por base o exemplo acima, se for utilizada somente "a" como seletor, todos os links da página seriam estilizados da mesma forma.
Para resolver este problema, o CSS nos possibilita, através dos seletores, traçar um caminho pelo código HTML e estilizar somente uma tag ou elemento específico.
Observe o código HTML abaixo:

&lt;div&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="#"&gt;Meu Link&lt;/a&gt; 
&lt;/div&gt; 
&lt;a href="#"&gt;Meu Link&lt;/a&gt;

Analisando o código HTML acima podemos observar que temos dois links, o primeiro dentro de uma divisão (div) e um segundo fora da divisão. Utilizando o exemplo de regra CSS acima para estilizar o nossos links, todos seriam afetados pela regra, mas se quisermos aplicar a regra CSS somente ao link que está dentro da div basta informarmos o caminho que o CSS deve percorrer até chegar a tag que desejamos estilizar.
Observe o exemplo:

div a{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Propriedade CSS 1: Valor; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Propriedade CSS 2: Valor; 
}

Preste a atenção no seletor que foi declarado, ele representa o caminho até chegar ao link que está dentro da divisão. Portanto dessa forma o link que está fora da divisão não será estilizado pela regra acima.
Mesmo com a possibilidade de declarar o caminho de um elemento através do seletor, pode ocorrer o imprevisto de que possua dois caminhos iguais no código HTML.
Exemplo:

&lt;div&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="#"&gt;Meu Link&lt;/a&gt; 
&lt;/div&gt; 
&lt;div&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="#"&gt;Meu Link&lt;/a&gt; 
&lt;/div&gt; 
Se a intenção é estilizar todos os links dentro de divisões HTML, a regra CSS acima é válida, mas se não for esta a intenção, o problema pode ser contornado com os seletores id e class que você confere logo abaixo.

Seletor id
Para definir um nome de seletor id para uma tag HTML, utilize o comando id.
Exemplo:

&lt;div id="meu_link"&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="#"&gt;Meu Link&lt;/a&gt; 
&lt;/div&gt; 
Um valor de id é único, portanto um valor como o do exemplo acima "meu_link" só pode estar presente em uma tag HTML.
Veja os exemplos:
A) Exemplo incorreto:

&lt;div id="meu_link"&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="#"&gt;Meu Link&lt;/a&gt; 
&lt;/div&gt; 
&lt;div id="meu_link"&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="#"&gt;Meu Link&lt;/a&gt; 
&lt;/div&gt; 
B) Exemplo correto:

&lt;div id="meu_link"&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="#"&gt;Meu Link&lt;/a&gt; 
&lt;/div&gt; 
&lt;div id="meu_link_2"&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="#"&gt;Meu Link&lt;/a&gt; 
&lt;/div&gt;

Para fazer a declaração de um id como seletor, se usa um cerquilha (#), seguido do nome do id.
Observe os dois exemplos abaixo que estão corretos:
A)

div#meu_link a{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Propriedade CSS 1: Valor; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Propriedade CSS 2: Valor; 
}

B)

#meu_link a{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Propriedade CSS 1: Valor; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Propriedade CSS 2: Valor; 
}


Seletor class
O seletor class funciona de forma contrária ao id, porque ao invés de ser um seletor para uma única tag, este seletor pode ser aplicado a diversas tags.
Para adicionar um seletor class ao seu código HTML use o comando class.
Exemplo:

&lt;div class="meu_link"&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="#"&gt;Meu Link&lt;/a&gt; 
&lt;/div&gt; 
&lt;div class="meu_link"&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="#"&gt;Meu Link&lt;/a&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="#"&gt;Meu Link&lt;/a&gt; 
&lt;/div&gt;

A representação de uma class no seletor css é feita por um ponto (.) seguido do valor do comando class.
Exemplo:

.meu_link a{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Propriedade CSS 1: Valor; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Propriedade CSS 2: Valor; 
}

Dessa forma todos os links que pertencem a classe "meu_link" serão estilizados pela mesma regra css.

Propriedades
As propriedades CSS permitem ao programador construir as regras CSS. Cada propriedade tem uma função específica, como por exemplo, alterar o tipo da fonte ou a cor de fundo de um elemento ou tag HTML.
Para trocar a cor da fonte, por exemplo, usa-se propriedade color seguida de dois pontos e um valor para a cor (blue, #06f).
Exemplo:

.meu_link a{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; color:#06f; 
}

Em futuras postagens você irá conferir mais propriedades CSS e suas respectivas funções.

Aonde colocar o meu CSS?
Existem três formas para se aplicar o CSS em uma página HTML, sendo duas de forma interna a página e uma de forma externa.

1°) Utilizando o comando style do HTML
Essa é a forma mais fácil de usar o CSS, pois não requer o uso de seletores. Para usá-la basta colocar as propriedades e seus valores como valor do comando style.
Exemplo:

&lt;div style="Propriedade CSS 1: Valor; Propriedade CSS 2: Valor;"&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="#"&gt;Meu Link&lt;/a&gt; 
&lt;/div&gt; 

2°) Criando um bloco de CSS
Está é uma opção a utilização de folhas de estilo dentro de uma página HTML.
Para criar um bloco de CSS você deve utilizar a tag style com o comando type assumindo o valor de "text/css".
Observe o exemplo de como ficaria isto em uma página HTML.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;head&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;title&gt;Introdução ao CSS&lt;/title&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;style type="text/css"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .meu_link a{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Propriedade CSS 1: Valor; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Propriedade CSS 2: Valor; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/style&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/head&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;body&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="meu_link"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="#"&gt;Meu Link&lt;/a&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="#"&gt;Meu Link&lt;/a&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="#"&gt;Meu Link&lt;/a&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/body&gt;
&lt;/html&gt;


3°) CSS em um arquivo externo
Está é uma boa opção se as regras e classes CSS serão aplicadas a uma ou mais páginas HTML.
Para se usar desta forma devemos então criar um arquivo que contenha todas as regras CSS.
Abra um novo documento no Notepad++ e salve com o nome de sua preferência .css (exemplo: meus_estilos.css). Dentro deste arquivo coloque todas as regras e classes CSS que quiser.
Agora precisamos ligar os estilos do arquivo CSS ao código HTML, para isso use a tag link com o comando href, como valor deste comando adicione o link do arquivo CSS. Também use o comando rel assumindo o valor "stylesheet" e o comando media assumindo o valor "screen".
Confira abaixo um exemplo dos arquivos:
1° arquivo: meus_estilos.css

#titulo{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Propriedade CSS 1: Valor; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Propriedade CSS 2: Valor; 
}
.meus_links a{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Propriedade CSS 1: Valor; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Propriedade CSS 2: Valor; 
}
2° arquivo: index.html

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;head&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;title&gt;Introdução ao CSS&lt;/title&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;link rel="stylesheet" href="meus_estilos.css" media="screen"/&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/head&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;body&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;p id="titulo"&gt;Lista de links&lt;/p&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;div class="meus_links"&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="#"&gt;Meu Link&lt;/a&gt;&lt;br /&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="#"&gt;Meu Link&lt;/a&gt;&lt;br /&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;a href="#"&gt;Meu Link&lt;/a&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/div&gt;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/body&gt;
&lt;/html&gt;