Como criar estilos
Cada estilo que você cria é definido como uma regra CSS. Cada regra deve utilizar a seguinte sintaxe:
- Código:
elemento {atributo1: valor; atributo2: valor ...}
Explicação desta sintaxe:
- Elemento - descreve o elemento de design ao qual o estilo será aplicado. A mesma tag HTML mas sem os sinais de maior e menor. Essa parte da regra é às vezes chamadas de seletor.
- Atributo - o aspecto específico do elemento que você quer usar como estilo. Deve ser um nome de atributo CSS válido, como o atributo font-size.
- Valor - a configuração aplicada ao atributo. Deve ser uma configuração válida para o atributo em questão , como 20pt (20 pontos) para font-size.
- Atributo:valor - a parte declaração da regra. Você pode atribuir múltiplas declarações se desejar separá-los com ponto-e-vírgula (. Não coloque um ponto-e-vírgula depois da última declaração.
Exemplos
Agora é hora de exemplos. Eis uma regra CSS que especifica que todos os títulos de nível 1 (tags <H1>) sejam exibidos em uma fonte de 36 pontos:
- Código:
H1 {font-size: 36pt}
Você pode inserir quebras de linha e espaços em branco dentro da regra como quiser. Assim, é possível ver mais facilmente todas as declarações e certificar-se de que colocou todos os sinais de ponto-e-vírgula e colchetes nos lugares corretos. Por exemplo, aqui está uma regra que diz que os parágrafos aparecerão em fonte Times, 12 pontos, azul e recuados meia polegada a partir da margem esquerda da página:
- Código:
P {font-family: Times;
font-size: 12pt;
color: blue;
margin-left: 0.5in}
As folhas de estilo
Você pode definir regras de CSS em três lugares.
Cada um destes métodos tem um nome e afeta as páginas HTML em seu site de um modo diferente, Explicação:
Estilos externos
Você pode criar um arquivo com um editor de textos simples, como o Notepad do Windows, e dar ao nome desse arquivo a extensão .css.
Sempre que quiser utilizar esses estilos em uma nova página, basta colocar uma tag <LINK> no cabeçalho que referencie esse arquivo .css. exemplo:
Arquivo estilo.css
Para utilizar os estilos definidos neste arquivo .css você precisa adicionar a tag a seguir ao cabeçalho da página, onde nome_do_arquivo é uma referência absoluta ou relativa ao arquivo .css.
- Em um documento separado fora de todos os documentos HTML,
- No cabeçalho de um documento HTML
- Dentro de uma tag de HTML.
Cada um destes métodos tem um nome e afeta as páginas HTML em seu site de um modo diferente, Explicação:
- Externo - Externo significa que você coloca as regras de CSS em um arquivo separado, e então sua página HTML pode fazer um link para esse arquivo. Essa abordagem lhe permite definir regras em um ou mais arquivos que podem ser aplicadas em alguma página do seu web site.
Estilos externos
Você pode criar um arquivo com um editor de textos simples, como o Notepad do Windows, e dar ao nome desse arquivo a extensão .css.
Sempre que quiser utilizar esses estilos em uma nova página, basta colocar uma tag <LINK> no cabeçalho que referencie esse arquivo .css. exemplo:
Arquivo estilo.css
- Código:
H1 {font-family: 'Comic Sans MS';
font-size: 36pt;
color: blue}
P {font-family: 'Courier';
margin-left: 0.5in}
Para utilizar os estilos definidos neste arquivo .css você precisa adicionar a tag a seguir ao cabeçalho da página, onde nome_do_arquivo é uma referência absoluta ou relativa ao arquivo .css.
Entre as tags <HEAD>...</HEAD> e colocar a localização correta do seu arquivo e seu nome.
- Código:
<LINK REL="STYLESHEET" HREF="http://#/estilo.css" TYPE="text/css">
- Incorporado - Incorporado significa que você especifica as regras de CSS no cabeçalho do documento. As regras incorporadas afetam somente a página atual.
Exemplo:
- Código:
<HTML>
<HEAD>
<TITLE>Exemplo Estilos Incorporados</TITLE>
<STYLE TYPE="text/css"><!--
P {background-color: #FFFFFF;
font-family:'Comic Sans MS';
font-size: 14pt}
--></STYLE>
</HEAD>
</BODY>
</HTML>
Inline - Inline significa que você especifica as regras de CSS dentro da tag de HTML. Essas regras afetam somente a tag atual.
Exemplo:
<TAG STYLE="regras css">
- Código:
<A STYLE="color: green; text-decoration: none" HREF="http://#">
Note que em vez das tags <STYLE>...</STYLE>, você apenas utiliza um atributo STYLE dentro da tag para definir o estilo. E, em vez de colocar as regras de CSS entre colchetes, você as coloca entre aspas, separando-as com ponto-e-vírgula como de costume.
Guia de Referência
Parâmetro | Valores Possíveis | Descrição |
font-size | pt, %, in, cm, px | Tamanho da fonte. |
font-family | “fonte_1”, “fonte_2” | Tipos de fonte. |
font-weight | normal, bold | Texto em negrito. |
font-style | normal, italic | Texto em itálico. |
line-height | pt, %, in, cm, px | Distância entre linhas. |
text-decoration | none, underline, overline | Texto sublinhado. |
text-align | left, center, right, justify | Alinhamento do texto. |
text-indent | pt, %, in, cm, px | Indentação de linha. |
vertical-align | sub, super, top | Alinhamento vertical. |
text-transform | capitalize | Primeira letra maiúscula. |
letter-spacing | pt, %, in, cm, px | Espaço entre letras. |
color | cor, #FFFFFF | Cor do texto. |
background-image | imagem | Imagem de fundo. |
background-color | cor | Cor de fundo. |
margin-left | pt, in, cm, px | Margem esquerda. |
margin-right | pt, in, cm, px | Margem direita. |
margin-top | pt, in, cm, px | Margem superior. |
margin-botton | pt, in, cm, px | Margem inferior. |
height | pt, %, in, cm, px | Altura de um elemento. |
width | pt, %, in, cm, px | Largura de um elemento. |
left | pt, %, in, cm, px | Posicionamento esquerda. |
visibility | visible, hidden | Elemento visível ou não. |
Creditos:
50% apostilando