Estilização, herança, especificidade são importantes

16 de dezembro de 2008

Praticamente já deixamos nosso blog com um visual mais apurado e profissional com os tutoriais anteriores. Agora vamos dar estilos específicos aos elementes internos.
Esses elementos XHTML são: Títulos de widgets, data, títulos de post, etc.

Vamos começar de onde paramos:

No código CSS vá até o item /* Headings. É daqui que vamos começar e estilizar os títulos dos widgets

h2 {
  margin:1.5em 0 .75em;
  line-height: 1.4em;
 font-family: Georgia;
  text-transform:uppercase;
  color:#000;
  text-align:center;
 font-weight : bold;
 font-size:12px;

 Este trecho defini praticamente todos os títulos widgets, onde definimos as margens de todos os lados, o tamanho da linha, a fonte a ser usada, transformamos os texto em maiúsculas, definimos a cor, alinhamento do texto, em negrito e tamanho da fonte.
Uma coisa que todos devem prestar atenção é sobre herança dos elementos, por exemplo:
Eu defini no body que a fonte é Georgia, então h2 já herdou esta fonte e não preciso declara-la neste elemento, certo? Errado, pois declarei na sidebar que queria uma fonte Tahoma, logo h2 da sidebar herdará está fonte, então por isso preciso declarar a fonte Georgia novamente, pois é a que quero nos títulos.
Acho que essa parte ficou claro. Você deve ajustar este código para seus propósitos, mas sempre lembrando do que já declarou anteriormente. As vezes quebramos a cabeça, pois uma estilização não ocorre como queremos e isso pode ser efeito da Herança ou da especificidade do código. Ainda criarei um tutorial sobre esses dois assuntos que são de grande importância na CSS.

A data nos Blogs são também elementos h2 e aqui podemos ver o efeito da herança. Como são h2 iram receber toda herança do código acima, mesmo sendo uma classe distinta, então por isso precisamos estiliza-la:
h2.date-header {
  margin : 0 0 10px;
font-size : 12px;
font-weight : normal;
text-align : center;
color : #999;
}
Definimos uma margem embaixo para dar um espaço, tamanho da fonte, fonte normal, texto alinhado no centro e cor. Note que não declarei a fonte aqui, pois está herdando de h2.

Bom, este tutorial abrange mais 2 elementos de nosso tutorial para criar templates para blog blogspot, que demos inicio como o:
Eles devem ser lidos novamente para que as Heranças sejam notadas e aprendidas. Nosso tutorial é longo e tem muito mais para ser mostrado, mas garanto que se prestarem atenção neles, logo não terão dificuldades de criar templates profissionais.

Por hoje fico por aqui!
Abraços!

Subscreva o CSS-Desvendado completo!
Subscreva CSS - Desvendado por Email

3 comentários:

Glauber Bandeira disse...

Olá Marcelo queria que você desse umas dicas de como mexer no css para o widget do blogblogs.
Abraço.

Marcelo R. Souza disse...

@Glauber com certeza chegaremos nesta parte depois de vermos como estilizar os post e seus elementos. Como disse estou indo por partes de um blog para que todos possam entender.
Abraços!

Monika Baumann disse...

Vim desejar um Feliz Natal pra ti e os seus e um 2.009 cheio de muita paz, sucesso, saúde e realizações.
Bjuuu!

Monika Baumann publicou um post sobre.. Tirinhas Especial de Natal

Postar um comentário

Faça seu comentário ou sua pergunta. Quando for possível postarei a resposta.
Obrigado!
Para deixar o link da sua última postagem coloque este código:

<em><strong>Seu nome</strong> publicou um post sobre.. <a href="seu link do último post">Título do Post</a></em>

Ficará assim:
Marcelo publicou um post sobre.. Alguma coisa