O QUE É UMA STYLE SHEET
Paulo Candido

Uma style sheet é um arquivo texto contendo informações organizadas de acordo com a linguagem definida pelo padrão do W3C. Esta linguagem define o formato e os tipos de comandos que podem ser usados em uma style sheet.

Por exemplo, uma style sheet poderia ser assim:

body{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt } h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18pt } h2 { /* manchetes */ font-family: Verdana, Arial, Helvetica, sans-serif; font-size:13pt; font-weight: bold }

O fragmento acima poderia ser salvo em um arquivo (de preferência terminado com .css) e utilizado como padrão único para várias páginas HTML. Neste ponto o importante é você observar que uma style sheet é apenas um arquivo de texto contendo alguns parâmetros que definem como determinados tags HTML serão mostrados pelo browser. No exemplo acima estão definidos os estilos de apresentação dos tags <h1> e <h2>, e de todo texto que não estiver dentro de tags (body).

Encadeamento

A palavra Cascading (encadeamento) se refere à possibilidade de uma style sheet "importar" outra. Se eu quizesse acrescentar mais alguns comandos no exemplo acima, eu poderia seguir dois caminhos: editar o arquivo original ou importar o arquivo original em uma nova style sheet e definir os novos comandos (e os comandos já definidos na style sheet original ficariam valendo também). O problema de redefinir o arquivo original é o risco de estragar páginas existentes que utilizem aquela style sheet. Por exemplo, eu poderia acrescentar o comando:

p{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12pt }

A partir daí, em todas as páginas que utilizassem esta style sheet, qualquer texto entre tags de parágrafo <p> seria escrito em corpo 12 com uma das fontes designadas. Para evitar estragar páginas que utilizem as style sheets originais eu posso simplesmente criar uma nova style sheet importando a antiga (supondo que a primeira style sheet estivesse em um arquivo chamado style1.css):

@import https://www.terra.com.br/styles/style1 p{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12pt }

Eu poderia então chamar está style sheet de style2.css e apenas as páginas HTML que utilizassem esta style sheet seriam afetadas pelo novo comando.

» A sintaxe das Style Sheets »