quarta-feira, 3 de março de 2010

Aula de CSS para Iniciantes

Olá, caro leitor! Se você quer acompanhar todos os nossos artigos, sinta-se a vontade para assinar nosso feed.

Para ter um Blog de qualidade, é preciso ter uma noção de HTML. Se desejar editar o template de um Blog, é preciso saber CSS, um código fundamental na criação de templates. Após as aulas de HTML que criei, vim disponibilizar uma aula básica de CSS, onde ensinarei o que é preciso para editar o seu template.


CSS é o código encontrado em todos os templates, que permite editar o estilo, cor, e outras alterações no seu layout. Não é possível criar scripts com CSS, ele permite apenas alterar o estilo de um template, para isso, precisaria de um código HTML. Para visualizar as aulas de HTML que publiquei, acesse o marcador HTML. Para iniciar a nossa aula, vamos entender como uma tag CSS é aberta. Toda tag CSS é iniciada com "#", seguida do nome da parte que ela será alterada. Vamos supor, que alteraremos o texto do título do Blog. Para isso, usaremos o texto header h1, que é encontrado em todos os templates. Após escrever o nome, deverá abrir chaves, para instalar os comandos que o CSS executará.

#header h1 {

A tag foi aberta. Agora, como estamos alterando a cor do texto do título de seu Blog, vamos usar o comando "color", seguida de :, definindo a cor da letra.

#header h1 {
color: black


Já definimos a cor do texto do título. Está na hora de definir a fonte do texto. Para isso, adicionaremos "font-family" e o nome da fonte desejada.


#header h1 {
color: black
font-family: arial

Agora, continuando a configuração do texto do título, vamos adicionar o comando que definirá o tamanho do texto, ou seja, o "font-size".

#header h1 {
color: black
font-family: arial
font-size: 12

Como no código HTML, o texto para definir a posição de algo, é o "text-align", o mesmo usado no CSS.

#header h1 {
color: black
font-family: arial
font-size: 12
text-align: center

Logo após que o título do Blog já foi configurado, vamos fechar a tag com chaves.

#header h1 {
color: black
font-family: arial
font-size: 12
text-align: center
}

Estas tags CSS não precisam ser criadas em um templates, pois todos os templates contém elas. Ensinei como funciona o CSS apenas para vocês terem uma noção. Existem muitos outros comandos, como "font-weight". O CSS é mais fácil que o HTML, e também é de fácil edição. Não há segredos no CSS, basta editar, remover ou incluir comandos, que o estilo de seu Blog irá atender a todas as mudanças no código fonte. O CSS pode mudar totalmente o layout de um Blog, basta saber usá-lo de forma correta.

7 Comentários:

Vinicius Mistwalker disse...

Ótima aula, parabéns pelo blog!

brownstone disse...

Faltou explicar como funcionam os seletores do CSS, mais já é um bom inicio para quem está começando.

Vinicius Chargel disse...

BaixaMuito,

Esta foi uma aula apenas para se ter uma noção de como funciona o CSS. Pretendemos publicar tutoriais de melhor qualidade sobre o assunto mais tarde.

Quesia Leal disse...

como voçê coloca este link?
Voçê pode gosta também de:

Vinicius Chargel disse...

Quesia,

Utilizo o seguinte widget: http://www.desenvolvimentoblogger.com.br/2010/01/linkwithin-gadget-de-artigos.html

Postar um comentário

-> NÃO faça comentários ofensivos;
-> Faça comentários apenas RELATIVOS ao assunto do artigo;
-> NÃO faça conversas nos comentários;
-> É PROIBIDO usar links desnecessários, para isso comente usando OpenID;
-> Os comentários são VERIFICADOS, para garantir que não seja violada as regras acima;

Se preferir, fale conosco pela página de CONTATO.

Dica
Use tags como <b> e <i> para fazer comentários mais relevantes.

Perfil

Sou Vinicius Chargel, criador e administrador do Desenvolvimento Blogger. Estudante, Twitteiro e Blogueiro. Atua na internet desde 2006, mas começou a criar blogs apenas à 1,5 anos atrás. Nascido em 1997.

Contadores/Estatísticas

Creative Commons License

Contribua com este blog!


  ©Desenvolvimento Blogger - Todos os direitos reservados.

Template by Dicas Blogger | Topo