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

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:

• Pensando o Designer
• Fatiando Imagens
• Definindo Tipografia

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