Série - CSS e HTML aprenda passo-a-passo #1

Tive dois pedidos de sugestão para uma série de artigos, o Júnior Silva pediu para abordar Feed's, e como aumentar seus assinantes, recentemente falei da promoção aqui do blog e acabei dando uma boa dica sobre como aumentar seus assinantes, e ainda existe este excepcional artigo do Ganhar Dinheiro Online chamado, 7 dicas rápidas paraaumentar o número de assinantes de RSS FEED, por isso acho que por enquanto esta área está bem coberta, mas agradeço muito o Júnior pela dica.

Seguindo o que mais procuram no momento resolvi seguir o pedido do Paulo Lapa, que disse:

Gostaria de ter (quase) todos, mas como só posso votar num, voto então em "Dicas de CSS", que é no que neste momento preciso mais.

Parabéns pela ideia e por querer ajudar.

Dito isto, resolvi criar uma série de artigos que irão abortar não só o CSS, mais também seu HTML inteiro, e no final da série, acredito que até o mais leigo poderá criar e modificar seus templates, então vamos começar e deixar de blá blá blá...

Este primeiro artigo abordará: Meta tag`s - Favicon - Pré definições, e outras coisinhas.
Usaremos o template mínima como exemplo.

Entrando na edição HTML do seu blog verá estas linhas abaixo, ao qual possivelmente nunca mexerá.

Abaixo destas linhas já podemos começar a trabalhar, pois vem a , originalmente ela aparece assim:

<data:blog.pageTitle/>

Aqui começamos pelo Favicon, que é aquela imagem que aparece ao lado do endereço do blog no navegador, para ter a sua basta criar uma imagem em gif, ou jpg, ou png, no tamanho de 16x16, ou 32x32, e inseri-la no código abaixo.

Depois de inserir sua imagem, pegue o código e coloque abaixo de:

Visualise, e se tudo estiver certo salve!
Agora a parte mais importante desta parte da série, as Meta tags, muito cuidado algumas que passam por aí acaba dando conteúdo duplicado, por isso aconselho a leitura deste artigo: Saiba se você tem conteúdo duplicado e evite punições.
Mas um código que funciona e funciona muito bem, eu achei no Usuário compulsivo, localize:

e abaixo dela insira o código abaixo, mas se adicionou o favicon indicado acima, deve colocar o código abaixo depois do código do favicon.

Feito isso altere o que se pede, e pronto, está dica também se encaixa um pouco em SEO.
Agora passamos pela primeira parte do , e seguindo a mesma vamos dar uma olhada em "Variable definitions", que nada mais é do que variáveis, prédefinições de cores, fontes, e tamanho de fontes do seu blog, alguns templates como o mínima usam estas prédefinições para o seu CSS, mas você pode altera-las, tanto nesta parte que veremos como direto no CSS, mas está parte veremos no próximo artigo, as variações você vê em seu template mais ou menos assim:

/* Variable definitions
====================
Page Background Color"
type="color" default="#fff" value="#ffffff">
Text Color"
type="color" default="#333" value="#333333">
Link Color"
type="color" default="#58a" value="#5588aa">
Blog Title Color"
type="color" default="#666" value="#666666">
Blog Description Color"
type="color" default="#999" value="#999999">
Post Title Color"
type="color" default="#c60" value="#cc6600">
Border Color"
type="color" default="#ccc" value="#cccccc">
Sidebar Title Color"
type="color" default="#999" value="#999999">
Sidebar Text Color"
type="color" default="#666" value="#666666">
Visited Link Color"
type="color" default="#999" value="#999999">
Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">
headerfont" description="Sidebar Title Font"
type="font"
default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
pagetitlefont" description="Blog Title Font"
type="font"
default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">
descriptionfont" description="Blog Description Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
postfooterfont" description="Post Footer Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
startSide" description="Side where text starts in blog language"
type="automatic" default="left" value="left">
endSide" description="Side where text ends in blog language"
type="automatic" default="right" value="right">
*/

Deixei algumas partes em vermelho para que você possa localizar as sessões do seu blog com mais facilidade, aqui tem uma tabela completa com o código das cores, localize a sessão onde deseja modificar algo e troque o código da cor, vá visualizando, e só salve quando ficar a gosto, quanto a fonte e seu tamanho, faça o mesmo, localize e mude sua porcentagem, para mais ou menos, assim como o tipo de fonte, uma dica é brincar com os códigos em um blog de testes, altere tamanhos, cores, e afins, até familirizar, verá que fica fácil.
No próximo artigo entraremos no CSS de fato, você sabia que CSS significa "Cascading Style Sheet"? E que em Português ficou "Folha de Estilos em Cascata", responsável pelas fontes, cores, e todos os estilos presentes em seu blog ou site?

Original Post by: http://www.comofazerweb.com/2009/09/css-e-html-aprenda-passo-passo.html