Formatando texto com CSS

Outra coisa importante para melhorar um site, é a personalização dos textos. O CSS permite que façamos muitas coisas interessantes, como escolher o tipo de fonte, tamanho, cor, se maiúscula, normal ou minúscula e etc
As fontes
Uma fonte é um conjunto de grifos. A grosso modo, é a letra que usamos para escrever um texto. A propriedade “font” é o atalho para estilos de fontes no CSS:

• font-style: aplica-se um estilo à fonte
• font-weight: define a espessura da fonte
• font-size: define o tamanho da fonte
• font-family: define o tipo da fonte

Os atributos mais usados são:

• font-style: italic ou normal
• font-weight: bold ou normal
• font-size: 30px;
• font-family: arial, sans-serif; (veja outros exemplos, clicando aqui)

O texto
Define a aparência e a apresentação do conteúdo textual.

• text-align: right; ( alinhado à direita)
• text-align: center; (alinhado no centro)
• text-align: justify; (justificado)
• text-decoration: underline; (linha embaixo)
• text-decoration: overline; (linha em cima)
• text-decoration: line-through; (linha no centro do texto)
• text-transform :uppercase; ( letras maiúsculas)
• text-transform: capitalize; ( a primeira letra fica maiúscula)
• text-transform:lowercase; (todas as letras minúsculas)
• text-transform : none; ( não aplica estilos)

Cor do texto
A cor pode ser modificada usando as propriedades hexadecimais ou rgb.

• color: #FF0000; ( cor vermelha, em hexadecimal)
• color: rgb(255, 0, 0); ( cor vermelha, em RGB)

Veja aqui uma tabela de equivalência de cores para web.
Nos templates para o Blogger, geralmente usamos as variáveis, que permitem que façamos as edições das fontes e das cores através do painel  do designer do modelo.

Para cada tipo de fonte, tamanho e cor, é preciso ter uma variável correspondente.

#header h1 {
color:$blogTitleColor; font:$blogTitleFont;
font-variant:small-caps;
margin:0;
padding:10px 20px 0;
}

Variável que fica logo no começo do CSS:

<Variable name="blogTitleColor" description="Blog Title Color"
type="color" default="#800040" value="#ffffff">

A variável é sempre precedida do símbolo “$”. Para criar variáveis, basta seguir o modelo acima. Como exemplo, vou criar uma variável para o título da barra lateral:

<Variable name="sidebarTitleColor" description="Sidebar Title Color"
type="color" default="#800040" value="#ffffff">

#sidebar h1 {
color:$sidebarTitleColor; font:$sidebarTitleFont; 
font-weight: bold;
margin:0;
padding:10px 20px 0;
}

Percebam que a grafia da variável tem que ser idêntica. A primeira parte deve ser colocada com as demais variáveis – que ficam logo no começo do CSS. Já a segunda parte, deve seguir a sequência de cascata dos seletores CSS.