Linkando um CSS dentro de seu HTML – style.css

Aqui está a anatomia completa de como o navegador lê essa linha, dividida termo a termo:

Vamos dissecar essa linha de código anatômica e cirurgicamente. Essa instrução é o que chamamos de Elemento Vazio ou Tag Única no HTML, pois ela não envolve um texto e, por isso, não precisa de uma tag de fechamento (como um </link>). Ela carrega todas as suas informações dentro de si através de atributos.

Com prazer! Vamos dissecar essa linha de código anatômica e cirurgicamente. Essa instrução é o que chamamos de Elemento Vazio ou Tag Única no HTML, pois ela não envolve um texto e, por isso, não precisa de uma tag de fechamento (como um </link>). Ela carrega todas as suas informações dentro de si através de atributos.

Aqui está a anatomia completa de como o navegador lê essa linha, dividida termo a termo:

[Diagram of HTML link element syntax anatomy]

Tabela de Decomposição da Sintaxe

O papel de cada engrenagem

• O Elemento <link: Ele é um conector universal. Sozinho, ele não faz nada; ele apenas limpa o caminho para trazer recursos de fora (como fontes do Google, ícones ou, neste caso, estilos).
• O Atributo rel="...": Esse passo é vital. O navegador precisa saber o que fazer com o arquivo antes mesmo de baixá-lo. Se você esquecer o rel="stylesheet", o navegador até encontrará o seu arquivo CSS, mas não saberá que deve usá-lo para pintar a página. Ele simplesmente ignorará as regras de cores e layouts.
• O Atributo href="...": Funciona como o endereço de GPS do arquivo.
  • Se estiver apenas style.css, significa que o arquivo de estilo está na mesma pasta que o arquivo HTML.
  • Se estivesse em outra pasta, o caminho mudaria (ex: href="css/style.css").

Nota do Professor: Repare que a estrutura de um atributo é sempre a mesma: nome-do-atributo=”valor”. O nome diz o que você está configurando e o valor (entre aspas) entrega o dado específico para o navegador processar.