Tutoriais

Como Linkar Folhas de Estilo CSS no HTML

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.

Lucas Lemos

Criador do site TecForest, aprendi PHP aos 14 anos e desde então continuo estudando e procurando aprender mais sobre programação. Sou apaixonado por tecnologia e tenho como Hobby Blogs e Páginas. Me formei em Análise e Desenvolvimento de Sistemas em 2016, também sou Técnico em Informática e em Manutenção em Celulares.

Artigos relacionados

Deixe um comentário

O seu endereço de e-mail não será publicado.

Botão Voltar ao topo