As paginas HTML passaram a ser construídas apenas como o esqueleto do que pretendemos mostrar, sendo retirados os atributos das tags HTML e recorre-se cada vez mais às folhas de estilo (CSS – Cascading Style Sheets).
O CSS permite-nos definir estilos (atributos que vão desde imagens, cores e fontes) para cada elemento do HTML. Desta forma se, por exemplo, quisermos alterar a cor do atributo H1 basta-nos aceder ao ficheiro onde temos o “cascade” definido e mudar o valor hexadecimal para o pretendido.
Sem esta folha de estilo teríamos de percorrer todos os ficheiros do nosso site e mudar em cada linha o valor.
Ou seja, passa a haver uma zona, e preferencialmente fora do html, onde definimos o “estilo” que queremos aplicar no nosso site e este é aplicado em todas as páginas.
Exemplo de um cascade:
body { font-size: 62.5%; /* Resets 1em to 10px */ font-family: ‘Lucida Grande’, Verdana, Arial, Sans-Serif; background: #d5d6d7 url(‘images/kubrickbgcolor.jpg’); color: #333; text-align: center; }
#page { background-color: white; border: 1px solid #959596; text-align: left; }
#header { background: #73a0c5 url(‘images/kubrickheader.jpg’) no-repeat bottom center; }
#headerimg { margin: 7px 9px 0; height: 192px; width: 740px; }
#content { font-size: 1.2em }
Mas todo este trabalho pode ser simplificado, podemos automatizar a tarefa de construir o CSS, recorrendo ao Simple CSS podemos parametrizar algumas opções como por exemplo, o tipo de letra, cor da mesma, formas e cores do fundo, margens etc, etc, etc.
Podemos importar um ficheiros CSS e alterar voltado posteriormente a exportar o código. É uma ferramenta simples que poderá ajudar na criação dos seus estilo.
