Desenvolvimento Web

Dec 12, 2022

Ariane G.

3min Ler

Como linkar CSS no HTML

Como linkar CSS no HTML

Todo site moderno precisa ter um arquivo stylesheet em que todas as classes dos objetos HTML são definidas. Este tutorial ensina a maneira mais popular de linkar o CSS dentro do HTML. Com este método todos os estilos são colocados em um único arquivo de extensão .CSS para que você não precise escrever todos os estilos em um documento HTML. O arquivo CSS fica salvo no servidor e tudo que você precisa fazer é criar um link para vincular com o documento HTML.

Baixe o Guia de Recursos CSS Completo

O que você vai precisar

Antes de iniciar o tutorial você vai precisar de:

  • Acesso ao servidor;
  • Documento HTML (extensão .html ou .htm);
  • Arquivo CSS (com extensão .css);
  • Conhecimento básico de HTML e CSS.

1º Passo — Verificando o Caminho do Arquivo CSS e Inserindo a Linha no Documento HTML

Este link é uma linha simples entre as tags <head> e </head> do seu documento HTML, neste estilo:

<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen" />

O seu código HTML vai ficar desta maneira:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen" />
</head>
<body>
</body>
</html>

Certifique de informar o caminho correto do CSS no href. É recomendado que o arquivo CSS esteja no mesmo diretório do arquivo HTML ou que seja criado um subdiretório chamado CSS para armazenar os arquivos (se os arquivos forem armazenados no diretório CSS, o href deve ser mudado para href=”CSS/stylesheet.css” no exemplo acima).

rel – Esse atributo define o relacionamento entre o arquivo em que o comando está escrito e o arquivo que é definido no caminho do href. Geralmente será apenas um stylesheet se conectamos um arquivo CSS (stylesheet).

type – Esse atributo define o conteúdo do arquivo para qual está linkado. O valor do atributo deve ser um MIME como text/html, text/css e similares. Este tutorial ensina o uso de um stylesheet, então deve ser text/css.

href – O atributo Href especifica a localização do arquivo que você precisa criar um link. Como você está tentando linkar um arquivo CSS, o caminho deve ser um subdiretório do CSS (caso não seja o mesmo diretório do arquivo HTML) e o nome do arquivo CSS. Se o arquivo estiver no mesmo diretório, então você precisa inserir somente o nome do arquivo.

Exemplo da sintaxe href quando o stylesheet está em um subdiretório:

  • Condição 1: O arquivo HTML está no diretório public_html.
  • Condição 2: O arquivo stylesheet (vamos nomeá-lo stylesheet.css) está localizado no subdiretório CSS dentro da pasta public_html.

Sintaxe correta: a definição do href no arquivo HTML deve ser CSS/stylesheet.css

media – Este atributo define a mídia. O seu valor deve ser uma query de mídia. Ocasionalmente stylesheets externos são utilizados e esse atributo é útil quando um stylesheet específico é necessário de acordo com o dispositivo que o visitante está utilizando.

O atributo mídia e determina quando as regras do CSS devem ser utilizadas. “screen” indica o uso em uma tela de computador.
Caso print seja especificado, então as regras só se aplicam quando a página está sendo impressa.
Você também podem incluir diversos arquivos CSS se necessário.

2º Passo — Salvando o Arquivo HTML e Verificando as Alterações

Salve as alterações no HTML e acesse a URL no navegador. Os estilos escritos no arquivo CSS devem aparecer no seu site.

Conclusão

Esta é uma maneira simples de linkar o CSS dentro do HTML. Você pode linkar quantas stylesheets desejar com esta sintaxe. Cada arquivo CSS deve ter seu próprio atributo.

Estas são algumas vantagens deste método:

  • O método permite que você economize tempo porque se a mesma classe é utilizada em diversas páginas você precisa somente definir esta classe no arquivo CSS e não em todas as páginas.
  • O CSS torna seu site mais rápido porque o arquivo é carregado e armazenado em cache no navegador do visitante. Na próxima vez que ele visitar o mesmo site algumas informações sobre o site já estão no histórico do navegador.
  • Seu site irá ranquear melhor nos mecanismos de busca. Como os códigos de stylesheet são definidos no arquivo .CSS, então sua página será praticamente texto simples fazendo com que os mecanismos de busca não tenham dificuldades para ler. A clareza do conteúdo é um dos principais fatores para ter sucesso no ranqueamento do seu site.
Author
O autor

Ariane G.

A Ariane é SEO Team Leader com experiência em conteúdo, localização e SEO. Seu desafio é levar a Hostinger ao topo dos resultados no Brasil, França e Reino Unido. Eventualmente ela compartilha seu conhecimento no blog e nos tutoriais da Hostinger e no tempo livre ela gosta de explorar lugares novos e viver intencionalmente.

Mais de Ariane G.