Este é um dos usos do CSS
encontrados com muita frequencia. Este tipo de definição
é feito quando queremos que os estilos definidos afetem
somente os elementos de uma determinada página. As folhas
de estilo incorporadas são definidas entre as tags <head></head>
da página. Vamos ver em seguida como escrever uma página
e definir alguns estilos para seus elementos. Observe que aproveitaremos
o momento para fazer algumas considerações importantes
sobre o uso de CSS em nossas páginas.
Crie uma página web usando o seu editor favorito, vá
até a parte <body></body> e digite o seguinte
conteúdo (edite diretamente no código fonte da
página):
<h1>Modos de instalar
o software</h1>
<p>Para instalar este software o usuário deverá
selecionar o drive, o
diretório e então clicar no botão "Continuar".
Quando a instalação estiver
completa, o programa poderá ser executado clicando no
ícone respectivo no desktop. A partir daí, tudo
que o usuário tem a fazer é digitar a senha de
acesso e se preparar para um mundo novo de descobertas.</p>
Execute a sua página e você terá algo parecido
com a seguinte figura:
Para visualizar este exemplo, execute o arquivo lab1-4.htm
na pasta de exemplos.
Observando a disposição dos elementos de nossa
página, você pode notas que temos duas tags. A
primeira é representada pelo elemento <h1> e a
segunda tag é um parágrafo representado pelo elemento
<p>. Tente realizar todos os exemplos digitando diretamente
no código fonte da página. Como os nossos elementos
não possuem nenhuma definição de formatação,
isto é, não usamos nenhma de suas propriedades,
a fonte usada será a padrão (na maioria dos casos,
Times New Roman) e todos os fragmentos de texto estarão
alinhados à esquerda.
Vamos agora aplicar a formatação CSS incorporada.
Todas as definições devem estar entre as tags
<head></head> da página. Ainda com a página
que você acabou de escrever ou o arquivo de exemplo, vá
até a parte <head></head> e digite o seguinte
código:
<style type="text/css">
<!--
h1 {color: red}
p {text-align: justify}
body {font-family: verdana; font-size: 80%}
//-->
</style>
Esta mudança pode ser visualizada executando o arquivo
lab1-5.htm na pasta de exemplos.
Agora execute a página e observe as mudanças.
Você perceberá que a cor do texto do título
(h1) será alterada para vermelho, o texto do parágrafo
será justificado e a fonte será alterada para
Verdana. Observe como o tamanho da fonte foi fixado em 80% do
tamanho definido como padrão. Acompanhe a seguir algumas
considerações:
1) A definição do estilo CSS
incorporado sempre é feita usando a tag de abertura:
<style type="text/css">
Ao usar esta tag, nós estamos dizendo ao browser que
o conteúdo seguinte é o de uma folha de estilo
e, portanto, deve ser tratado como tal, ou seja, o browser deve
ler esta informação e aplicar a formatação
correspondente. Observe que esta tag pode ser definida usando
letras maiúsculas também. Por exemplo:
<STYLE TYPE="text/css">
Durante o curso será dado preferência ao cabeçalho
de abertura com letras minúsculas. Fica a seu cargo definir
se quer usar maiúsculas ou minúsculas.
2) É sempre uma boa idéia esconder
o conteúdo das tags <style> dos browsers mais antigos
ou os que não suportam folhas de estilo. Isso é
feito colocando o conteúdo entre as tags <!-- e //-->.
Veja em seguida apenas o cabeçalho para o estilo incorporado:
<style type="text/css">
<!--
{conteúdo vai aqui...}
//-->
</style>
3) Observe o seguinte trecho de código
CSS:
h1 {color: red}
Por regra, uma definição em CSS é composta
de duas partes principais: o "seletor" (no exemplo
anterior o seletor é representado pelo elemento h1) e
a declaração (no exemplo {color: red}). A declaração,
por sua vez, é composta de duas partes: a propriedade
e o valor. O valor é atribuído à propriedade
usando os dois pontos. Observe que no trecho de código
anterior estamos trabalhando com a propriedade cor e o valor
desta propriedade é vermelho (red). Lembre-se de que
as cores em CSS podem ser definidas por seu valor escrito em
inglês ou por códigos hexadecimais, por exemplo,
#FF0000. No final do curso você pode ver tanto os nomes
quanto o código hexadecimal para mais de 250 cores, incluindo
as chamadas Web Safe Colors.
Na maioria das vezes temos que definir mais de uma propriedade
na declaração de uma definição CSS
para um mesmo elemento. Suponhamos que quiséssemos não
somente definir a cor do texto para o elemento h1, mas também
o nome da fonte. Isso é feito da seguinte maneira:
h1 {color: red; font-family:
"Times New Roman"}
Veja que usamos o ponto-e-vírgula para separar as declarações
para o mesmo elemento. Você deve ter muito cuidado com
o uso das propriedades em CSS. Ao contrário do JavaScript,
que sempre apresenta erros quando mal construído, o browser,
quando encontra um erro de sintáxe em CSS, simplesmente
ignora a declaração. Você deve perceber
ainda que os browser que suportam CSS não distinguem
maiúsculas de minúsculas, ou seja, uma declaração
do tipo {color: red} seria tratada igual a {COLOR: RED}. Porém,
quando estivemos alterando estes valores, você perceberá
que em código JavaScript isso não acontece. Se
você trocar apenas uma letra maiúscula por minúscula
ou vice-versa, o código não funcionará.
Portanto, é sempre uma boa idéia manter todas
as declarações CSS em letras minúsculas
para que não tenhamos um choque quando começarmos
a acessar e alterar esses valores por meio de scripts.
Observação:
Se você executou todos os códigos propostos até
agora, perceberá que eu defini a propriedade font-family
de duas maneiras:
{font-family: verdana} e {font-family: "Times New Roman"}
Você pode perceber que, ao declarar a fonte como Times
New Roman, eu usei as aspas. Isso é feito com todas
as declarações que contém espaços.
Veja que, como a fonte verdana é composta apenas de
uma palavra, as aspas não são necessárias.
Ao declarar a fonte como sendo Courier New, novamente você
deve empregar este artifício.
<< Início do
curso | Folhas de
estilo in-line >> |
Precisa de um freelancer, códigos-fonte e exemplos completos?
Códigos-fonte 
Bancos de Dados
Usuários On-Line
Uso de folhas de estilo incorporadas
(internas)
Veja dicas, truques e anotações de 
