Introdução
Alguma vez você decidiu alterar as cores dos link de sua home-page?
Que tal alterar todas as páginas em apenas um documento? Interessante, não?

Cascading Style Sheets são documentos com a extensão .css que guardam todas as características gráficas de seu site. Podem estar separados, ou no próprio código da página HTML.

*A maioria dos códigos abaixo precisa ser executado no Microsoft Internet Explorer 4.0 ou no Netscape Communicator 4.0x.
**Os códigos não precisam ser compilados, mas a extensão .css é obrigatória.
Classes e Objetos

As classes e objetos foram criadas para identificar objetos em seu site. Veja um esquema dessas propriedades:
Nome Código Objetos Aceitos Definição
Classe .NomeDaClasse Todos As classes são usadas para o agrupamento de objetos com propriedades parecidas.
ID #NomeDoID Todos As ID são as identidades de objetos. São usadas para alterar propriedades de objetos determinados.
Exemplos e Explicações

<span style="cursor:hand;">Passe o cursor sobre este texto.</span> 'Faz com que o cursor se transforme em uma mão

<style> H3 { font-color:blue; font-style:italic; } </style>  'Todos os títulos H3 terão a cor azul e serão itálicos

Entendeu? ~ Nem um pouco? Então continue lendo...

A estrutura padrão de um CSS é:
Objeto { Propriedade-SubPropriedade:Valor1; Propriedade2-SubPropriedade2:Valor2; }
* Os espaços serão ignorados, portanto, utilize-os para melhorar a aparência de seu CSS



Há quatro tipos de CSS:

    * Tag embutida
    * Estilo embutido
    * Estilo externo
    * Estilo importado

Tag Embutida

Este tipo de estilo fica codificado dentro da tag de um objeto HTML. Pode alterar qualquer propriedade do objeto a que se refere, porém, não tem nenhum efeito sobre os outros objetos.

Ex: <span style="cursor:wait;">Passe o cursor sobre este texto.</span> 'Transforma o cursor em ampulheta
Estilo Embutido

Cria um estilo para a página HTML em que se localiza.

Ex: <style> A { font-color:yellow; } </style> 'Todos os links serão amarelos
Estilo Externo

Utiliza um documento com a extensão .css para criar o estilo da página. Este documento pode ser usado por mais de uma página HTMl.

Ex:

    * Documento CSS
      <Xmp>
          */ A { color:red; } /*
      </Xmp>
    * Documento(s) HTML
      <link rel="STYLESHEET" href="MeuEstilo.css" Type="text/css">

*Um Estilo Externo não impede a utilização de outros tipos de estilos
Estilo Importado

Importa um estilo para o código de outro estilo.

Ex: @import: url(MeuEstilo.css) ;

*A tag @import precisa estar no começo do documento CSS
Interagindo com o Usuário

Vários tipos de Interação com o usuário são possíveis, porém, apenas dois são interessante:

    * Alteração do Mouse
    * Alteração da Cor do Texto

Alterando o Mouse

<tag style="cursor: (wait | hand) ;">Blablabla</tag>
Alterando a Cor do Texto

<style> A:hover{ color: (red | yellow | blue ...); } </style>
Propriedades e Valores
Propriedade Valores Válidos Exemplo Elementos
font-family [ [ family-name | generic-family ], ]* [ family-name | generic-family ] { font-family: Verdana, MS Sans Serif; } todos
font-style normal | italic { font-style:italic; } todos
font-variant normal | small-caps { font-variant:small-caps: } todos
font-weight normal | bold { font-weight:bold; } todos
font-size [ xx-large | x-large | large | medium | small | x-small | xx-small ] | [ larger | smaller ] | percentagem | tamanho { font-size:12pt; } todos
font [ font-style || font-variant || font-weight ] ? font-size [ / line-height ] ? font-family { font: bold 12pt Arial; } todos
@font-face2 font-family: font-family; src:url(url) @font-face { font-family: Fontes; src:url(http://www.xxx.com/Fontes.eot); } todos
color color { color:salmon; } todos
background-color cor | transparent { background-color:crimson; } todos
background-image url | none { background-image:url(bgWood.jpg); } todos
background-repeat repeat | repeat-x | repeat-y | no-repeat { background-repeat:no-repeat; } todos
background-attachment scroll | fixed { background-attachment:fixed; } todos
background-position [ position | length ] | {1,2} | [ top | center | bottom ] || [ left | center | right ] { background-position: top center;} elementos trocados
background transparent | color || url || repeat || scroll || posição { background: silver url(bgRock.jpg) repeat-y } todos
letter-spacing normal | tamanho

{ letter-spacing:2pt; }


todos
text-decoration none | underline | overline | line-through

é só isso mesmo pessoal,  na proxíma matéria minha sobre CSS: vou falar sobre  Style Sheets.
abraços

compartilhe