HTML e CSS 03: Uso do código CSS

1. Uso do código CSS interna e externamente ao arquivo HTML

Como foi mostrado na aula passada, o código CSS pode ser escrito no mesmo arquivo onde fica o código HTML. Neste caso, ele valerá localmente, só para o arquivo onde se encontra.

Outra estratégia é colocar o código CSS necessário para todo o site num arquivo externo, que é carregado por cada um dos arquivos HTML. Neste caso o código valerá para todo o site de uma só vez. A vantagem é que a edição da CSS do site fica centralizada e o designer pode alterar toda a vizualização do site a partir de um (ou alguns) arquivo CSS. Se você precisar mudar, digamos, a cor do link de todo o site, bastará abrir o arquivo CSS e alterá-la; a alteração afetará todo o site uma vez que este mesmo arquivo CSS é carregado por todos os arquivos HTML do site. Este é o jeito como o site da Carambola Digital controla o seu CSS, com um (na verdade, quatro) arquivo CSS externo. Mais tarde veremos qual a utilidade de mais de um arquivo CSS para um só site.

É importante lembrar que um uso não exclui o outro. Posso usar um arquivo CSS externo que é complementado por tags de CSS internas ao arquivo HTML. Neste caso, quanto mais específica for a regra CSS, mais forte ela é. Caso uma mesma regra seja apontada tanto no arquivo externo quanto no interno, vale a do interno, pois é mais específica. Mas cuidado: são raros os casos em que o uso misto se justifica.

Para o escopo do nosso curso, daqui por diante passaremos a usar CSS em um arquivo externo ao HTML.

2. Criando um arquivo CSS externo

Embora você possa criar e administrar um arquivo CSS a partir de um editor de textos comum (o bloco de notas, por exemplo), o Dreaweaver, da Adobe pode ajudar bastante.

Depois que você montou uma página HTML, salve-a em disco.

No lado direito da interface do Dreamweaver, você vai encontrar o painel CSS, como mostrado ao lado.

Os ícones posicionados no canto direito inferior servem para:

• corrente: criar um novo arquivo CSS
• papel: criar uma nova regra CSS
• lápis: editar uma regra existente
• lixeira: apagar uma regra CSS

A partir da criação de um arquivo CSS externo você pode seguir clicando no ícone do papel para criar novas regras CSS, aplcaindo-as com o uso da barra de propriedades.

Veja o exemplo no video abaixo.