Estilos CSS

• controle total sôbre a apresentação do site a partir de um arquivo central;
• agilização da manutenção e redesign do site;
• saida para diferentes tipos de mídia a partir de uma versão única de HTML;
• redução do tempo de carga dos documentos Web;
• adequação simplificada aos critérios de acessibilidade e usabilidade;
• elaboração de documentos consistentes com as aplicações de usuários futuras;
• aumento considerável na portabilidade dos documentos Web.

p {text-indent:10pt;} é uma regra CSS

p é o seletor.
{text-indent: 10pt} é a declaração CSS.
text-indent - é a propriedade CSS
10pt - é o valor CSS

/* Isto é um comentário CSS */

1. Localizadas todas as regras CSS aplicáveis ao seletor/propriedade, determina-se a especificidade de cada uma delas. A regra mais especifica entre as conflitantes será aplicada.Se não for encontra uma (ou mais) regra aplicável ao elemento HTML, este herdará as propriedades de estilo de seu elemento pai. Não havendo elemento pai será aplicado o valor inicial default de estilo para aquele elemento
2. Regras com declaração importante (! important) tem prioridade sobre aquelas sem a declaração. Se o autor e o usuário declaram regras conflitantes com !important, as do usuário têm prioridade sobre as do autor.
3. Regras com mesmo peso (sem !important) e conflitantes, declaradas pelo autor têm prioridade sobre aquelas declaradas pelo usuário. Regras do usuário com maior especificidade que aquelas do autor têm a prioridade. Regras com igual especificidade declaradas pelo autor têm prioridade sobre as do usuário. Regras do autor e do usuário têm prioridade sobre as regras default das aplicações do usuário (p.ex.: o browser)
4. Regras mais específicas têm a prioridade sobre as menos específicas.
5. Entre regras de mesmo pêso, têm prioridade aquelas declaradas por último na sequência das regras na folha de estilos.Folhas de estilo inline, incorporadas, lincadas e importadas (@import) nesta ordem, têm do maior para o menor pêso (estilos inline têm o maior pêso). Entre várias folhas de estilo lincadas têm maior prioridade aquela importada por último (mais próxima da tag </head>. O mesmo ocorre entre as folhas importadas (@import)

p {
background: #FFFFFF;
color: #000000;
}

Sintaxe de uso:
h3 {
font-size:120% !important;
color: #000000
}
Esta regra aumenta o peso para o
tamanho de letra do elemento h3

p {font-size: 12px;}

O seletor é p (elemento HTML parágrafo) e a regra CSS escrita determina que os parágrafos terão uma fonte de tamanho 12px.

p, ul {text-indent: 10pt;}

Os seletores são p e ul

p { color:#000000;}
.classeb {color: #000000;}
span {color: #000000;} 

Os seletores p .classeb e span so
em letras na cor preta.
então podemos agrupá-los assim:

p, .classeb, span { color:#000000;}
Notar que seletores agrupados devem ser
separados por vírgula

.minhaclasse {color: #FF0000;}
O nome da classe você atribui ("inventa")
seguindo umas regrinhas que veremos adiante.

A classe denominada minhaclasse define a cor vermelha (#FF0000) para as letras do elemento onde ela for aplicada. Notar que um seletor do tipo classe tem em sua sintaxe um . (ponto) antes do nome da classe.

<p class="minhaclasse">
Aqui o texto do parágrafo..bla...bla...
</p>

<h3 class="minhaclasse">
Aqui o texto do cabeçalho...
</h3>

Acima tanto o parágrafo como o cabeçalho
serão na cor vermelha.

E aqui umas regrinhas para escolha do nome da classe e sua sintaxe:

Repito e enfatizo que você deve colocar um . (ponto) imediatamente antes do nome da classe. O nome da classe poderá ser composto por letras de a-z, ou A-Z, números de 0-9, underscore, hífen, caracter de escape, caracter Unicode (161-255), bem como qualquer caracter Unicode numérico.

Nomes de classe no podem começar com traço ou número.

É de boa norma (não obrigatório) escolher-se o nome da classe pela sua função e não pela sua aparência. Por exemplo: .cor_rodape é preferivel a .rodape_verde Se no futuro você resolve mudar a cor no rodapé de verde para vermelho vai ficar esquisito não é?

Segundo CSS1 apenas uma classe pode ser atribuída a um seletor. CSS2 permite que você atribua mais de uma classe a um seletor.

p:fist-line { font-size:160%;}
h3:first-letter { color:#000000;}
pseudo-elementos so separados dos
seletores por : dois-pontos como mostrado
acima

Os pseudo-elementos em CSS1 são os dois mostrados no exemplo acima:

:first-line que estiliza a primeira linha de uma frase.

:first-letter que estiliza a primeira letra de uma palavra.

Em CSS2 temos ainda os pseudo-elementos :before e : after

Pseudos elementos podem ser combinados com classes. Observe abaixo:

p .generica:first-letter {
font-style: italic;
}
Nesta regra CSS a primeira letra dos
parágrafos que pertencem a classe generica,
será em itálico.