Intercionalização

1. Apresentar as técnicas básicas para disponibilizar o conteúdo em um formato internacional

A internacionalização é a criação e o desenvolvimento de um produto, aplicação ou conteúdo de um documento que permite a localização fácil para públicos-alvo que variam em cultura, região ou idioma.
No inglês, "internacionalização" (internationalization) é, geralmente, referenciada como i18n, onde 18 é o número de letras entre o I e o N. Aplicando-se a mesma regra ao português, internacionalização pode ser escrita i17o.
A internacionalização geralmente implica em:

• Concepção e desenvolvimento de uma forma que remova as barreiras para a localização ou implantação internacional. Isso inclui muitos assuntos, como: a utilização do Unicode, asseguração do tratamento adequado de caracteres, caso necessário, o cuidado com a concatenação de strings, a independência do código nos valores de strings de interfaces gráficas etc..
• Fornecimento de suporte a recursos que podem não ser utilizados até que a internacionalização ocorra, por exemplo: adicionando uma marcação em sua DTD para suportar textos bidirecionais ou para identificar o idioma, ou adicionando suporte CSS para textos verticais e caracteres não latinos.
• Inclusão de suporte às preferências locais, regionais, culturais ou de idiomas. Normalmente, isso envolve a inserção pré-definida de dados de localização e recursos derivados de bibliotecas disponíveis ou de preferências do usuário. Exemplos incluem: formatos de data e hora, calendários locais, formatos de números e sistemas numéricos, classificação e apresentação de listas, manipulação de nomes pessoais, formas de endereço etc..
• Separação de elementos localizáveis a partir do código-fonte ou do conteúdo, de tal forma que as alternativas localizadas possam ser carregadas ou selecionadas baseando-se nas preferências internacionais do usuário, conforme necessário.

Observe que esses itens não incluem, necessariamente, a localização do conteúdo, aplicação ou produto para outro idioma; são práticas de desenvolvimento que permitem que tal migração ocorra facilmente no futuro, no entanto, que podem ter utilidade significativa mesmo que nenhuma localização ocorra.

Codificação

Use o Unicode sempre que possível para conteúdo, bases de dados, etc. Sempre declare a codificação do conteúdo.
A codificação de caracteres que você escolhe determina a maneira como os bytes são mapeados para caracteres em seu texto.
O Unicode permite que você trabalhe de forma simples com quase todos os scripts e idiomas em uso em todo o mundo. Deste modo, o Unicode simplifica a manipulação de conteúdo em vários idiomas dentro de uma única página ou entre um ou mais sites. O Unicode é especialmente útil quando usado em formulários, scripts e bases de dados, onde você muitas vezes precisa oferecer suporte a vários idiomas. O Unicode também facilita muito a adição de novos idiomas ao seu conteúdo.

Escapes 

Use caracteres em vez de escapes (exemplo á á ou á) sempre que possível.
Escapes como Referências de Caracteres Numéricos (Numeric Character References - NCRs), e entidades são maneiras de representar qualquer caractere Unicode na marcação usando apenas caracteres ASCII. Por exemplo, você pode representar o caractere á em X/HTML como á ou á ou á.
Esses escapes são úteis para representar claramente caracteres ambíguos ou invisíveis, e para evitar problemas com caracteres de sintaxe, como E comercial e sinais de maior e de menor. Eles também podem ser úteis algumas vezes para representar caracteres que não são suportados pela codificação de caracteres em uso ou que não estão disponíveis no teclado. Em outros casos, você sempre deve usar caracteres em vez de escapes.

Apresentação vs. conteúdo

Use folhas de estilo para informações de apresentação. Limite a marcação para a semântica.
Um princípio importante de web design é manter o estilo ou a apresentação do conteúdo separados do texto verdadeiro. Isso facilita a aplicação de um estilo alternativo ao mesmo texto, por exemplo, para exibir o mesmo conteúdo em um browser convencional e em um dispositivo manual pequeno.
Este princípio é especialmente útil para localização, pois scripts diferentes têm necessidades tipográficas distintas. Por exemplo, devido à complexidade dos caracteres japoneses, pode ser preferível mostrar ênfase em páginas X/HTML em japonês de outras maneiras, em vez de usar o negrito e o itálico. Será muito mais simples aplicar essas alterações se a apresentação for descrita usando CSS, e a marcação será muito mais limpa e manejável se o texto for classificado de modo correto e claro como 'enfatizado' em vez de apenas 'negrito'.
Você pode economizar um tempo e um esforço considerável durante a localização se trabalhar com arquivos CSS em vez de ter de alterar a marcação, pois qualquer alteração necessária poderá ser feita em um único local para todas as páginas, e o tradutor poderá se focar no conteúdo e não na apresentação.

Formulários 

Use uma codificação adequada no formulário e no servidor. Ofereça suporte para formatos locais de nomes/endereços, horários/datas, etc.
A codificação usada para uma página HTML que contém um formulário deve suportar todos os caracteres necessários para inserir dados no formulário. Isso é especialmente importante se for possível que os usuários adicionem informações em vários idiomas.
As bases de dados e os scripts que recebem dados de formulários em páginas com vários idiomas também devem ser capazes de suportar os caracteres para todos esses idiomas simultaneamente.
A maneira mais simples de permitir que isso aconteça é utilizar o Unicode para ambas as páginas que contêm os formulários e todos os processos e armazenagem de retaguarda. Nesta situação, o usuário poderá inserir dados em qualquer idioma e script que precisar.

Navegação

Em cada página, inclua uma opção de navegação bem visível para localizar páginas ou sites, usando o idioma de destino.
Quando você tiver versões de uma página ou site em um idioma diferente, ou para um país ou região diferentes, você deve fornecer uma maneira para que o usuário visualize a versão que ele prefere. Essa opção deve ficar disponível em qualquer página de seu site onde houver essa alternativa.

Texto da direita para a esquerda.

Para XHTML, adicione dir="rtl" à tag html. Apenas use novamente para alterar a direção básica.
Textos em idiomas como árabe, hebraico, persa e urdu são lidos da direita para a esquerda. Essa direção de leitura geralmente resulta em textos alinhados à direita e em imagens espelhadas de layout de página e de tabelas, por exemplo. Você pode configurar o alinhamento padrão e a disposição do conteúdo da página da direita para a esquerda simplesmente incluindo dir="rtl" na tag html.
A direção configurada na tag html estabelece uma direção básica para o documento que é atribuída a todos os elementos na página. Não é necessário repetir o atributo em elementos menores a menos que você queira especificamente alterar o fluxo direcional.

Microformatos

1. Definição de Web Semântica

O termo “Web Semântica” refere-se à visão do W3C da Web dos Dados Linkados. A Web Semântica dá às pessoas a capacidade de criarem repositórios de dados na Web, construírem vocabulários e escreverem regras para interoperarem com esses dados. A linguagem de dados é possível com tecnologias como RDF, SPARQL, OWL, SKOS.
A Web Semântica congrega um conjunto de tecnologias que visam proporcionar significado aos dados publicados na web, permitindo que as máquinas possam processá-los de forma mais efetiva, levando-se em consideração a semântica presente, para executar tarefas mais sofisticadas.

2. Definição de Microformatos

Os microformatos são conceituados de acordo com MICROFORMATS.ORG como um conjunto simples de dados formatados abertos: Projetado primeiro para seres humanos e máquinas em segundo lugar, microformatos são um conjunto simples de dados formatados abertos construídos sobre as normas existentes e amplamente adotadas. Em vez de jogar fora o que funciona hoje, microformatos pretendem resolver os problemas mais simples primeiro, adaptando-se os comportamentos atuais e padrões de uso (por exemplo, XHTML, blogs). Com o intuito de ampliar a compreensão acerca do conceito de microformatos, a comunidade afirma que os microformatos são:
- Uma maneira de pensar sobre os dados.
- Princípios de concepção de formatos.
- Adaptado a comportamentos atuais e padrões de uso.
- Altamente correlacionada com XHTML semântico, AKA the real world semantics, AKA lowercasesemantic web, AKA lossless XHTML.
- Um conjunto de padrões simples de dados abertos formatos que estão ativamente em desenvolvimento e implementação para mais/melhores blog´s estruturados e publicação de microconteúdo web em geral.
- "Uma revolução evolutiva"

3. Definição dos microformatos hCard e hCalendar

O microformato hCard é utilizado para fazer a anotação de endereços de pessoas e companhias, tendo como base o padrão vCard de dados pessoais. É identificado pela classe raiz vCard, e é composto pelas seguintes propriedades principais:

O microformato hCard baseia-se no padrão vCard de publicação eletrônica de dados pessoais para implementar anotação semântica sobre estes dados na Internet. Diversas aplicações estão disponíveis para a geração de código hCard a partir de dados fornecidos pelo usuário. Outras também são capazes de identificar microformatos disponíveis em páginas da Web e fazer uso deles, como adicionar contatos em uma agenda.
O microformato hCalendar ocupa-se da anotação semântica de dados relativos a eventos e compromissos. Baseia-se no padrão de troca eletrônica de dados iCalendar e possui, como classe raiz a classe v Calendar evEvent, esta última representando um evento do tipo hCalendar. O microformato é composto pelas seguintes propriedades principais:

4. Aplicar microformats para marcação de contato (hCard), e informações sobre evento (hCalendar).

Vê-se a seguir um exemplo de implementação de um hCard, extraído de Microformats.org : 

Utilizando o site http://microformats.org/code/hcard/creator você pode ter o código para utilizar no seu site, como o exemplo abaixo:

Vê-se a seguir um exemplo de implementação de um hCalendar, extraído de Microformats.org: 

Utilizando o site http://microformats.org/code/hcalendar/creator você pode ter o código para utilizar no seu site, como o exemplo abaixo:

5. Passo a passo: Como utilizar uma ferramenta de tradução microformats para criar um link que permita o usuários baixar ou mover o conteúdo para outro local (por exemplo, traduzir hCard para vCard para download em um programa de catálogo de endereços).

H2VX é uma ferramenta que permite a realização de download de uma lista de contatos e tradução a tradução desta para vCard(.vcf) e para iCalendar(.ics).
A ferramenta H2VX é uma implementação do X2V que é uma implementação open source de microformatos XSLT criada por Brian Suda, X2V traduz os eventos hCard ou hCalendar em seus correspondentes .vcf ou .ics. Para utilizar o H2VX é necessário realizar os seguintes passos:

- Acesse a página http://h2vx.com/
- Selecione o primeiro link: Contact Conversion Service - http://h2vx.com/vcf/ -.
- No campo "Web Adress" insira sua URL
- Se desejar fazer o download do contato diretamente clique no botão download.

Agora se você criar um contato utilizando hCard é quiser que este contato seja baixado para máquina do usuário em um formato .vcf, para que ele possa adicionar ao seu catálogo de endereços, para criar um link para link para o serviço de conversão H2VX, assim:

<a href = "http://h2vx.com/vcf/YOURURLHERE" > Download vCard </ a>

Tutorial CSS

1. Passo a passo como gerar uma versão para impressão e outra para visualização de uma mesma página HTML.

Às vezes necessitamos que nossa página se imprima em uma impressora de maneira diferente de como se visualiza na página web. Por exemplo, se em uma página mostra-se um informe com dados que se deseja guardar impresso em papel, provavelmente desejaremos que na impressora se mostre com uma fonte menor, para que se possa comprimir todo o conteúdo de forma que caiba em uma folha. Também é possível que desejemos que apareça nos informes o logo da companhia centralizado no cabeçalho do informe.
Tudo isto pode ser feito com CSS. As Folhas de Estilo em Cascata servem para definir o aspecto da página, e estes estilos podem ser declarados de maneira distinta na hora de imprimir um documento e na hora de vê-lo no navegador.
Com CSS pode-se definir estilos em um documento externo, desta maneira:

<link href="estilos.css" rel="stylesheet" type="text/css"> 

Com isto supomos que temos um arquivo chamado estilos.css, que está no mesmo diretório da página, onde se definem os estilos do documento.
De modo parecido, podemos atribuir uma folha de estilos externa para definir o aspecto quando um usuário imprime a página web:

<link href="estilos_impressao.css" rel="stylesheet" type="text/css" media="print"> 

O único que muda é o atributo media="print", que indica que esta folha de estilos é só para quando vai se imprimir a web.
Temos um HTML que inclui duas folhas de estilos e dispõe de várias camadas.




Como pode ser visto no HTML anterior, foram incluídos dois arquivos CSS com estilos. O primeiro é estilo.css, que é o estilo que se utilizará ao visualizar a página no navegador. O segundo link com uma folha de estilos CSS é estilo_imprimir.css, que definirá o aspecto da página ao imprimi-la (observe o atributo media="print" da etiqueta).
Os códigos CSS são muito parecidos, simplesmente fizemos duas mudanças para ilustrar o que vínhamos dizendo. Na visualização da página não se mostrará a camada com id="logo". Por sua parte, ao imprimir a página não se mostrará a barra de navegação da esquerda e os conteúdos centrais se mostrarão em toda a largura do espaço de impressão. Também não se mostrará a camada id="cabecalho".

O código CSS de visualização no navegador 

O código CSS que se utilizará para a impressão da página 

CSS Avançado

1. Efeito cascata.

O uso das folhas de estilo para controlar o "visual" de um documento HTML, não raro resulta em regras CSS distintas, aplicáveis a um mesmo elemento no documento. Ou seja, está estabelecido um conflito entre regras. Qual das regras vai prevalecer?

Aqui entra o efeito cascata, que nada mais é, do que o estabelecimento de uma prioridade para aplicação da regra de estilo ao elemento.
Para determinar a prioridade são considerados diversos fatores, entre eles, o tipo de folha de estilo, o local físico da folha de estilo no seu todo, o local físico da regra de estilo na folha de estilo e a especificidade da regra de estilo.
A prioridade para o efeito cascata em ordem crescente é a seguinte:

1. folha de estilo padrão do navegador do usuário;
2. folha de estilo do usuário;
3. folha de estilo do desenvolvedor;
           a. estilo externo (importado ou linkado).
           b. estilo incorporado (definido na seção head do documento);
           c. estilo inline (dentro de um elemento HTML);
4. declarações do desenvolvedor com !important;
5. declarações do usuário com !important;

Assim, uma declaração de estilo com !important definido pelo usuário prevalece sobre todas as demais, é a de mais alta prioridade. Entre as folhas de estilo definidas pelo desenvolvedor do site, os estilos inline (dentro de um elemento HTML) tem a prioridade mais elevada, isto é, prevalecerá sobre a folha de estilo definida na seção head, e, esta prevalecerá sobre uma folha de estilo externa. A prioridade mais baixa é para estilos padrão do navegador.

2. Como herança e especificidade afetam as regras CSS.

Herança

Existem algumas propriedades do CSS que quando aplicadas aos “elementos pais”, os “elementos filhos” herdam a característica aplicada no pai. Um exemplo disso é a propriedade color. Quando aplicamos a propriedade color em um elemento div, o texto dos elementos contidos no div são coloridos de acordo com a propriedade.

div { color: green;}

O texto que há dentro deste div irá ter a cor verde, independente se este texto está “solto” dentro do div ou se ele está dentro de um parágrafo, por exemplo. Ou seja, os filhos herdaram o resultado desta propriedade. A mesma coisa acontece para, por exemplo, a propriedade font-size.
Há também as propriedades não herdadas pelos “filhos”. Estas propriedades geralmente são propriedades referentes a formatação da caixa, como por exemplo a propriedade width, height, margin, padding e assim por diante.
Essa herança é responsável por uma parte da cascata. É aí que está uma das primeiras vantagens de se utilizar o CSS no desenvolvimento com padrões. A vantagem da herança é exatamente podermos modificar poucas linhas do CSS para fazer alterações no site inteiro, sem ter que caçar elemento por elemento e modificando suas propriedades.
A herança é largamente utilizada em frameworks de CSS ou até mesmo em técnicas para que a customização de layouts seja explorada de forma automática ou manual pelo cliente, como homes de portais, e-commerce etc. Assim, o controle fica mais genérico, e é aí que entra a especificidade do CSS para controlar o detalhe.

Especificidade

A especificidade define os detalhes. Quando você define no body as propriedades font-family, font-size, essas propriedades são herdadas por toda árvore de elementos do documento. Isso trás uma uniformidade para o texto, mas nem todos os elementos terão esse valor genérico de font, logo você terá que ser mais específico e definir valores diferentes de font para estes elementos. 

Suponha que você tenha o seguinte código:

Definimos no código acima que os elementos em terão o background vermelho. Isso irá capturar os 4 elementos em que colocamos no HTML. Ele irá capturar todos os elementos em, não importa onde ele esteja. Vamos analisar outro código CSS:






Já mudamos toda a história com este seletor. Queremos dizer que apenas os em que estão dentro de p e que por sua vez estão dentro de um div terão o background verde. Deixamos a regra mais específica excluindo todos os elementos em que estão fora do div. Os em que estão fora do div continuam com o background vermelho.
No caso acima, a ordem não altera o resultado da renderização. O seletor mais específico sempre é o que vai funcionar.

3. Diferenças entre o uso de link e @ import

Existem 2 formas de carregar folhas de estilo no HTML. As duas funcionam de formas diferentes, mas ambas com o mesmo objetivo, carregar um arquivo CSS e dar cor e forma ao nosso conteúdo.

<link /> - Se trata da tag que os padrões web indicam que deve ser utilizada entre as tags <head> </head>, essa tag indica uma relação com um arquivo externo. Com ele indicamos os arquivos RSS, favicons e os arquivos CSS. Em conjunto com o atributo rel, e posteriormente o atributo href, indicamos o caminho do arquivo relacionado com o arquivo HTML. Vale lembrar também a utilização do atributo media que indica a que dispositivo é destinado o arquivo.
<link rel="stylesheet" href="a.css" media="screen" />


@import - Trata-se de uma funcionalidade no CSS que nos permite carregar um arquivo CSS a partir de um arquivo CSS. É igual ao anterior, onde podemos indicar a rota e que tipo de dispositivo irá utilizar esse arquivo CSS.
Essa funcionalidade omite o atributo rel, pois deve ser chamada a partir da tag <style> ou a partir de um arquivo CSS, entendendo que trata-se de um arquivo CSS.
style type="text/css"&gt;
@import url("a.css") screen;
&lt;/style&gt;

Qual opção utilizar?
Steve Souders publicou um interessante artigo, mostra através de testes todas as opções disponíveis e nos ensina a melhorar o rendimento de nossas páginas com a utilização de <link />
Sem dúvida é a melhor opção, pois em todos os browsers ocorre o carregamento de forma simultânea dos arquivos CSS.

Propriedades CSS

1. Bordas

2. Margens

3. Cores e Fundo

4. Fontes Tipográficas

5. Texto

6. Modelo de Formatação Visual

7. Listas

Os valores que estão em negrito são utilizados como padrão.

Visão Geral CSS

1.   O que é CSS – benefícios de utilização

O CSS formata a informação entregue pelo HTML. Essa informação pode ser qualquer coisa: imagem, texto, vídeo, áudio ou qualquer outro elemento criado. Essa formatação na maioria das vezes é visual, mas não necessariamente. Ou seja, CSS é um arquivo que contém especificações de como devem ser exibidos (estilizados) os elementos das páginas de um website, ou seja, tags HTML.
Ao utilizar o CSS temos os seguintes benefícios:
- SEPARAÇÃO DAS CAMADAS DE DESENVOLVIMENTO: Enquanto a camada de conteúdo vai sendo codificada em HTML, a camada de apresentação, por sua vez, vai sendo feita de forma separada e totalmente independente, via CSS.
- WEBSITES MAIS LEVES: Pelo fato de se utilizar a separação em camadas (e, consequentemente, a apresentação das páginas ficar especificada em um arquivo à parte), a largura de banda fica reduzida, e isso acarreta em diminuição de custos.
Via CSS, é possível criar efeitos sofisticados/arrojados, anteriormente só alcançados com a utilização de tecnologias como Java e Javascript , que são mais “pesadas”.
- CONTROLE TOTAL SOBRE O LAYOUT: Quando se utiliza as folhas de estilo para a estruturação de layouts um menu pode ser deslocado de um lado para outro da página com a mesma rapidez que se altera a cor de todos seus textos: poucos minutos. Assim a manutenção é muito mais fácil.
- DIFERENTES ESTILOS PARA DIFERENTES MÍDIAS: Com as folhas de estilo é possível especificar estilos (aparências) diferenciados para diversos tipos de mídia, tais como o monitor, webTV, handheld, dispositivos braile, dentre outros. Além disso, utilizando determinadas técnicas CSS, pode-se fazer um site cujo layout seja adaptável a qualquer resolução de tela, terminando com o clássico problema de reprodução de páginas para diferentes resoluções e controle destas via scripts incorporados.
E mais: mesmo que alguém esteja navegando com a exibição de estilos e/ou imagens desativada, ou mesmo através de browsers com suporte a somente textos (tais como o Lynx), o conteúdo do site, na íntegra, pode ser visualizado.

2.   Formas de utilização (externo, embutido, inline)

CSS Inline - Para se inserir um CSS inline, devemos colocar as declarações como se fossem valores da propriedade HTML “style”. Exemplo:

<p style="background-color: #36F; color: #FFF; width: 150px;">CSS!</p>
Pôde-se perceber o motivo pelo qual esse tipo de CSS não é o mais usado: não há tanta flexibilidade para a realização de alterações, haja vista que a regra aplica-se somente ao elemento que recebeu a estilização.
CSS Embutido - Para esse tipo de CSS, as regras são colocadas no próprio documento, na tag “head”. Sua abrangência é tão-somente a própria página em que estão inseridas, ou seja, possui um grau mediano de flexibilidade, já que potenciais alterações aplicar-se-ão ao documento atual, e a nenhum outro. A sintaxe é a seguinte:
<head>
    <style type=“text/css”> [regras CSS] </style>
</head>
CSS Externo - Esse é o tipo de inserção de CSS mais usado. Nessa modalidade, as regras CSS são escritas em um arquivo à parte do HTML e “chamados” para as estilizações.
Já que todos os documentos HTML de seu website estarão chamando a mesma folha de estilos, se precisar fazer alguma alteração em CSS, basta editar seu arquivo que, na mesma hora, as mudanças se aplicarão ao site por completo. Basta colocar o seguinte, na tag “head” dos documentos:
<link rel="stylesheet" type="text/css" href="nomeDaSuaFolhaDeEstilos.css" />

3.   Tipos de Seletores (elemento HTML, Id ou Classe)

O seletor representa uma estrutura. Essa estrutura é usada como uma condição para determinar quais elementos de um grupo de elementos serão formatados.
Segundo o que consta na documentação oficial do W3C “Folhas de Estilo CSS, nível 1”, de 17 de dezembro de 1996, revisada em 11 de janeiro de 1999, “uma regra é composta de duas partes principais: um selector (sic) [...] e uma declaração [...]. Por sua vez, esta declaração também possui duas partes: uma propriedade [...] e seu valor [...]”.
Ou seja, ao se codificar as folhas de estilo em cascata se está falando, tecnicamente, em manipulação de regras. E estas regras, por sua vez, são compostas por 3 partes: seletor, propriedade e valor.
Portanto, a sintaxe genérica de uma declaração CSS simples é a seguinte:
seletor { propriedade: valor; }
Na qual:
- seletor representa, em um primeiro momento, as tags (X)HTML, tais como parágrafos (p) e títulos primários (h1), e, em um segundo momento, divs, spans, ids, classes e pseudo-elementos.
- propriedade assumindo “parâmetros” que podem ser controlados através das folhas de estilo, ou, praticamente falando, o atributo do seletor que será modificado.
- valor como, nas palavras de Maurício Samy Silva, o Maujor, a “característica específica a ser assumida pela propriedade”.

Seletores ID e Classe

Há duas propriedades que elevam bastante as potencialidades das folhas de estilo: classe (class) e identificador (id). Elas permitem que você aproveite mais o que as folhas de estilo têm a oferecer.
Id - Os seletores ID são representados por uma tralha (#). Sua função é estilizar um elemento que tenha um nome em especial, e atente-se à expressão “um elemento”, pois não pode haver IDs com nomes iguais numa mesma página, ou seja, um ID deve ser exclusivo, individual, singular, ou quaisquer outras expressões redundantes que indiquem seu caráter único em um documento.
Veja um exemplo de seletor ID:
#paragrafoDestaque {
             color: #F00;
             font-size: 120%;
}
Portanto, em uma página (ou conjunto de páginas) que receberá(ão) esta estilização, poderá haver somente um “parágrafo destaque”, e seria algo como:
<p id=“paragrafoDestaque”>Este &eacute; um texto com destaque!</p>
Perceba que, na hora de especificar a qual ID um elemento pertence, não é necessário incluir a tralha (#), basta colocar seu nome.
Classe - Diferentemente dos IDs, as classes podem ser atribuídas a elementos diferentes na(s) página(s) de um website.
Pode-se, por exemplo, especificar que haverá dois tipos de parágrafo em seu website: um com a fonte de uma cor vermelha e família de fontes com serifa e outro com a fonte de uma cor verde e família de fontes sem serifa. Para facilitar o entendimento, vou apresentar um exemplo:
p.vermelho {
         color: #F00;
         font-family: serif;
}
p.verde {
         color: #0F0;
         font-family: sans-serif;
}

4.   Sintaxe:

§ Comentário

Para facilitar o entendimento futuro de um código que está sendo escrito, é possível que se comente suas folhas de estilo, ou seja, você pode, nos pontos que achar conveniente, digitar textos, para si mesmo ou outras pessoas, com explicações, conceitos, ideia, planos de implementação futura, trechos de código que precisem ser isolados para testes, ou qualquer outra coisa que quiser.
E, ao fazer isso, suas estilizações não serão prejudicadas, já que quando algum tipo de mídia interpreta um arquivo.css, “desconsidera” o que está comentado, quer dizer, não toma aquele trecho como se fosse alguma intenção de declarar uma regra, ou algo do tipo.
Os comentários, em CSS, vêm envoltos entre o par de caracteres barra-asterisco
(“/*”), asterisco-barra (“*/”).
Isto quer dizer que tudo aquilo que estiver entre este par de caracteres não será interpretado na hora da “montagem” das estilizações.
h2 { font-size: 120%; }
/* estou fazendo um comentário em meu arquivo CSS,
e ele pode, inclusive, ter quantas linhas eu quiser */
p { color: #FF0; }

§ Regras CSS

Agrupamento - Pode ser que você queira especificar as mesmas propriedades para seletores diferentes. Neste caso, é possível que você o faça declarando tão-somente uma regra, separando os seletores por vírgula (“,”). Se, por exemplo, quiser que os textos dos parágrafos e os títulos secundário e terciário sejam de uma cor vermelha, poderia usar o seguinte:

p, h2, h3 { color: #F00;}

Efeito Cascata - Quando temos um documento com várias regras CSS, acontece de determinadas regras terem um “peso” a mais, em detrimento de outras; serem mais específicas ou, como dizem alguns, mais importantes. E, no momento de interpretar um código CSS, o renderizador deve saber qual é o peso de cada declaração, e como as regras se inter-relacionam entre si.
Há uma ordem pré-estabelecida para o “efeito cascata”, que é a seguinte:
1. Localizadas todas as regras 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 encontrada 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 (ex.: o browser)
4. Regras mais específicas têm a prioridade sobre as menos específicas
5. Entre regras de mesmo peso, têm prioridade aquelas declaradas por último na sequência das regras na folha de estilos.
6. Folhas de estilo inline, incorporadas, lincadas e importadas (@import), nesta ordem, têm do maior para o menor peso (estilos inline têm o maior peso). 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).
Herança - Um outro significado para “cascata”, na significação de CSS (“folha de estilo em cascata”), seria herança.
Em CSS, os seletores são tratados como membros de uma família hierarquicamente organizada. Há pais, filhos, netos, irmãos, etc. Mais ou menos como na “vida real”, os descendentes herdam os atributos de seus ascendentes.
Observe o seguinte trecho de código HTML:
<body>
<p> Este &eacute; o nosso mundo, o que &eacute; demais nunca &eacute; o bastante, <br/> A primeira vez: sempre a &uacute;ltima chance, <br/> Ningu&eacute;m v&ecirc; onde chegamos: <br/> <strong> Os assassinos est&atilde;o livres, n&oacute;s n&atilde;o estamos </strong> </p>
</body>
De acordo com a “metodologia CSS”, pelo fato de a tag strong estar “dentro” da tag p, ela é sua descendente direta, sua filha (ou filho, se preferir); por sua vez, a tag p é filha de body (conseqüentemente, strong é neta de body). Logo, temos a seguinte hierarquia nas gerações desta família: body -> p -> strong.
Pelo que foi exposto a pouco, se você especificar que body terá suas letras de uma cor azul e pertencer a uma família de fontes serifadas, automaticamente estará especificando que sua filha, p, e sua neta, strong, terão a mesma cor e serifa.
Os descendentes herdam os atributos de seus respectivos ascendentes.

5.   Unidades

§ Relativas (px, em, ex)
§ Absolutas (in, cm, mm, pt, pc)
§ Porcentagem

O formato de uma unidade de medida é constituído por um sinal positivo ou negativo opcional ('+' ou '-', sendo o padrão '+') seguido imediatamente por um número (com ou sem ponto decimal - não use vírgulas), com todo o conjunto imediatamente seguido por um identificador de unidade (um código com duas letras). Este identificador é opcional caso o número seja '0'.
Existem dois tipos de unidades de comprimento: as relativas e as absolutas. As relativas especificam um número em relação a algum outro. O uso de unidades relativas facilita o redimensionamento da exibição do elemento quando ocorre mudança de mídia de exibição (por exemplo, de um monitor para uma impressora). O emprego de unidades percentuais e palavras-chave (por exemplo, 'x-large') oferecem vantagens similares.
Estas unidades relativas são suportadas:
px – tamanho em pixels (relativo ao dispositivo)
em – tamanho relativo à fonte utilizada no elemento ao qual está inserido
ex – correspondente à altura da fonte ‘x’
As unidades relativas 'em' e 'ex' tomam como base o tamanho da fonte do próprio elemento. A única exceção a esta regra é a propriedade 'font-size', onde estas unidades são relativas ao tamanho da fonte do elemento pai.
A unidade 'px', pixel, usada no exemplo acima, é função da resolução da área de exibição, normalmente um monitor.
O emprego de valores absolutos é conveniente apenas quando as dimensões físicas da mídia de saída são bem conhecidas. As seguintes unidades são aceitas:
in – polegadas (1 polegada = 2,54 cm)
cm – centímetros
mm – milímetros
pt – pontos (1pt = 1/72 polegadas)
pc – picas (1 pica = 12 pontos)
O formato de um valor percentual é composto de caractere de sinal (positivo ou negativo, '+' ou '-', sendo '+' o padrão) seguido imediatamente por um número (com ou sem ponto decimal, não use vírgulas) seguido, também imediatamente, pelo símbolo '%'.
Os valores percentuais sempre são relativos a algum outro valor, por exemplo, uma unidade de medida. Cada propriedade que permita o uso de unidades percentuais também define a qual valor esta unidade se refere. Muito frequentemente é o tamanho da fonte do próprio elemento:
P { line-height: 120% } /* 120% do tamanho da fonte do elemento */