As folhas de estilo podem ser aplicadas
de quatro métodos diferentes:
Embedding
Inline
Linking
Importing
Em nosso tutorial iremos falar dos três
primeiros métodos, por serem os mais usuais. Sobre o quarto método veja
mais detalhes aqui...
MÉTODO
EMBEDDING
O método Embedding (algo como
incorporação, ou embutimento) coloca os comandos CSS dentro de cada
página HTML. Assim sendo esse método permite que uma página possa
utilizar uma formatação diferente das demais.
A incorporação é feita através do uso do comando <STYLE>.
A sintaxe desse método é a seguinte:
<STYLE TYPE="text/css">
<!-
......... todos os
seletores CSS vão aqui nesta área
.........
->
</STYLE>
É importante compreender que esse
comando STYLE deve ser digitado DENTRO da seção <HEAD> da página
HTML, para que possa ser entendido, e portanto funcionar como esperado.
Comentário
adicional: as linhas de início de comentário
<!- e
final de comentário -> são colocadas para evitar que um
browser antigo possa renderizar os comandos como um texto a ser
apresentado na página.
O método INLINE (algo como Em Linha)
coloca os comandos de um determinado estilo diretamente no elemento HTML
desejado. Isso garante que só aquele elemento será estilizado, todos os
demais naquela página continuarão a ser apresentados como normalmente os
browsers fazem com esse elemento. Mesmo utilizando-se do método EMBEDDING,
ou mesmo LINKING, você mesmo assim poderá utilizar num local específico
um CSS específico, In Line naquele elemento.
Como exemplo vamos colocar um CSS InLine
na TAG P, num parágrafo específico, fazendo com que ele fique na cor
vermelha, e seja indentado em 2 centímetros:
<P STYLE="text-indent:
2cm; color: red">Este é o parágrafo
diferente...</P>
Pode-se colocar quantos comandos CSS
InLine desejados, dentro de cada página HTML.
O método LINKING (algo como ligação)
permite carregar os comandos da Folha de Estilo, que estão gravados num
arquivo externo, para dentro da página HTML. Esse método tem como maior
vantagem o fato de que um único arquivo CSS pode ser usado em diversas,
ou todas, páginas de um site.
A mudança nesse arquivo CSS de ligação, externo, refletirá sobre
várias páginas, sem que alterações individuais sejam necessárias.
Para usar este método deve-se criar um
arquivo texto, com todos os estilos a serem aplicados, e que deverá ser
gravado com a extensão CSS. A ligação desse arquivo externo com as
páginas HTML será feita através da seguinte sintaxe:
Esse comando deve ser inserido na seção
<HEAD> de cada página HTML que se desejar estilizar com essa Folha
de Estilos. Ele permite um parâmetro opcional, muito útil se você
precisar incluir mais de um arquivo CSS dentro de alguma página. Veja os
exemplos abaixo:
<LINK REL=StyleSheet HREF="estilo_bas.css" TYPE="text/css"> - que ligará a página ao arquivo Folha de
Estilo de nome estilo_bas.css.
<LINK REL=StyleSheet HREF="estilo_bas.css" TYPE="text/css"
TITLE="FOLHA BASICA"> - que ligará
a página ao arquivo Folha de Estilo de nome estilo_bas.css e que
é identificada como FOLHA BÁSICA quando visualizado através de
um editor de HTML adequado às CSS.
Atenção: não temos condição de dar suporte direto para todos os visitantes;
use nosso
Super Fórum Web Design para poder enviar suas dúvidas. O registro é gratuito!
Para um suporte diferenciado use o nosso
Clube do Help Desk.
