2
respostas

O que significa esse rel="stylesheet" e href="style.css"?

O curso esta me ensinando a copiar e colar, mas não sei o fundamento. Qual o significado de "rel" "href"??? Poderia ter um pouco mais de didática para entender o porque tenho que fazer isso e não simplesmente que tenho que fazer isso.

2 respostas

Olá, bom dia! "rel" e "href" são dois atributos que a tag HTML link recebe. A tag link tem a função de relacionar o arquivo HTML que você está escrevendo com algum outro arquivo externo. O atributo "rel" vem de relacionamento, ele diz qual é a função do arquivo que você está importando. Existem vários tipos de rel, mas o mais usado é "stylesheet", que significa folha de estilos, mas existem outros como "preconnect", "alternate", "author", "bookmark", "icon" e entre outros. Já o "href" vem de referência, ele indica onde está o arquivo que você quer importar, que pode ser um arquivo dentro de uma pasta no seu computador, por exemplo: "href"="/estilos/styles.css", ou também uma URL da internet. Veja alguns exemplos:

<link href="style.css" rel="stylesheet" title="Estilos padrão">
<link href="style-alternativo.css" rel="alternate stylesheet" title="Estilos alternativos">

Importando uma imagem para aparecer como ícone na guia do navegador.

<link rel="icon" type="image/png" href="icone.png">

Pegando uma fonte diferente na API do Google Fonts:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@500&family=Roboto&display=swap" rel="stylesheet">

Você pode ler mais sobre isso na documentação da MDN: https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/link

Muito obrigado pela resposta! Ajudou muito, fica mais fácil entendendo o conceito.