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.

Para que Serve e Como usar o CSS
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.

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.
Related Posts with Thumbnails

Link desta Pagina

Compartilhe essa Página

8 comentários:

  1. Olá Fabiano, queria saber, se dá para usar outra fonte de letra para postagens no Blogspot. Não as postagens que tem lá e sim as postagens que eu baixo. Por exemplo: Eu baixei uma fonte de Minecraft, e meu blog é sobre Minecraft, e, eu queria usar está fonte, tem como?
    Obrigado

    ResponderExcluir
  2. Olá Fabiano,

    O fato é que as pessoas que entendem um básico de CSS conseguem deixar seus blogs bem personalizados. Por isso um pouquinho de paciência e dedicação para aprender sobre os códigos são sempre bem recompensados.

    Um grande abraço.

    ResponderExcluir
  3. João Carlos

    é possível usar outros tipos de fontes além daqueles que estão nas opções do blogger, veja aqui:
    Usar outros Tipos de Fontes (letras) no Blog

    ResponderExcluir
  4. Meu amigo fabiano, eu estou com um probleminha e se o Sr puder me ajudar seria ótimo... eu coloquei a minha lista de parceiros em um Menu suspenso, mas os links estão abrindo na mesma aba, eu queria encontrar uma tag para abrir em outra aba. esse é o código do menu suspenso que eu estou usando está neste site:

    http://www.desenvolvendoblogs.com/2012/03/como-inserir-um-menu-suspenso-no-blog.html

    Aguardo sua resposta: Um abraço e parabéns pelo trabalho!

    ResponderExcluir
  5. Esse CSS se encontram nas opcoes de personalizar blog ou no Editar HTML ?

    ResponderExcluir