Referencia CSS

- DEFININDO FAMILIA DE FONTES e FONTES A SEREM

UTILIZADAS
Ordem de preferncia.
body {
font-family: "Arial", "Helvetica", sans-serif;
}

- ALINHAMENTO E DECORAO DE TEXTO

text-align: right; /* alinhamento do texto*/
line-height: 3px; /* tamanho da altura de cada linha */
letter-spacing: 3px; /* tamanho do espao entre cada letra */
word-spacing: 5px; /* tamanho do espao entre cada palavra */
text-indent: 30px; /* tamanho da margem da primeira linha do texto */

- IMAGEM DE FUNDO
background-image: url(sobre-background.jpg);

- BORDAS
border-color: red;
border-style: solid;
border-width: 1px;

Para que o efeito da cor sobre a borda surta efeito, necessrio que a
propriedade border-style tenha qualquer valor diferente do padro
none.
- ESPAAMENTO E MARGEM
Utilizamos a propriedade padding para espaamento e margin para
margem. Vejamos cada uma e comoelas diferem entre si.

padding-top: 10px;
padding-right
padding-bottom
padding-left

margin-top
margin-right
margin-bottom
margin-left

margin: 0 auto; /* define a margem de acordo com o espao disponvel. */

- ALINHAMENTO

float: right;

- DIMENSES
height: 300px;
width: 300px;

- SELETOR DE ID
possvel aplicar propriedades visuais a um elemento selecionado
pelo valor de seu atributo id. Para isso, o seletor deve iniciar com o
caractere # seguido do valor correspondente.
#ID {
color: white;
text-align: center;
}

Podemos ainda utilizar um seletor hierrquico que permite aplicar

estilos aos elementos lhos de um elemento pai:
#rodape img {
margin-right: 35px;
vertical-align: middle;
width: 94px;
}

CSS Reset
Existem algumas op es para resetar os valores do CSS. Algumas
que merecem destaque hoje so as seguintes:
HTML5 Boilerplate
O HTML5 Boilerplate um projeto que pretende fornecer um
excelente ponto de partida para quem pretende desenvolver um novo
projeto com HTML5. Uma srie de tcnicas para aumentar a
compatibilidade da nova tecnologia com navegadores um pouco mais
antigos esto presentes e o cdigo totalmente gratuito. Em seu
arquivo style.css, esto reunidas diversas tcnicas de CSS Reset.
Apesar de consistentes, algumas dessas tcnicas so um pouco
complexas, mas um ponto de partida que podemos considerar.
YUI3 CSS Reset
Criado pelos desenvolvedores front-end do Yahoo!, uma das
referncias na rea, esse CSS Reset composto de 3 arquivos
distintos. O primeiro deles, chamado de Reset, simplesmente muda
todos os valores possveis para um valor padro, onde at mesmo as
tags <h1> e <small> passam a ser exibidas com o mesmo tamanho.

O segundo arquivo chamado de Base, onde algumas margens e

dimenses dos elementos so padronizadas. O terceiro chamado de
Font, onde o tamanho dos tipos denido para que tenhamos um
visual consistente inclusive em diversos dispositivos mveis.
Eric Meyer CSS Reset
H tambm o famoso CSS Reset de Eric Meyer, que pode ser obtido
em http://meyerweb.com/eric/tools/css/reset/. apenas um arquivo
com tamanho bem reduzido.
Position: Manipulando posies
static
Sua posio dada automaticamente pelo fluxo da pgina: por
padro ele renderizado logo aps seus irmos.
No aceita um posicionamento manual (left, right, top, bottom)
O tamanho do seu elemento pai leva em conta o tamanho do
elemento static
relative
Por padro o elemento ser renderizado da mesma maneira que o
static
Aceita posicionamento manual
O tamanho do seu elemento pai leva em conta o tamanho do
elemento relative, porm sem levar em conta seu posicionamento. O
pai no sofreria altera es mesmo se o elemento fosse static.
fixed
Uma configurao de posicionamento vertical (left ou right) e uma
horizontal (top ou bottom) obrigatria
O elemento ser renderizado na pgina na posio indicada: mesmo
que ocorra uma rolagem oelemento permanecer no mesmo lugar
Seu tamanho no conta para calcular o tamanho do elemento pai,
como se no fosse elemento filho
absolute
Uma configurao de posicionamento vertical (left ou right) e uma
horizontal (top ou bottom) obrigatria
O elemento ser renderizado na posio indicada, porm relativa ao
primeiro elemento pai cujo position seja diferente de static ou, se no
existir este pai, relativa pgina
Seu tamanho no conta para calcular o tamanho do elemento pai.