CSS

Porque é que você QUER usar CSS

Você quer. Porque quer usar elementos visuais de apresentação. Se não, estava a usar HTML 2.0. E porque

• quer usar os elementos visuais, como tipos de letras, cores para links, que não são permitidos em HTML 3.2, e ainda menos nos seguintes
• quer fazer ainda mais efeitos visuais do que em HTML
• quer que certos elementos do HTML sejam representados visualmente de uma outra forma
• quer que todas as páginas do seu site tenham o mesmo visual
• não quer, quando acorda um belo dia inspirado para mudar o visual do seu site, mudar TODOS OS FICHEIROS À MÃO!
• mas quer, ainda assim, poder modificar o aspecto daquele bocadinho do texto para ficar diferente mas só ali
• quer escrever HTML simples e que seja legível dentro de cinco anos
• quer separar para um lado os conceitos que quer transmitir e para outro lado os elementos de apresentação
• é uma pessoa inteligente e de bom gosto
• acha que o esquema de cores desta página é um pavor

Esta página e as outras

Está então estabelecido que quer usar CSS. As CSS (Cascading Style Sheets) colocam à parte do seu texto HTML os efeitos visuais. À parte pode ser dentro do próprio ficheiro HTML, na secção head, ou num ficheiro á parte, acessível por todas as páginas.

Para ver um exemplo de uma página em que a folha de estilo está à parte, veja aqui. Essa folha usa apenas as marcas HTML seguintes: h4, i, p, em, blockquote, hr, small e "a href". No entanto, faz coisas que oscilam entre o muito difícil e o impossível de fazer com HTML legal.

Agora que está convencido, vamos olhar para o HTML com CSS nesta página, aqui. As especificações de estilo estão na secção head, entre marcas <style></style>:

<style type="text/css">
	<!--
	body {
		color: white;
		background: rgb(75,0,0);
		}
	a:link {
		color:red;
		}
	a:visited {
		color:silver;
		}
	a:active {
		color: purple;
		}
	pre { 
		font-family: courier,"courier new",monospace;
		color: aqua;
		}
	-->
</style>

Pronto. Eis como está feita. Espero que a escolha de cores seja suficientemente má para que a queira mudar. Note que só foram usada, na parte de HTML, as marcas h4, p, pre, kbd e hr, para além da necessarias à tabela -- table, tr, td e à sua centragem, div.

Como no HTML, a indentação não é necessária a não ser para os seres humanos poderem ler melhor o código. De facto poderia estar assim:

e funcionava igualmente bem. Mas era mais difícil de ler.

Valores para os atributos

color: Já conhecemos como codificar cores. Há as 16 cores com nomes, e as cores que se definem através das intensidades de cada canal RGB. A diferença é, como vemos, que nas CSS se podem dar os valores para cada canal em decimal, para o que tem a Calculadora e a tabela acima onde, como se vê, os valores das cores seguras progridem em múltiplos de 51.

font-family: determina o tipo de letra a usar. Convém usar um tipo de letra comum, já que só pode ser visto se existir no sistema do leitor; especificar vários que lhe sejam parecidos, e terminar com a designação da família desse tipo de letra, para que o sistema procure uma dessa família se não encontrar nenhuma das anteriores.

As famílias de tipos de letra conhecidas pelos sistemas são:

Família	Descrição	Exemplos
sans-serif	Sem "anzóis" no fim das perninhas:	Arial, Helvetica, Lucida Sans Regular, Verdana, Futura, Tahoma...
serif	Com "anzóis" no fim das perninhas:	Times New Roman, Times, Bookman Old Style, Century Schoolbook...
monospace	Espaço fixo - um "i" tem direito ao mesmo espaço que um "m"	Courier, Courier New...
cursive	Semelhantes a caligrafia	Comic Sans MS, Zapf Chancery, Staccato222 BT, Lucida Handwrit, Lucida Calligra, LibbyScript2, English 111 Vivace BT...
fantasy	Decorativas	Ericsson GA628, Impact, FuturaBlack BT, Polaroid22, VTypewriter Telegram...

Podemos agora ir para a parte seguinte.

URL http://xyzt.atomic-hosting.com/aulas
João Magalhães, 15-01-2005, Última correcção 26-01-2006
Corrigido com Real Validator