O que é CSS? Para que Serve e Como usar o CSS
Saber como funciona o CSS é fundamental para criar sites e blogs. O CSS é um código que faz a formatação do texto, permite alterar cor ou imagem do fundo do blog, criar menu no seu blog ou site, colocar margens, organizar seu layout, criar efeitos nos links, criar bordas e muito mais. Embora o CSS tenha tantas utilizações ele é fácil de usar e ajudará a personalizar seu site ou blog.
Como falamos o CSS controla a aparência do seu site e com ele podemos escolher as cores de praticamente tudo no blog, por isso veja o Código das Cores, pois isso será muito utilizado.
Vamos dar um exemplo para deixar claro como funciona o CSS:
.post {color: #00C;text-decoration: none;}
.post - esse é o nome do estilo e servirá para aplicar essa formatação ao texto do seu blog.
color: #00C;text-decoration: none; - essa é a configuração do estilo, ou seja, aqui escolhemos as cores, tipo de fonte e tudo mais.
As chaves { } que aparecem fazem parte do código e um erro muito comum na hora de editar é apagar uma delas por engano o que gera erros fazendo que a configuração não funcione ou desorganize seu layout.
.post {font-family: "Comic Sans MS", cursive;
font-size: 12pt;
color: #00C;
text-decoration: none;
}
Identificar o que faz cada trecho do código é simples como você pode ver abaixo:
font-family: "Comic Sans MS", cursive; - tipo de fonte
font-size: 12pt; - tamanho das letras
color: #00C; - Cor das letras usadas no site
text-decoration: none; - esse código é principalmente utilizado para retirar o sublinhado de links que aparecem no site.
Para criar um efeito quando o mouse passa sobre o link apenas acrescentamos a (aparência do link) e a:hover (aparência quando o mouse está sobre o link) ao nome do estilo, desta forma:
.post a {color: #00f;}
.post a:hover {color: #f00;}
Leia também:
Efeitos em links (sublinhado, sobrelinha, tachado)
Como Colocar Efeito Arco-Íris nos Links do Blog
Assim o link ficará na cor azul (#00f) e ao passar o mouse o link ficará vermelho (#f00). Claro que podemos usar outras opções, mas não é recomendável alterar o tipo ou tamanho de fonte no efeito a:hover pois isso pode fazer o link ocupar mais espaço e fazer que a organização das linhas se altere. Um exemplo comum disto é quando você entra num site e ao passar o mouse sobre o link a pagina dá um "pulo" para reorganizar as quebras de linhas do texto.
body {background-color: #036;} - Trocar Cor de fundo
body (background-image: url(endereço da imagem);} - Colocar Imagem de fundo
Veja aqui:
Criar e Colocar Efeitos em Fotos/Imagens
Hospedar Imagens no Blogger - Hospedagem Grátis
Claro que além do fundo para o blog todo poderia usar esse estilo background para criar uma cor de fundo diferente para as postagens do blog ou para um menu ou submenu no blog. Alias na verdade comecei a escrever um tutorial sobre colocar submenu no blog, mas achei interessante fazer esse post sobre como funciona o CSS antes assim ficará bem mais fácil explicar como personalizar o menu com submenu que vamos postar nos próximos dias. Aproveite e veja como Menu Horizontal com Efeitos no Blogger usando CSS
.post {font-size: 12pt;}
E nele poderia usar todos os estilos que mencionamos acima: tamanho da fonte, cor da letra, cor de fundo e tudo mais. Veja Como Inserir Códigos CSS no Blogger.
Seria como dizer que o texto deve ser tamanho 12 e depois dizer que deve ser tamanho 16, isso gera problemas nos navegadores alguém de fazer você perder muito tempo para encontrar o problema devido a códigos duplicados. Por isso muitas vezes quando as pessoas pedem ajuda dizendo que não conseguem formatar o texto do blog o problema é justamente esse dois trechos de CSS configurando a mesma coisa.
Leia também:
Como Encontrar Erros nos Códigos do Blog: HTML, CSS, Javascript
Colocar ou alterar as bordas com CSS
Verificar e Corrigir Erros e Problemas Comuns em Blogs
Esse tutorial sobre CSS pode parecer um pouco logo e falar sobre muitas coisas ao mesmo tempo, mas tenha calma e comece fazendo uma coisa por vez e perceberá que em pouco tempo isso parecerá mais simples de usar e claro muito útil para personalizar seu blog.
Vamos dar um exemplo para deixar claro como funciona o CSS:
.post {color: #00C;text-decoration: none;}
.post - esse é o nome do estilo e servirá para aplicar essa formatação ao texto do seu blog.
color: #00C;text-decoration: none; - essa é a configuração do estilo, ou seja, aqui escolhemos as cores, tipo de fonte e tudo mais.
As chaves { } que aparecem fazem parte do código e um erro muito comum na hora de editar é apagar uma delas por engano o que gera erros fazendo que a configuração não funcione ou desorganize seu layout.
Como Usar CSS em Textos e Links
Abaixo temos um exemplo dos códigos CSS mais utilizados em templates de sites e blogs..post {font-family: "Comic Sans MS", cursive;
font-size: 12pt;
color: #00C;
text-decoration: none;
}
Identificar o que faz cada trecho do código é simples como você pode ver abaixo:
font-family: "Comic Sans MS", cursive; - tipo de fonte
font-size: 12pt; - tamanho das letras
color: #00C; - Cor das letras usadas no site
text-decoration: none; - esse código é principalmente utilizado para retirar o sublinhado de links que aparecem no site.
Para criar um efeito quando o mouse passa sobre o link apenas acrescentamos a (aparência do link) e a:hover (aparência quando o mouse está sobre o link) ao nome do estilo, desta forma:
.post a {color: #00f;}
.post a:hover {color: #f00;}
Leia também:
Efeitos em links (sublinhado, sobrelinha, tachado)
Como Colocar Efeito Arco-Íris nos Links do Blog
Assim o link ficará na cor azul (#00f) e ao passar o mouse o link ficará vermelho (#f00). Claro que podemos usar outras opções, mas não é recomendável alterar o tipo ou tamanho de fonte no efeito a:hover pois isso pode fazer o link ocupar mais espaço e fazer que a organização das linhas se altere. Um exemplo comum disto é quando você entra num site e ao passar o mouse sobre o link a pagina dá um "pulo" para reorganizar as quebras de linhas do texto.
Cor ou Imagem de Fundo usando CSS
Para alterar o background do blog (fundo da pagina) também usamos o CSS no estilo body. Podemos alterar a cor de fundo do blog ou usar uma imagem de fundo usando o seguinte código:body {background-color: #036;} - Trocar Cor de fundo
body (background-image: url(endereço da imagem);} - Colocar Imagem de fundo
Veja aqui:
Criar e Colocar Efeitos em Fotos/Imagens
Hospedar Imagens no Blogger - Hospedagem Grátis
Claro que além do fundo para o blog todo poderia usar esse estilo background para criar uma cor de fundo diferente para as postagens do blog ou para um menu ou submenu no blog. Alias na verdade comecei a escrever um tutorial sobre colocar submenu no blog, mas achei interessante fazer esse post sobre como funciona o CSS antes assim ficará bem mais fácil explicar como personalizar o menu com submenu que vamos postar nos próximos dias. Aproveite e veja como Menu Horizontal com Efeitos no Blogger usando CSS
Como Usar o CSS no Blog
No Blogger para usar os estilos CSS é necessário saber identificar o nome de cada estilo para conseguir usar as configurações que mostramos acima. Por exemplo, o texto da postagem do Blogger é o estilo:.post {font-size: 12pt;}
E nele poderia usar todos os estilos que mencionamos acima: tamanho da fonte, cor da letra, cor de fundo e tudo mais. Veja Como Inserir Códigos CSS no Blogger.
Erros e Problemas com CSS
É preciso ter cuidado para não criar duas vezes o mesmo estilo, ou seja, se no HTML do seu blog já tiver um estilo .post e você simplesmente colocar outro isso gera erro pois envia duas configurações para a mesma coisa.Seria como dizer que o texto deve ser tamanho 12 e depois dizer que deve ser tamanho 16, isso gera problemas nos navegadores alguém de fazer você perder muito tempo para encontrar o problema devido a códigos duplicados. Por isso muitas vezes quando as pessoas pedem ajuda dizendo que não conseguem formatar o texto do blog o problema é justamente esse dois trechos de CSS configurando a mesma coisa.
Leia também:
Como Encontrar Erros nos Códigos do Blog: HTML, CSS, Javascript
Colocar ou alterar as bordas com CSS
Verificar e Corrigir Erros e Problemas Comuns em Blogs
Esse tutorial sobre CSS pode parecer um pouco logo e falar sobre muitas coisas ao mesmo tempo, mas tenha calma e comece fazendo uma coisa por vez e perceberá que em pouco tempo isso parecerá mais simples de usar e claro muito útil para personalizar seu blog.
Marcadores: CSS, Erros do Blog, Iniciantes