Conhecendo o básico do CSS

Regra CSS é uma declaração com sintaxe própria que indica como será aplicado um estilo a um ou mais elementos HTML. É composta necessariamente de três partes: um seletor, uma propriedade e um valor. Pode conter um comentário, isso fica a critério do autor. Assim:

1

seletor { propriedade: valor;  /*comentário*/ }

A propriedade e o valor são obrigatoriamente separados por dois pontos (:) e estão entre { e }, sendo o valor seguido por um ponto-e-vírgula (;). Para que haja melhor leitura, é recomendável que cada propriedade e valor estejam em uma linha diferente, mas o código é executado sem problemas se todos estiverem na mesma linha. Vamos entender agora o que é cada estrutura do CSS:

Seletor

Genericamente, é o elemento HTML identificado por sua tag, por uma classe ou uma ID. A regra será válida para o elemento indicado.

Propriedade

É o atributo do elemento ao qual será aplicada a regra. Exemplo: background, font, color…

Valor

É a característica a ser assumida pela propriedade. Se for uma palavra composta, deverá ser escrita entre aspas simples (”) ou duplas (“”). Exemplo: fonte Tahoma, background branco, fonte “Courier New”…

Comentário

Um comentário é inserido no código para detalhá-lo, assim fica mais fácil lembrar o que foi feito no momento que o código foi escrito. Para que o comentário não seja executado pelo navegador ele deve, necessariamente, estar inserido entre /* e */.

Exemplo:

1
2
3
4
5

p {
font-family: Tahoma; /* define Tahoma como fonte */
color: #000000; /* cor preta */
font-weight: bold; /* fonte em negrito */
}

No exemplo, o que estiver escrito dentro da tag p aparecerá em negrito, na cor preta e fonte Tahoma.

Ligando o CSS à página da web

1) Importando o CSS

O CSS é dito importado quando está em um documento à parte da index. Geralmente chama-se style ou estilo e sempre possui extensão .css. Importar o CSS é recomendável por facilitar a aplicação das regras CSS a vários documentos ao mesmo tempo, sendo necessário modificar apenas um arquivo (style.css) para alterar a aparência do site inteiro (páginas e subpáginas). É amplamente utilizado em blogs e sites.

O arquivo é vinculado ao documento dentro da tag HEAD por meio desse código (substitua nome pelo nome do seu arquivo CSS):

1

<link href="NOME.css" rel="stylesheet" type="text/css" />

Com isso, o navegador interpretará as regras de estilo do arquivo nome.css e formatará o documento de acordo com elas. Este arquivo pode ser feito em desde editores de texto simples como Bloco de Notas e Wordpad até o complexo Macromedia Dreamweaver.

2) CSS incorporado

Esse método serve para aplicar as regras CSS apenas em uma página: na que elas estão inseridas. As regras CSS deverão ser declaradas dentro da tag HEAD do documento com a tag de estilo STYLE. Exemplo:

1
2
3
4
5
6
7
8

<head>
<style type="text/css">
<!-- 
body { background: #FFF; font-family: "Courier New"; }
p { font-size: 12px; color: #000; }
--> /
</style>
</head>

Desta forma, o navegador interpreta as regras CSS do documento na hora de formatar a página.
Obs: A marcação de comentários em HTML serve para ocultar as tags CSS em navegadores mais antigos, que não suportam a tag STYLE e reproduziriam o código na tela.

3) CSS inline

São as regras CSS declaradas dentro da tag do elemento que será formatado. Não é recomendável pois são perdidas muitas das vantagens do CSS e a página fica mais “pesada”, exigindo mais conexão para carregar. Exemplo:

1

<p style="color: #CC9900; font-size: 12px;">Parágrafo com a cor marrom e letras no tamanho 12</p>

——————————–
Este é o básico necessário para inicar a programação em CSS.



Topo || Atualizar || Página inicial