Cadernos de Informática - Portal do Professor

Cadernos de Informática
56
CURSO DE INTRODUÇÃO AO WEBSITE
Secretaria de Estado de Educação MG
MÓDULO 6 - FOLHAS DE ESTILO
CSS significa Cascading Style Sheets (Folhas de estilo em cascata). Estilos definem como
mostrar os elementos HTML e normalmente são armazenados em folhas de estilo.
Os estilos foram adicionados no HTML 4.0 para facilitar o design de páginas. Folhas de
estilo externas à página podem economizar muito trabalho, já que se pode utilizar a
mesma programação para estilizar diversas páginas do site.
Estas folhas de estilo externas, são guardadas nos arquivos CSS.
6.1 – ESTILOS COMO SEPARAÇÃO ENTRE CONTEUDO E LAYOUT
As tags HTML foram originalmente planejadas para definir o conteúdo de um documento.
Elas estão encarregadas a nos dizer “isto é um cabeçalho”, “isto é um parágrafo” ou
“isto é uma tabela”, usando tags como , , , e assim por diante. O layout
do documento era pra ser uma função do browser, sem que fossem usadas nenhuma tag
de formatação.
Como os brosers grandes como o Netscape, continuamente adicionavam novas tags e
atributos (como a tag e o atributo color) a especificação do HTML original, se
tornou mais e mais dificil a criação de websites onde o conteudo do HTML estivesse
claramente separado de sua apresentação ou layout.
Para resolver este problema, o World Wide Web Consortium (W3C) – consorcio responsável
pela padronização do HTML - criou os estilos (STYLES) em complemento ao HTML
4.0.
Todos os browsers mais utilizados suportam o CSS.
6.2 – COMO OS ESTILOS ECONOMIZAM TRABALHO?
6.3 – SINTAXE DO CSS
As folhas de estilo, definem como os elementos HTML são mostrados. Os estilos são
normalmente salvos em arquivos externos (com a extensão .css). Estes arquivos permitem
que você mude a aparência e layout de todas as suas páginas apenas editando um
arquivo CSS.
CSS é uma inovação no webdesign porque ele permite que desenvolvedores controlem o
estilo de diversas páginas de uma só vez. Como um desenvolvedor Web você pode
definir um estilo para cada elemento HTML e aplicar a quantas páginas lhe convier. E
para fazer uma mudança global, mude o estilo e todos os elementos serão atualizados
automaticamente.
Syntax
A sintaxe do CSS é feita de três partes: um seletor, uma propriedade e um valor:
seletor {propriedade: valor}