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.
