Marcus VBP

Este capítulo detalha a camada de apresentação do projeto, desenvolvida utilizando CSS, chamada também de folhas de estilos, a partir daqui. Ele irá se concentrar nos conceitos e técnicas utilizadas para compor as várias partes do layout, pois detalhar centenas de linhas de folhas de estilo seria maçante e repetitivo demais.

De acordo o padrão de desenvolvimento seguido pela empresa, as folhas de estilo devem ser divididas para facilitar a pesquisa e manutenção posterior. Na época do desenvolvimento do projeto do Portal Paraíba Jovem, as folhas de estilo foram divididas de acordo com a área e também pela sua função. A divisão das folhas de estilo pela sua função permite que aquele bloco de código CSS e XHTML seja reaproveitado em outro projeto, com alterações mínimas, poupando tempo.

Por exemplo, o arquivo colesq.css é responsável especificamente em aplicar formatação à coluna da esquerda, e todos os seus elementos filhos. Em uma página interna que tenha uma galeria de imagens, também estará incluso o arquivo GaleriaDeImagens.css, responsável por aplicar formatação àquele bloco de código XHTML.

As folhas de estilo podem ser aplicadas a um elemento HTML de quatro formas, basicamente. São elas:

• Aplica-se o estilo diretamente na marcação, através do atributo HTML style. Esta forma quase nunca é utilizada, pois retira completamente a flexibilidade das folhas de estilo;
• Aplica-se o estilo utilizando o valor do atributo HTML id. Esta forma é pouco recomendável, pois o valor do atributo id deve ser único por página, impossibilitando que aquela formatação seja reaproveitada na mesma página, a menos que você a duplique. A exceção ocorre quando se quer aplicar uma formatação única a um determinado elemento (em geral, posicionamento) ou quando tem-se certeza que só existirá um elemento que irá receber aquela formatação por página;
• Aplica-se o estilo através de uma classe, atribuída através do valor(es) do atributo HTML class. Esta é a forma mais indicada na maioria dos casos. Você pode ter mais de uma classe aplicada ao mesmo elemento;
• Também pode se definir uma formatação universal para todas as instâncias de determinado elemento (por exemplo, aplicar tamanho 12px em todos os parágrafos – o elemento HTML <p></p> - de uma página do projeto). É muito utilizado para definir o padrão de formatação que será seguido.