CSS

Uma folha de estilo, genericamente falando, tem o princípio básico de manter a mesma aparência para um determinado tema. Por isso que os títulos e subtítulos de uma publicação têm sempre o mesmo aspecto. E isso também é aplicado para as folhas de estilo na Web. Com elas você garante que seu site terá o mesmo aspecto, além de poder mudar qualquer coisa relacionada ao estilo em todas as páginas simultaneamente.

As folhas de estilo de Web são chamadas CSS por carregarem consigo mais um conceito: sua aplicação. Folhas de estilo em cascata. Você tem uma certa ordem de precedência para que um determinado estilo seja aplicado. Da seguinte forma:
- alterações de estilo em linha - significa que o estilo será aplicado diretamente a uma tag em uma parte do documento.
- alteração de estilo incorporada - o estilo é indicado no início do documento, valendo para ele todo.
- alteração de estilo vinculada - o estilo fica em uma página externa que é aplicado a uma ou mais páginas simultaneamente.

Alguns exemplos de cada uma destas formas:

- folha de estilo em linha:

<p style="color:blue"> Este parágrafo será escrito na cor azul. <br>
E se eu quebrar a linha, ainda assim será azul!</p>
<p> Agora, este novo parágrafo volta a ser escrito na cor normal porque o estilo em linha altera apenas o conjunto de tags a que pertence. </p>

- folha de estilo incorporada:

<html>
<head>
<!—título da home page -->
<title>Trabalhando com Folhas de Estilo</title>
<style type="text/css">

</style>
</head>
<body>
<h1>Este é o título alterado</h1>
<p> Neste caso são usados dois recursos:<br>
o primeiro é o estilo incorporado,<br>
o segundo é usar o estilo para alterar uma tag.<br>
Toda vez que eu usar a tag "h1" neste documento ela será alterada para atender às especificações do meu estilo.</p>
</body>
</html>

- folha de estilo vinculada:

Você coloca o vínculo entra as tags <meta> :

Cria um documento apenas com os códigos css e salva com o "nome.css" (no exemplo acima o nome do arquivo é "estilos.css" e ele está numa pasta "css"). Depois basta "chamar" o estilo, seja numa tag ou numa "class" (um atributo usado para aplicar estilos).

Este tipo de estilo você só poderá usar se o seu provedor de blog permitir o upload de qualquer tipo de arquivo. Os que eu verifiquei foram Blogger - aceita qualquer tipo de arquivo e Weblogger - aceita apenas imagens .gif ou .jpg, portanto não dá para trabalhar com arquivos .css. Neste caso você teria que ter um outro lugar para colocar o seu arquivo na rede (um servidor qualquer) e então usar a seguinte opção:

Isso tudo quer dizer que um estilo aplicado em linha será aplicado a um determinado texto/objeto ao invés de um estilo incorporado ou vinculado - no caso de haver um conflito.

Mas estas são formas de se usar o estilo. Você precisa saber também o que o estilo controla. E são muitas as variáveis. Primeiro a sintaxe básica:
h1 { color:blue }
h1 - seletor
color:blue - declaração, onde: color - propriedade e blue - valor

Agora o circo está realmente armado! Que confusão! No início é assim mesmo, a gente se atrapalha com tanta coisa. Um HTML normal é bem mais simples. Mas o CSS dá uma "turbinada" na sua página sem aumentar muito o tamanho do arquivo. Vamos agora estudar alguns exemplos para facilitar o entendimento. Como o assunto é muito compleco, no final desta página você encontrará sites para aprimorar seus conhecimentos, aqui vamos ver as coisas mais simples e divertidas.

Vamos começar analisando os dois blogs de referência Weblogger e Blogger. No primeiro, o template que utilizei já tem logo de cara:

E tudo isto está bem no início, entre as tags <head> e </head> .

Primeiro temos as tags que indicam ao html que esta parte do código vai dar as coordenadas de um estilo. Em seguida eu tenho as características que serão alteradas para todas as tags <td> , depois mais dois grupos de alterações, porém estas só serão aplicadas aonde eu indicar com o atributo "class". Assim:

<p class="descricao"> Este parágrafo terá o aspecto determinado pelo estilo "descricao". </p>

Ou, já usando as tags reservadas do Weblogg:

Este exemplo exibirá as mensagens postadas com o aspecto definido pelo estilo "descricao".
Obs.: lembre-se de que cada site de hospedagem blog utiliza suas próprias conveções de tags reservadas.

Vamos tentar um exemplo real? Este aplica um glow (brilho) ao texto. Primeiro o código alterado do estilo (que está no cabeçalho do template) e em seguida a forma como ele (estilo) foi chamado (que está no corpo do template).

.titulo{font-family:verdana;font-size:30px;color:#ff9900;height:50;
filter:glow(strength=3,color=#000000,enabled=1)}

obs: o código deve ser digitado sem nenhum "enter", aqui ele aparece quebrado somente para caber na página.

Vamos tentar no Blogger. Lá, a apresentação do estilo está assim:

Também no início e entre as tags <head> e </head> . O template que usei lá tem mais estilos do que o outro. Repare que tenho estilo para o corpo do html que é a tag <body>, para a célula da tabela - <td>, para os links - a, para os links quando eu passo o mouse por cima - a:hover; além dos etilos que eu chamo quando precisar "tit" e "date". Assim eu posso alterar a cor e o tamanho de um parágrafo conforme estipulado no estilo "tit" da seguinte maneira:

<p class="tit"> Este parágrafo tem o estilo definido pelo atributo class="tit" </p>

Ou, usando o que está no próprio template:

Da mesma forma, vamos aplicar o Glow ao título:

.tit{color:#66cc00;font-size:30px;height:50;filter:glow(strength=3,color=#000000,enabled=1)}

Pronto. Temos um glow no template! Assim fica mais fácil de analisarmor o código CSS:
color:#66cc00 - tranforma a cor do texto de acordo com o exadecimal (tabela de cores)
font-size:30px - transforma o tamanho da fonte em 30 pixels
height:50 - diz que a altura da área retangular do texto será 50 pixels
filter:glow - tipo especial de filtro que gera um brilho no texto

E assim temos mais de 50 propriedades para alterarmos as tag de html usando o CSS.

Vamos ver mais alguns exemplos para você se divertir:

Colocar barra de rolagem colorida na sua página. Cole o código abaixo junto com os outros estilos no seu template.

html {
scrollbar-face-color: 0080ff;
scrollbar-highlight-color: ffffff;
scrollbar-3dlight-color: 0060ff;
scrollbar-darkshadow-color: 000000;
scrollbar-shadow-color: 0000c0;
scrollbar-arrow-color: 0080ff;
scrollbar-track-color: c0c0ff;
}

Este código foi criado por um "gerador de código". Você encontra este "gerador" na página da Plugmaster, no link "Editor de barra de rolagem". Tome o cuidado apenas de substituir a tag <body> pela tag <html>. Se quiser use nossa tabela de cores.

Transformar uma imagem colorida em preto e branco. Coloque o estilo "filter:gray" na tag da imagem.

Mais diversão com imagens, porém agora a intenção é usá-las como plano de fundo. Mas não como um azulejo que se repete por toda a tela, e sim fixa.

body {
background-image: url(http://html4blog.weblogger.com.br/img/fundo.jpg);
background-attachment: scroll;
background-repeat: no-repeat;
background-position: left top;
}

Aqui você poderá mudar também algumas características:
attachment:
scroll - a imagem rola com a barra de rolagem
fixed - a imagem fica no lugar enquanto o texto rola sobre ela
repeat:
no-repeat - não repete
repeat - repete por toda a página (eixos X e Y)
repeat-x - repete apenas no eixo X
repeat-y - repete apenas no eixo Y
position:
left, center, right, valor (em pixels) - esquerda, centro, direita
top, center, bottom, valor (em pixels) - superior, centro, inferior
Obs.: lembre-se de que cada blog tem uma forma diferente de colocar imagens, este exemplo é do Weblogger.

Se você está trabalhado com um layout sem tabelas, pode ser que o seu texto fique um pouco "grudado" na lateral do navegador. Para criar uma margem na sua página:

body {
margin-left: 30px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

Você gostaria de separar os post com uma linha colorida? Você pode colocar uma imagem ou então usar o CSS:

No seu template, quando acabar a parte das mensagens com todos os seus detalhes (nome, email, envie para um amigo etc) coloque um parágrafo com apenas um espaço em branco. Depois adicione o seguinte estilo à este parágrafo:

Aqui está o estilo:

.finalizacao {
font-family: Arial, Helvetica, sans-serif;
font-size: 2px;
background-color: #FFCF63;
height: 2px;
width: 300px;
}

Altere a cor conforme o seu projeto! Use nossa tabela de cores.
Altere a altura (height) como preferir, apenas lembre-se colocar um valor idêntico ao tamanho da fonte (font-size). Mude como preferir também a largura (width) da linha.

Uma fonte bem pequena para alterar o rodapé da página com seus dados:

.rodape {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666666;
}

E no template chame este estilo para se aplicado aonde preferir:

<p class="rodape">template by html4blog</p>

Um link de cor diferente, negrito e sem sublinhado? Basta acrescentar o seguinte estilo à tag <a>.

a:link {
color: #636563;
font-weight: bolder;
text-decoration: none;
}

Mas o link possui outros estágios: visitado, quando passar o mouse por cima e ativo:

a:visited {
color: #000000;
text-decoration: none;
}
a:hover {
color: #990000;
text-decoration: none;
}
a:active {
color: #990000;
text-decoration: none;
}

E por aí vai... Você pode fazer milhares de combinações diferentes com os etilos. Mas pode usar as prontas! Na seção adereços você encontra uma lista de sites onde buscar mais CSSs prontos.

Agora, se você quer mesmo se aprofundar no assunto, viage com o csszengarden. Lá você pode fazer o download do arquivo base HTML e do CSS para poder criar o seu layout. Muito interessante e divertido. Avise-nos se você entrar para o Hall da Fama!

fim