Estilizando o título da página

Postado por: Pedro Rogério em

Com as CSS é possível fazer alterações radicais no visual do nosso site. Você pode simplesmente fazer alterações em todo o seu site, ou apenas estar “estilizando” uma tag. Hoje vamos aprender a como efetuar alterações no título de nossa página. Para isso vamos usar a tag <h1>. Nosso código (x)HTML fica da seguinte forma:

<h1>Título da Página</h1>

Agora vamos mexer no nosso CSS, vamos definir o tipo de fonte:


<style type="text/css">
font-family:"Trebuchet MS", Helvetica, sans-serif;
</style>

Só que o nosso título não tem cor alguma, vamos agora definir uma cor para a fonte e também para o background:


<style type="text/css">
font-family:"Trebuchet MS", Helvetica, sans-serif;
color:#FFF;
background-color:#C63;
</style>

Vamos agora definir uma margem para o título para que o texto que venha a seguir não fique colado no mesmo:


<style type="text/css">
font-family:"Trebuchet MS", Helvetica, sans-serif;
color:#FFF;
background-color:#C63;
margin-bottom:5px;
</style>

Para uma melhor performance, vamos definir também o padding:


<style type="text/css">
font-family:"Trebuchet MS", Helvetica, sans-serif;
color:#FFF;
background-color:#C63;
margin-bottom:5px;
padding:15px;
</style>

Pronto, viu como é fácil, veja aqui um exemplo.

Posts Relacionados

Confira também outros artigos interessantes postados aqui no blog.

Sobre Pedro Rogério

Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.

2 Responses to “Estilizando o título da página”

  1. Parece simples, mas muita gente ainda se perde na hora de estilizar títulos, é constante ver o uso de br para forçar uma margem.

    Abraços!!

  2. Estou fazendo esses tutoriais com esse intuito mesmo, ensinar quem está começando agora.

    Abraços!!!

Leave a Reply