Todos os sites modernos utilizam folhas de estilos CSS separadas onde todas as classes dos objetos do HTML são definidas. A folha de estilo stylesheet separadas da página HTML pode ser usada para definições de objetos em geral, e o vínculo da folha de estilo com a página HTML faz com que todos os objetos tenham as definições da folha de estilo.
Quando usamos o CSS dentro da própria página HTML, toda vez que fossemos alterar alguma propriedade de algum objeto pelo CSS, teríamos que alterar de cada página, mas já usando a folha de estilo, ele altera de todas as páginas ao mesmo tempo.
Um exemplo simples: vamos supor que o seu site tenha 30 páginas, e use para definir as propriedades de cada objeto as tags <style></style>, se um dia resolvesse alterar as propriedades da tag body, precisaria alterar de página por página para que a alteração fosse aplicada em todo site, já com a folha de estilo stylesheet, precisaria apenas alterar a folha de estilo, para que todas as páginas com a mesma vinculada fossem alteradas.
Passo a passo de como linkar a folha de estilo
1 – Crie um arquivo de texto, ou dependendo do editor que você esteja usando já selecione o tipo de arquivo CSS na hora de cria-lo, depois salve o arquivo dentro da pasta do seu site com o nome que achar melhor e com a extensão .CSS
Exemplo: estilo.css
2 – Dentro de todas as páginas HTML que deseja ter as definições de estilo da folha de estilo criada cole a seguinte linha dentro das tags <head></head>
<link rel="stylesheet" type="text/css" href="estilo.css" media="screen" />
Lembre-se de colocar dentro das aspas em href=”” o diretório e o nome + extensão da folha de estilo.
Certifique-se de colocar o diretório exato da sua folha de estilo, caso contrario ela pode não funcionar.
Por fim a sua página, ficará assim:
<!DOCTYPE html>
<html>
<head>
<title>TecForest.com.br</title>
<link rel="stylesheet" type="text/css" href="estilo.css" media="screen" />
</head>
<body>
</body>
</html>
Atributos do link:
rel – Define o relacionamento entre o arquivo de destino que é definido no caminho do href. Geralmente para folhas de estilo, é usado apenas um stylesheet se o arquivo do href for um arquivo CSS (stylesheet).
type – Define o conteúdo do arquivo para qual será buscado pelo href. Geramente para arquivos CSS stylesheet é usado o text/css.
href – Define o diretório ou endereço de onde se encontra a folha de estilo CSS stylesheet.
