Os estilos podem ser inseridos
nos documentos de várias maneiras diferentes:
- por meio de um link direcionado para um
arquivo de style sheet em separado, funcionando para uma ou mais páginas web
Este é o método que eu recomendo, porque ele permite usar
um único style sheet para várias páginas, talvez até para um site inteiro, o que é
muito mais eficiente. (Isto pode não funcionar se você tende a variar consideravelmente
a formatação de cada página, mas geralmente esta não é uma boa idéia em termos de
comunicação efetiva.) Este método também separa inteiramente as especificações do
style sheet do conteúdo da página, o que elimina qualquer chance de browsers não
compatíveis com CSS confundirem as informações do style com o conteúdo da página.
Neste caso, você define os estilos num arquivo em
separado com a extensão .css, e faz uma referência a ele através de uma tag de link
que se posiciona entre os tags de head de cada arquivo HTML que irá utilizá-lo:
Exemplo
<html>
<head>
<link rel=STYLESHEET href="styles/stylesheets.css"
type="text/css">
<title>...</title>
</head>
<body>...
Observe o atributo "type=text/css",
também usado na tag <style> logo abaixo, para identificar o arquivo referido como
cascading style sheet. (A última versão do Internet Explorer não precisa disso, mas é
mais prudente colocar porque outros browsers pedem quando eles dão suporte para style
sheets.)
- por meio de uma inserção de um style sheet
numa única página web
Neste caso, você
define os styles dentro de uma tag de style que se posiciona entre a tag
<html> e a tag <body>:
Exemplo
<html>
<head>
<style type="text/css">
<!--
P { font-size: 10pt; font-family: "Verdana, Arial, Sans-Serif"; color: #000066 }
H1 { font-size: 16pt; font-family: "Impact, Arial, Sans-Serif"; color: #990000 }
-->
</style>
...</head>
<body>...
Observe que em concreto as especificações do
estilo (que eu explicarei nas páginas seguintes) são inseridas dentro de uma tag de comentário
-- isto é para assegurar que os browsers que não suportam CSS não interpretarão estas
linhas como conteúdo a ser mostrado.
- pelo acréscimo de atributos de estilo inline
em algumas tags como <p>, <div>, ou <span>
Neste caso você especifica um estilo para um único bloco
de texto, ou usa a tag <span> para especificar o estilo para uma palavra ou frase:
Exemplo
<div style="margin-left:
0.5in; font-size: 10pt">
Este deve ser um bloco indentado com algum
<span style="font-weight: bold; background: #FFFF00"> texto selecionado</span>
dentro dele
</div>
|