Vantagens de usar CSS

Para que você entenda melhor a vantagem do uso das CSS, vamos imaginar uma situação hipotética, na qual você construiu um site de 100 páginas (100 arquivos) e por algum motivo necessita mudar a cor de todos os títulos marcados com o elemento <h1>.

Se você estivesse usando tags HTML para formatar a cor desses títulos, o atributo de estilização estaria dentro da tag <h1> e, para mudar a cor do título, você teria que mudar o valor desse atributo. Nesse caso, isso teria que ser feito em cada tag. Se seu documento tivesse uma média de 5 elementos <h1> por página, você teria que modificar 500 tags (5*100)! Imagine o tempo que você perderia nessa tarefa, abrindo e fechando arquivos, procurando as tags <h1> e modificando a cor! Imagine também a quantidade de erros que essa árdua tarefa poderia ocasionar.

Enquanto que usando CSS bastaria você associar a tag <h1> à cor desejada, através de regras que serão estudadas ainda nesta aula. E no caso de se pretender realizar a mudança, seu único esforço seria modificar a cor na declaração da regra CSS uma única vez.

Sendo assim, podemos elencar algumas vantagens do uso de CSS, quais sejam: economia de tempo, diminuição do tamanho do código, facilidade de manter e alterar o conteúdo de sua página e a possibilidade de um maior controle e padronização na sua apresentação.

Sintaxe CSS

Um estilo é definido através de uma regra, que possui sintaxe própria. Um conjunto de regras CSS forma uma folha de estilos.

Uma regra CSS, compõe-se de três partes: um seletor, uma propriedade e um valor. Veja a declaração a seguir e as definições de cada uma das partes:

1) Seletor – genericamente, é o elemento de marcação (X)HTML para o qual a regra será válida. São alvos da regra CSS, por exemplo, os parágrafos e os links.

2) Propriedade – define qual característica do elemento (X)HTML será estilizada pela regra, por exemplo, a cor, o tamanho ou o tipo de fonte.

3) Valor – é a característica quantitativa ou qualitativa a ser assumida pela propriedade. São os valores que essas propriedades podem assumir.

Na sintaxe de uma regra CSS, escreve-se o seletor e, em seguida, a propriedade e o valor. Esses dois últimos devem ser separados por dois pontos e entre chaves, como mostra o exemplo anterior. Chamamos de declaração o par formado por uma propriedade e seu valor.

Uma regra pode conter mais de uma declaração, ou seja, podemos atribuir várias características de estilo a um mesmo elemento (X)HTML usando apenas uma regra, através de um único seletor. Por exemplo, eu posso desejar que um parágrafo, marcado pelo elemento p, tenha cor vermelha e seja escrito em itálico. A regra que estiliza o parágrafo citado acima está descrita a seguir.

No exemplo anterior, você vê uma regra formada por duas declarações separadas por ponto e vírgula, na qual se define que o texto dos parágrafos é estilizado com a cor vermelha e a fonte itálica. O seletor é o elemento (X)HTML p (que marca um parágrafo através da tag <p>). As duas declarações são color:red e font-style:italic, nas quais as propriedades são color e font-style e os seus respectivos valores são red e italic.

Algumas regras sintáticas merecem destaque para que você escreva suas folhas de estilo da melhor maneira. Veja a seguir quais são elas.