CriarWeb.com > Manuais > Workshop de CSS

Em muitas ocasiões, ao construir uma página web, necessita-se encaixar uma informação para remarcar seu conteúdo, destacando-o de outros textos do documento.

É basicamente o que vamos fazer no exercício dessa ocasião. Trata-se de um exemplo muito simples, mas que serve como continuação de outro artigo que publicamos no Workshop de HTML. Em tal workshop realizávamos as caixas utilizando unicamente HTML, sem declaração de estilos, o que não é muito adequado devido às tendências atuais.

CSS é, nesses momentos, a tecnologia mais adequada para definir os estilos de um documento. O que antes havíamos realizado com HTML pode-se realizar com CSS obtendo várias vantagens da construção com Folhas de Estilo em Cascata.

Nota: As vantagens e fundamentos das Folhas de Estilo em Cascata (CSS) podem ser vistas no artigo Construção CSS.

O exercício

Para começar, seria bom observar o objetivo deste exercício, para ter uma idéia exata do que vamos fazer.
O exercício dispõe de três caixas com estilos diferentes, embora tenham códigos muito parecidos. Para variar seu aspecto, simplesmente muda-se a declaração de estilos para cada um.

A construção com estilos realiza-se utilizando etiquetas <DIV> ao invés de tabelas. Por isso o código inclui as etiquetas <DIV> necessárias e algo mais.

Este seria o código da primeira tabela.

<div id=tabela1>
   <div id=cabtab1>
   Caixa curiosa com HTML
   </div>
   <div id=corpotab1>
   Este é o interior do caixa. Esperamos que lhe pareça elegante... é muito simples.
   </div>
</div>

Contém três etiquetas <DIV> uma para englobar a caixa inteira, e atribuir estilos como a borda ou estilos que desejarmos que se apliquem a toda caixa. Também teremos um <DIV> para o cabeçalho da caixa e outro para o corpo.

Os estilos que utilizamos para esta caixa são os seguintes:

#tabela1{
   border: 1px solid #1E679A;
   width: 280px;
}
#cabtab1{
   background-color: #1E679A;
   font-weight: bold;
   color: #ffffff;
   padding: 2 2 2 2px;
}
#corpotab1{
   padding: 4 4 4 4px;
   background-color: #ffffcc;
}
Cada <DIV> tem atribuido um estilo diferente dependendo de nossas necessidades.

Para a segunda caixa poderemos ver um código HTML quase idêntico. A única coisa que mudamos são os identificadores dos <DIV> , para poder atribuir uns estilos diferentes à caixa.

<div id=tabela2>
   <div id=cabtab2>
   Caixa curiosa com HTML
   </div>
   <div id=corpotab2>
   Este é o interior da caixa. Esperamos que lhe pareça elegante... é muito simples.
   </div>
</div>

O código CSS para definir o aspecto é o seguinte:

#tabela2{
   border: 1px solid #165480;
   width: 200px;
}
#cabtab2{
   background-color: #5fa6d7;
   font-weight: bold;
   font-size: 8pt;
   padding: 2 2 2 2px;
}
#corpotab2{
   font-size: 8pt;
   padding: 4 4 4 4px;
   background-color: #ffffcc;
}

Como pode ser visto, não tem nenhuma dificuldade adicional em relação ao primeiro exemplo, pois só se definem estilos para cada um dos <DIV> .

Na terceira caixa dificultamos um pouquinho o código, embora não signifique nenhuma complicação. Neste caso, como a caixa continha um texto com várias opções de uma lista, incluímos, dentro do corpo da caixa, um <ul> (unordered list) com cada uma das opções das opções a visualizar.

<div id=tabela3>
  <div id=cabtab3>
  Caixa curiosa com HTML
  </div>
  <div id=corpotab3>
   <ul>
     <li>Opção uno</li>
     <li>Outra opção com texto em várias linhas</li>
     <li>O que for que desejar destacar</li>
     <li>Última opção</li>
   </ul>
  </div>
</div>

Na declaração de estilos também definimos o aspecto da lista, para que se ajuste a nossas necessidades.

#tabela3{
   border: 1px solid #80A93E;
   width: 200px;
}
#cabtab3{
   background-color: #B7F259;
   font-weight: bold;
   font-size: 8pt;
   padding: 2 2 2 2px;
}
#corpotab3{
   font-size: 8pt;
   padding: 4 4 4 4px;
   background-color: #F5ECB9;
}
#corpotab3 ul{
   margin: 0 2 0 20px;
   padding: 0 0 0 0px;
}
#corpotab3 li{
   margin: 0 2 0 2px;
   padding: 0 0 0 0px;
}

Para definir o estilo da lista indicamos o identificador do <DIV> onde encontra-se a lista, seguido da etiqueta sobre a qual desejamos declarar os estilos, neste caso "ul" para definir os estilos da lista e "li" para declarar os estilos de cada uma das opções. Neste exemplo, declaramos os estilos necessários para definir uma margem adequada para a lista e para cada uma das suas opções.

Conclusão

Vimos uma maneira simples de fazer caixas com CSS. Talvez este artigo seja básico demais, mas trata-se de mostrar como se pode fazer com CSS algumas coisas que havíamos feito previamente com só HTML.

Como pode ser visto, comparando este exemplo com sua contrapartida em HTML , com CSS se constrói com muito mais coerência e se obtém um código muito mais claro.