Lhes apresento o elemento body:

<body>
<!-- todo o conteudo do site aqui dentro -->
</body>

Todos nós conhecemos. Mas será que estamos utilizando de verdade ele ?

O body é o elemento no nosso documento responsável por ser o container de tudo que é conteúdo do site.

Diferente do <head>, oque está dentro do <body> é oque fica/ou ficará disponível para visualização do visitante.

As informações que queremos transmitir. Títulos, Textos, Imagens..

Até aqui, todos nós já usamos o body para isso, mas.. e o que mais podemos fazer com ele ?

Pode parecer absurdo falar isso, mas convém lembrar: o body é uma tag html! E como tal, aceita atributos:

http://www.w3schools.com/tags/tag_body.asp

Os mais interessantes, são o id e a class. Vocês já tinham colocado um desses no body de algum site ?

<body id="home">

Usar o body com um ID

É uma proposta interessante, e nos ajuda a economizar alguns elementos de estruturação de layout de vez em quando.

Por exemplo, aqueles layouts onde a home do site difere por poucas coisas das páginas internas, como: topo mais alto, rodapé inexistente..

Esse tipo de situação, podemos facilmente resolver usando o atributo ID no body.

Sendo a home, estilizamos o topo diferente doque ele seria nas internas:

body#home #header { height: 200px; }
#header { height: 100px; }

A marcação html fica intacta, evitamos, coisas como: #header_home..

E isso nos levará a escrever um css mais bonito também. Afinal, fizemos um condicional no css!

Usar o body com uma ou mais CLASSes

Hum.. na verdade eu comecei explicando o ID, porém hoje em dia, eu prefiro

<body class="home">

do que com ID.

Pelo simples motivo de poder usar mais de uma. Com classes, temos todos os benefícios que citei do ID:

body.home #header { height: 200px; }
#header { height: 100px; }

E é possível colocar mais de uma, veja:

<body class="cursos html">

A motivação disso, é imaginemos um menu dropdown.

<li>Cursos
      <ul>
         <li>HTML</li>
         <li>CSS</li>
         <li>JavaScript</li>
      </ul>
    </li>

Assim cada página interna, teria uma combinação de class para o body diferente:

class=”cursos html”, class=”cursos css”, class=”cursos javascript”..

A vantagem disso, é que a class=”cursos”, é comum a todos eles, e no css podemos fazer facilmente um destaque naquele item de menu, se estivermos dentro de um dos filhos!

Mais uma vez, levamos o poder do css à outro nível!

Tendo a class html, css.. e sabendo que cada página interna terá somente um título H1, podemos por exemplo, fazer o H1 ser azul na página de HTML, ser vermelho na página de css, e ser de qq outra cor por padrão, nas páginas em que não definirmos nada.

.html h1 { color: #00f; }
.css h1 { color: #f00; }
h1 { color: #000; }

A grande sacada disso é não precisarmos adicionar nada mais no html, além das respectivas classes no body.

O body é pai de todo mundo

Conhecendo o efeito cascata do css, e sabendo que tudo o que o visitante verá está dentro do body do documento, é melhor usar a herança do css para definir os padrões do site, como:

body { font-size: 12px; font-family: Tahoma, sans-serif; color: #333; }

E porque o body ? pq afinal, todos os elementos posteriores herdarão dele, e isso tudo com uma especificidade bem baixa. Então não precisamos brigar para sobrescrever estilos.

Deve ter ficado implícito, mas quero ressaltar com uma ressalva: todos os elementos, menos os de formulário.

Por algum motivo que desconheço, input, select e textarea, não herdam ‘naturalmente’ definições de fonte declaradas no body.

body, input, select, textarea {
    font-size: 12px; font-family: Tahoma, sans-serif; color: #333;
}

Com isso, cobrimos todas as tags, e não estragamos as definições padrões como, terá uma fonte menor que o body, <h1> continua com uma fonte maior.. por esse motivo que não uso o seletor global * para esse trabalho.

Ele aplica a todos os elementos, mas de forma “forçada”, elemento a elemento. E não por herança como ocorre qndo trabalhamos com o body.

A idéia é brigarmos menos com nós mesmos. E só sobrescrever poucas propriedades.

Isso é ótimo por uma outra questão: não corremos o risco de “esquecer” de alguma tag, visto que com uma declaração simples, e aproveitando a herança do css, nós atingimos ela.

Por este motivo não gosto daqueles css resets gigantescos e milagrosos, entretanto isso é assunto para um próximo post.

O body aceita css!

Sabe aquele fundo do topo com degradê, e aquela linha do header que vai de uma ponta a outra do browser? (100% width), então..

aplica como background do body!

Simples assim. Descartamos a necessidade de um #wrap_header, e jogamos em uma só imagem como background do body, pois ele mesmo já tem de graça para gente, 100% de largura da viewport.

Esse é apenas um exemplo, para tentar “abrir” a mente. As possibilidades são muitas.

Às vezes precisamos rever coisas “óbvias” ou “básicas”, pois podem fazer coisas impressionantes.

Que tal ?