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).
Explicação dos atributos do link:
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.
Comentários
abril 11 2021
Não estou conseguindo linkar no index.html, que cria um grid de linha X coluns, mesmo colocando meu css no mesmo diretório do index.html, poderia, por favor me ajudar?
abril 16 2021
Olá Helio, dá uma conversada com nosso time de sucesso do cliente!
abril 26 2022
Oi, eu também preciso de ajuda. Ja procurei em diversos sites. Eu faço sempre do mesmo modelo, presto atenção nos detalhes para ver se esta correto, mas nunca consigo linkar ambos, simplesmente não vai. Deixo na mesma pasta, conforme alguns dizem, ou em pastas separadas como outros dizem, faço sempre certinho e não vai! Existe alguma extensão que eu deva atualizar ou realizar para dar certo?
maio 13 2022
Olá, eles devem estar na mesma pasta sim. De qualquer jeito, nós achamos que é possível definir o caminho completo do diretório na parte do href! Vê se este vídeo aqui te ajuda! Se você falar inglês, este tutorial aqui é mais completinho ?