Width e Height é bastante usado em CSS, e traz bastante vantagens na construção de layouts para a web.

Width

O width define a largura de um elemento em HTML, e pode tomar valores em pixeis, percentagens, inches, centímetros, milímetros, pontos, e picas.

• Inches: 1 inch é igual a 2.54 centimetros
• Pontos: é usado em CSS2 sao iguais a 1/72 de uma inch
• Picas: 1 pica é igual a 12 pontos
• Melimitros
• Centímetros

Como usar o widht

Usando o width no elemento <p>

<p style="width: 200px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque blandit ligula convallis.</p>

Como podemos ver o texto fica contido, assim que chegar aos 200px o restante texto muda de linha.
Também podemos usar os valores em percentagens, sendo assim o bloco irá ocupar uma percentagem disponível na janela do browser.

Por exemplo quando a janela do browser está á utilizar o écran inteiro ou está apenas a utilizar metade do écran é considerado sempre 100%.

Usando apenas uma parte

Quando usamos os valores em percentagens, o elemento apenas usara a percentagem disponível no écran.

<p style="width: 50%;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque blandit ligula convallis.</p>

Neste exemplo experimenta modificar o tamanho da janela para veres que o elemento usa sempre 50% do espaço disponível.

Height

O height é usado da mesma maneira que o width a diferença é que especificas a altura do elemento.

<p style="height: 200px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque blandit ligula convallis.</p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque posuere dignissim. Donec mattis.

Como podemos ver o próximo paragrafo só começa 200px depois.

O height também pode ser usado com percentagem e tem o mesmo efeito que o width.

Conclusão

Este tutorial serve apenas para ver como usar e os resultados do widht e height em CSS.

Neste exemplo apenas usamos o elemento <p> mas o width e o height pode ser usado praticamente em todos os elementos de HTML.

Usar valores em percentagem da uma vantagem de criar layouts ‘elásticos’ que se modificam através do tamanho disponível do écran.

Usar valores fixos tem a vantagem de controlares melhor o layout e saberes sempre que tudo encaixa perfeitamente.

No inicio só existia HTML e com o simples objectivo de partilhar informação na internet. Nunca houve a intenção de HTML servir para layout de web sites.
Apesar de tudo no dia em que HTML introduziu <table> as coisas mudaram, pois foi possível designers começarem a criar layouts.
A <table> ajudou muito para a evolução dos websites, por fim existia uma maneira de designers puderem porem os elementos e imagens no sítio que desejavam.
Mesmo assim criar layouts usando <table> pode ser um processo doloroso, <table> dentro de <table> cria um código pesado e deselegante.

CSS, Cascading Style Sheets

CSS veio ajudar o coitadinho do HTML, e com grandes vantagens.
Não só o factor <table> mas simplesmente o processo todo de dividir código com layout. Com CSS é possível atribuir um ID ou uma classe a qualquer tag em HTML e simplesmente criar o layout ou estilo para essa mesma tag usando CSS.

Este artigo não tem como objectivo entrar nos pormenores, mas sim ajudar a mudança e deixar de uma vez por todas <table> tag.

Exemplo <table> layout

Vamos começar com um simples exemplo de um design de três colunas usando tabelas.

<table border="1" cellspacing="0" cellpadding="0" width="100%">
<tbody>
<tr>
<td width="20%">Layout lado esquerdo</td>
<td width="60%">Layout centro</td>
<td width="20%">Layout lado direito</td>
</tr>
</tbody></table>

Simples não? Pois bem sem duvida que ate e simples, mas será CSS ainda mais simples?

A maneira CSS

Então e como será em CSS? Mantendo o mesmo layout.

<div id="ladoesquerdo">Lado Esquerdo Layout</div>
<div id="ladocentro">Centro Layout</div>
<div id="ladodireito">Lado Direito Layout</div>

Hmm só três linhas? Parece simples, mas aonde esta o troque?
Pois bem como disse no inicio CSS da vantagem de separar o código do layout e por isso existe umas linhas extras.

Existe três maneiras de inserir código CSS.

• Entre as tags <head>
• Directamente na tag que queremos modificar usando <style>
• Ou criar um link para um ficheiro css

Neste exemplo inserimos entre as tags <head>.

#ladoesquerdo {width:19%; float:left; border:1px solid "666;}
#ladocentro {width:60%; float:left; border:1px solid "666;}
#ladodireito {width:19%; float:left; border:1px solid "666;}

Então e as vantagens?

Pois bem, existe varias vantagens:

• O código esta separado, qualquer mudança no layout pode ser feito só no CSS e não existe necessidade de mexer no HTML.
• Search Engines adoram CSS, pois normalmente o tamanho do ficheiro fica mais pequeno, e também porque a percentagem de conteúdo tem mais hipóteses de ser superior ao código.

Mas claro também existe as suas desvantagens:

• CSS ainda não tem o suporte total de todos os browsers no mercado.
• Por vezes o que se vê num browser (IE) e diferente noutros (Firefox / Opera).

Mas com os web standards cada vez mais a puxar os browsers para a mesma maneira de mostrar os resultados, CSS parece ter um futuro garantido.

Mostra mais

Então e que tal mostrar um pouco mais as vantagens do CSS.
Ok vamos então dar um espaço entre as caixas, mudar a cor de cada caixa, as cores das fontes isto tudo sem tocar no código HTML.

#ladoesquerdo {width:15%; float:left; border:1px solid #666; background-color:#000099; margin-right:4%; color:#FFFFFF;}
#ladocentro {width:60%; float:left; border:1px solid #666; background-color:#3366FF;margin-right:4%;}
#ladodireito {width:15%; float:left; border:1px solid #666; background-color:#000099; color:#FFFFFF;}

Hmmm ok, mas ainda não me convenceram. Mudar cores, mudar os tamanhos, bastava apenas acrescentar mais uns elementos na tabela.
Então e mudar o layout sem mexer no código? Por exemplo ter só um layout de duas colunas?

#ladoesquerdo {width:20%; height:100px; float:left; border:1px solid #666;
background-color:#000099; margin-right:4%; color:#FFFFFF;}
#ladocentro {width:75%; height:50px; float:right; border:1px solid #666; background-color:#3366FF; }
#ladodireito {width:75%; height:50px; float:right; border:1px solid #666; background-color:#000099; color:#FFFFFF;clear:right;}

Ok ok, ainda não tocamos no código, ok ok já estou a ver as vantagens.

Conclusão

Espero que este artigo tenha ajudado para perceber alguma das vantagens de CSS, e claro não quero passar a ideia errada, tabelas são um aspecto importante e deve ser usado, mas no sitio certo como longos formulários, para mostrar extensos resultados de base de dados, mas como uma maneira de criar o layout geral para um web site espero ter demonstrado as vantagens de CSS.

Usando apenas CSS o nosso site fica mais rápido e o efeito pode ser modicado simplesmente editando o no ficheiro de CSS.

O código em HTML

Para começarmos vamos primeiro criar o nosso código em HTML.
Consiste apenas de os links que queremos modificar. Neste exemplo temos, Pagina Principal, Acerca de Nos, Contactar.

<div id="navegacao">
<ul>
<li><a href="#" title="Pagina Principal">Pagina Principal</a></li>
<li><a href="#" title="Acerca de Nos">Acerca de Nos</a></li>
<li><a href="#" title="Contactar">Contactar</a></li>
</ul>
</div>

No nosso código HTML temos um div em que lhe atribuímos o id de navegação, assim é mais fácil podermos usar o css.

CSS com o efeito.

O CSS é que vai criar o efeito todo, sem imagens. Para tal para criar o efeito do botão vamos usar diferente cores nas bordas dos botões.
O botão normal tem o topo e o lado esquerdo de uma cor diferente, quando o visitante passa com o rato as cores mudam para criar o efeito do botão.
Sem mais demoras o código do CSS.

#navegacao {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

#navegacao ul{
list-style:none;
margin:0;
padding:0;
padding-top:4px;
}

#navegacao li{
display:inline;
}

#navegacao a:link, #navegacao a:visited{
margin-right:2px;
padding:3px 10px 2px 10px;
color:#A62020;
background-color:#FCE6EA;
text-decoration:none;
border-top:1px solid #FFFFFF;
border-left:1px solid #FFFFFF;
border-bottom:1px solid #717171;
border-right:1px solid #717171;
}

#navegacao a:hover{
border-top:1px solid #717171;
border-left:1px solid #717171;
border-bottom:1px solid #FFFFFF;
border-right:1px solid #FFFFFF;
}

Visita esta pagina para ver o efeito dos botões.