Gerador de CSS – Como Fazer o seu CSS

Cascading Style Sheets (CSS) Gerador de CSS
Passo a passo:
Você será guiado passo a passo no Gerador de CSS depois que fizer a seleção no "Passo 1". Após o Passo 2 ou 3 (dependendo de suas seleções) você pode repetir os passos tantas vezes quanto quiser) começando com o "Passo1". Somente Click em "TERMINOU" no botão da parte de baixo quando tiver todas as suas seleções (cabeçalhos, parágrafos, links, etc) que você escolheu no "Passo 1".

iVocê poderá adicionar muitos outros parâmetros de estilos na alternativa "Selecionar Outro?", mas, no começo, limite-se aos parâmetros especificados na lista do "Passo1". Mais abaixo você receberá esta e outras explicações. Você será orientado também a colocar um arquivo separado, com a terminação css que será aplicada em todas as páginas do site.

iObservação: Seja paciente. Você poderá testar todas as alternativas descritas e muitas outras que explicarei depois. Da mesma forma, explicarei como você pode criar uma folha (arquivo) separado de estilos para todo o site.

Step 1:

Step 2:

Cor ou imagem como fundo (background)?: SIM NÃO

Step 4: Escolha uma cor para fundo:
OR
Escreva o URL da imagem que servirá como background:

Copie (Ctrl + c) e cole o código entre suas tags <head></head>.

Para testar seu código CSS no nosso arquivo temporário default.html, clik "TESTE o CSS". Não se aflija se algo der errado – você poderá apagar e começar de novo ou fazer mudanças diretamente no código.

Observações:
1. Onde está escrito "Selecionar Outro" Passo 1 dá a você a oportunidade de variar textos e links na página. Por exemplo, se num determinado lugar você quiser fonte diferente das que ecolheu, os dados podem ser colocados no gerador com um nome qualquer. Digamos que você escolheu chamar esses estilos de item1. Então então você no código que gerou, e onde está escrito escrito "selecionar outro?", apgue e escreva .item1

2. As tags dos estilos são apresentadas em sequência no código que você fez, mas elas devem ser colocadas em linha, com cada uma numa linha, como por exemplo:
H1{color:white;font-size:16pt;font-family:Arial;font-style:bold;background:red;} H2{color:red;font-size:14pt;font-family:Arial;font-style:bold;background:lightsteelblue;} P{color:black;font-size:10pt;font-family:Arial;font-style:none;} A:link{color:darkblue;font-size:10pt;font-family:Arial;font-style:bold;} A:active{color:cornflowerblue;font-size:10pt;font-family:Arial;font-style:bold;} A:visited{color:blueviolet;font-size:10pt;font-family:Arial;font-style:bold;} .item1{color:black;font-size:12pt;font-family:Arial;font-style:none;}
(Para que este exemplo parecesse aqui, foram retiradas as refrências ao estilo, no começo e no fim destas instruções. Quando posicionadas no head elas ficam coloridas.)

3. Observe que a tag P (pode se em letra minúscula também), assim como h1, h2, h3 ...h6 e dos links não são precedidos de um ponto, mas item1 é precedido de um ponto. Toda tag que você adicionar aos seus estilos, devem ser precedidas de um ponto.

4. Não é conveniente fazer estilos css nas páginas. O lugar adequado é uma página com todas as instruções para todas as páginas do site. trata-se de um arquivo com a terminação css. Veja exemplo de arquivo simples com extensão css que chamei estiloteste.css. Na verdade esse arquivo é apenas o conjunto de estilos citados no item 2 acima; em tal circunstância o arquivo css é colocado na raiz da home. Cada página tem um link que remete os robots para o arquivo css. Esse link, colocado dentro do head de cada página, pode ser assim:

5. Os estilos em cascata (css) têm uma grande vantagem que você não precisa ficar repetindo os estilos a d toda hora. Se você definiu, por exemplo, os estilos da fonte dos parágrafos e pretende fazer todos os parágrafos iguais, bastará colocar a tag p ( no começo de cada um e fechar com . Pode também, usar no começo e separar os parágrafos por e fechar com somente no final do texto.

6. Os arquivos css podem ser muito complexos; num mesmo site podem ser dois diferentes um do outro; podem conter quase todas as instruções para as páginas de um site de forma a dispensar o uso de tabelas em todas as páginas.

Se você achou este gerador e as instruções úteis, coloque um link para esta página para que as pessoas que visitam o seu site possam usufruir delas tambem. O link pode ser assim:

<a href="http://www.otimizacao-sites-busca.com/criar-css/" target="_blank" title="Gerador de CSS - Como Fazer o seu CSS">Gerador de CSS - Como Fazer seu CSS</a>