CSS Tip: As 3 formas de inserir CSS em uma página web
Postado por: Pedro Rogério emEsse post visa atingir quem está iniciando em CSS e não sabe as formas possíveis de inserí-los em uma página.
Quem está iniciando no mundo dos WebStandards, mais precisamente em CSS, muitas vezes acaba se perdendo e não sabe da existência das 3 formas possíveis de se inserir CSS em uma página, algumas vezes por culpa do próprio desenvolvedor, que não tem interesse em buscar aprendizado, ou por culpa de algum editor WYSIWYG, e é aí onde os maiores problemas acontecem, pois o desenvolvedor perde o contato com o código e acaba virando desenvolvedor de um editor só.
1ª Forma: CSS diretamente nas tags HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
<title>Seu título</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<p style="color:#B000FF;">CSS dentro das tags HTML</p>
</body>
</html>
Essa forma não é recomendada pois alí você está misturando a camada de conteúdo(HTML), com a camada de apresentação(CSS). Utilize somente em casos de extrema necessidade, ou somente para efetuar testes.
2ª Forma: CSS dentro do Head de sua página
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
<title>Seu título</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
.texto {color:#B000FF;}
</style>
</head>
<body>
<p class="texto">Estilo chamado através do head da página</p>
</body>
</html>
Nessa 2ª forma, utilizamos de classes ou ids para dar estilo a nossa página, inserindo o CSS denro do Head de nossa página.
3ª Forma: CSS dentro do Head de sua página vindo de um arquivo externo
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”pt-br” lang=”pt-br”>
<head>
<title>Seu título</title>
<meta http-equiv=”content-type” content=”text/html;charset=utf-8″ />
<link rel=”stylesheet” type=”text/css” href=”estilo.css” />
</head>
<body>
<p class=”texto”>Estilo chamado através do head da página</p>
</body>
</html>
Essa é a forma mais recomendada, pois o nosso CSS fica em um arquivo externo, e as camadas ficam todas separadas, e também temos a vantagem de que se precisarmos efeuar alguma manutenção no CSS, não precisaremos tocar no HTML.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
Esqueceu a @import :)
@Muniz,
Putz cara, nem lembrei, escrevi isso ontem(domingo), mas alí estão listadas, pelo menos, as mais usadas.
Eu uso apenas o @import… isso é ruim ?
@Cristian,
Dependendo da forma como você utiliza o @import, ele pode não funcionar em alguns browsers. Abaixo segue 2 referências sobre o assunto:
http://centricle.com/ref/css/filters/
http://imfo.ru/csstest/css_hacks/import.php
[...] um post anterior, eu citei as 3 formas mais conhecidas e utilizadas de se inserir CSS em uma página, mas [...]
Tem como eu buscar as informações do banco de dados e inseri-las no css com o php?
Ex: Cor verde no banco de dados, quero coloca-la dentro de uma referencia do css.
Obrigado.
@Paulo Cesar,
Sim, isso é possível, só que seu arquivo CSS deve estar com a extensão .php
Acho que ficou faltando uma informação sobre a última forma.
O href deve apontar para url completa da página (como você mesmo faz no cabeçalho desta página).
Caso contrário, se vc utiliza o path relativo ao raiz, o sistema não busca a página.
Ao passo que, se vc utilizar a @import, isto funcionará e buscará o arquivo .css no path raiz relativo no servidor.
Obtive a informação depois de um teste que fiz, por favor me corrija se estou errado.
Marz,
Não é necessário apontar o caminho completo, no meu blog está indicado o caminho completo pois o WordPress faz isso sozinho.
muito bom
Tem como inserir CSS no FCKEditor sem usar a opção 1 – colocar css direto no html???
opa, vlw kra, tinha me esquecido como fazia isso!