Ir para conteúdo / Skip to content

CSS TIP: AS 3 FORMAS DE INSERIR CSS EM UMA PÁGINA WEB

Postado em: 8 de outubro de 2007 por Pedro Rogério

Esse 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.

Isso pode lhe interessar:

Deixe seu comentário

5 comentários para esse post

  1. Muniz disse: 08.10.07 ás 09:06
    #1

    Esqueceu a @import :)

  2. Pedro Rogério disse: 08.10.07 ás 09:16
    #2

    @Muniz,

    Putz cara, nem lembrei, escrevi isso ontem(domingo), mas alí estão listadas, pelo menos, as mais usadas.

  3. Cristian Trentin disse: 08.10.07 ás 11:13
    #3

    Eu uso apenas o @import… isso é ruim ?

  4. Pedro Rogério disse: 08.10.07 ás 12:07
    #4

    @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

  5. COMO INSERIR CSS EM UMA PÁGINA VIA @IMPORT » Pinceladas da Web - Reflexões sobre XHTML, CSS, PHP e WebStandards disse: 10.10.07 ás 06:01
    #5

    [...] um post anterior, eu citei as 3 formas mais conhecidas e utilizadas de se inserir CSS em uma página, mas [...]

Deixe seu comentário