Do editor ao arquivo .css
Até aqui o CSS morou num bloco style, dentro do editor. Num projeto real, ele vive num arquivo próprio, ligado à página por um link, e você o inspeciona com as ferramentas do navegador.
Estudar esta lição interativa →O bloco <style> cabe bem num editor de exemplo, mas num site de verdade o CSS vive num arquivo próprio, com a extensão .css, que várias páginas compartilham (você viu a ideia na lição "Onde o CSS vive"). Aqui vai o caminho prático para levar o projeto da página de perfil, do curso de HTML, para o seu computador com a aparência que você construiu.
1. Crie o arquivo
estilo.cssNa mesma pasta do index.html da página de perfil (a pasta criada na lição "Do editor ao navegador", do curso de HTML), crie estilo.css e salve em UTF-8.
2. Ligue ao HTML
<link rel="stylesheet" href="estilo.css">Dentro do head do index.html. O rel="stylesheet" é obrigatório: é ele que diz ao navegador que o arquivo é um estilo. O href segue as mesmas regras de caminho relativo das imagens.
3. Mova o CSS
Copie as regras do bloco style do projeto (sem as tags style) para o estilo.css. O HTML de verdade não precisa mais do bloco style.
4. Salve e recarregue
Salve os dois arquivos e aperte F5. Se a página ficou sem estilo, confira o nome do arquivo (estilo.css é diferente de Estilo.css em muitos servidores), o caminho no href e, por último, tente Ctrl+F5, que ignora a cópia guardada pelo navegador.
Com a página aberta, aperte F12 e olhe a aba Elements. Clique num elemento da página (ou use o botão de seta para escolher um). No Chrome e no Edge, dois painéis contam a história do CSS dele. O Styles lista todas as regras que miram o elemento, da mais forte para a mais fraca, e risca as declarações que perderam: é a cascata do Módulo 4 e a especificidade desenhadas na sua frente. O Computed mostra o valor final de cada propriedade, já resolvido (um 2rem aparece em pixels, por exemplo), mais o desenho das camadas margin, border e padding do Módulo 2, e, ao expandir uma propriedade, de qual regra o valor veio.
As ferramentas do navegador deixam editar qualquer valor ao vivo, ótimo para experimentar uma cor ou um espaçamento. Mas essa alteração mora só na memória daquela aba: ao recarregar, tudo volta ao que está no arquivo. Quando chegar a um valor que gostou, copie-o de volta para o estilo.css e salve.
Para colocar a página no ar (passo a passo na lição "Publique o seu perfil", do curso de HTML), o estilo.css sobe na mesma pasta do index.html, e o href="estilo.css" continua funcionando sem mudar nada, porque é um caminho relativo.