Adicione estilização para todo o site

Agora que você tem uma página Sobre estilizada, é hora de adicionar alguns estilos globais para o resto do seu site!

Se prepare para...

• Aplicar estilos globalmente

Adicione uma folha de estilos global

Seção intitulada Adicione uma folha de estilos global

Você pode ver que a tag <style> do Astro é escopada por padrão, o que significa que ela apenas afeta os elementos em seu próprio arquivo.

Há algumas formas de definir estilos globalmente no Astro, mas neste tutorial, você irá criar e importar um arquivo global.css em cada uma de suas páginas. Essa combinação de folha de estilo e tag <style> te dá a habilidade de controlar alguns estilos para todo o site, e aplicar alguns estilos específicos exatamente onde você os quer.

1. Crie um novo arquivo em src/styles/global.css (Você terá que criar uma pasta styles primeiro.)

2. Copie o seguinte código em seu novo arquivo, global.css

   src/styles/global.css

   html {
     background-color: #f1f5f9;
     font-family: sans-serif;
   }
   
   body {
     margin: 0 auto;
     width: 100%;
     max-width: 80ch;
     padding: 1rem;
     line-height: 1.5;
   }
   
   * {
     box-sizing: border-box;
   }
   
   h1 {
     margin: 1rem 0;
     font-size: 2.5rem;
   }

3. Em about.astro, adicione a seguinte declaração de importação ao seu frontmatter:

   src/pages/about.astro

   ---
   import '../styles/global.css';
   
   const pageTitle = "Sobre Mim";
   
   const identity = {
     firstName: "Sarah",
     country: "Canadá",
     occupation: "Escritora Técnica",
     hobbies: ["fotografia", "observar pássaros", "beisebol"],
   };
   
   const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Escrever Documentação"];
   
   const happy = true;
   const finished = false;
   const goal = 3;
   
   const skillColor = "navy";
   const fontWeight = "bold";
   const textCase = "uppercase";
   ---

4. Verifique a pré-visualização do navegador de sua página Sobre, e você deve ver os novos estilos aplicados!

Tente você mesmo - Importe sua folha de estilos global

Seção intitulada Tente você mesmo - Importe sua folha de estilos global

Adicione a linha de código necessária para cada arquivo .astro em seu projeto para aplicar seus estilos globais em cada página do seu site.

✅ Me mostre o código! ✅

Adicione a seguinte declaração de importação para os outros dois arquiivos de página: src/pages/index.astro and src/pages/blog.astro

src/pages/index.astro

---
import '../styles/global.css';
---

Faça quaisquer alterações ou adições que você quiser para o conteúdo da sua página Sobre adicionando elementos HTML para o template da página, seja estaticamente ou dinamicamente. Escreva qualquer JavaScript adicional no seu script frontmatter para te fornecer valores para utilizar no seu HTML. Quando você estiver feliz com essa página, faça commit das suas mudanças para o GitHub antes de seguir para a próxima lição.

Analise o Padrão

Seção intitulada Analise o Padrão

Sua página Sobre agora está estilizada utilizando ambos o arquivo global.css e a tag <style>.

• Os estilos de ambos os métodos de estilização estão sendo aplicados?

  Sim

• Há quaisquer estilos conflitantes, e se sim, quais são aplicados?

  Sim, <h1> tem um tamanho de 2.5rem globalmente, porém é 4rem localmente na tag <style>. A regra local 4rem é aplicada na página Sobre.

• Descreva como global.css e <style> trabalham juntos.

  Quando estilos conflitantes são definidos ambos globalmente e na tag <style> local de uma página, os estilos locais devem sobrescrever quaisquer estilos globais. (Porém, pode ter outros fatores envolvidos, então sempre inspecione visualmente o seu site para certificar-se que seus estilos estão sendo apropriadamente aplicados!)

• Como você escolheria entre declarar um estilo no arquivo global.css ou em uma tag <style>?

  Se você quer que um estilo seja aplicado por todo o site, você deve escolher utilizar o arquivo global.css. Porém, se você quer estilos aplicados apenas ao conteúdo HTML de um único arquivo .astro, e não afetar outros elementos no seu site, você deve escolher uma tag <style>.

Checklist

Seção intitulada Checklist

• Eu posso adicionar estilos CSS globais importando um arquivo .css.

Recursos

Seção intitulada Recursos

• Sintaxe do Astro vs JSX - comparação

• tag <style> do Astro

• Variáveis CSS no Astro