Guia de cores CSS: como usar CSS para estilizar fundos em GemPages

O que são cores CSS?

CSS (Cascading Style Sheets) é usado para controlar a aparência dos elementos HTML em uma página web. Uma das principais ferramentas de estilo em CSS é cor. Você pode aplicar cores ao texto, planos de fundo, bordas, botões e muito mais.

Maneiras comuns de definir cores em CSS:

1. Cores Nomeadas – Palavras-chave predefinidas como vermelho, azul, ou o preto.
   Exemplo: cor vermelha;
2. Códigos hexadecimais – Códigos de seis dígitos começando com #.
   Exemplo: cor: #ff0000;
3. RGB (vermelho, verde, azul) – Cada valor varia de 0 a 255.
   Exemplo: cor: rgb(255, 0, 0);
4. HSL (matiz, saturação, luminosidade) – Mais intuitivo para designers.
   Exemplo: cor: hsl(0, 100%, 50%);
5. RGBA / HSLA – Igual ao anterior, mas com um valor alfa (transparência).
   Exemplo: cor de fundo: rgba (255, 0, 0, 0.5);

Esses formatos oferecem flexibilidade e controle sobre o design visual do seu site.

Lista de cores CSS (mais comuns)

Aqui estão alguns dos nomes de cores CSS mais usados ​​e seus códigos hexadecimais:

Você pode usá-los diretamente no seu CSS para estilizar elementos.

Como alterar a cor de fundo de uma seção em GemPages usando CSS

Se você estiver usando GemPages, você pode alterar a cor de fundo de uma seção usando código CSS personalizado. Veja como:

Passo 1: No Editor GemPages, clique com o botão direito na seção onde deseja aplicar um plano de fundo personalizado e selecione “Código personalizado.”

Passo 2: Cole o código CSS no Guia CSS dentro do modal Código Personalizado.

Aqui está um exemplo de CSS que você pode usar:

body {

     fundo: #3355ff !importante;    

}  

Substitua #3355ff pelo código de cor hexadecimal de sua escolha.

Por exemplo: use #000000 para preto, #ffffff para branco ou qualquer outro código hexadecimal que corresponda às suas preferências de design.

O !important garante que a cor de fundo seja aplicada de forma consistente em toda a página, substituindo quaisquer estilos conflitantes.

Passo 3: Clique Economize e visualização as alterações. Este CSS substituirá qualquer cor de fundo padrão definida pelo tema ou GemPages.

Perguntas frequentes

1. Como posso direcionar uma seção ou elemento específico no GemPages usando CSS?

Você pode direcionar seções específicas em GemPages adicionando um nome de classe personalizado para um elemento e referenciá-lo em seu CSS.
Exemplo:

• Em GemPages, copie o nome da classe da seção.

• Use o seguinte CSS:

.minha-seção {

  cor de fundo: #e0e0e0;

}

Este método lhe dá mais controle do que usar corpo.

2. Posso usar as cores do Tailwind CSS no Shopify ou no GemPages?

Não diretamente. O Tailwind CSS é um framework utilitário que precisa ser integrado durante o desenvolvimento. A menos que o Tailwind já esteja incluído na sua configuração do Shopify ou GemPages, você não pode usar suas classes de cores como bg-vermelho-500. Você precisará usar CSS padrão.

3. O que acontece se meu CSS personalizado não for aplicado no GemPages ou no Shopify?

Se o seu CSS personalizado não se aplicar:

• Verifique se outro estilo está substituindo-o.
• Adicione ! Importante para forçá-lo (use com cuidado).
• Certifique-se de que seu seletor seja específico o suficiente.
• No GemPages, certifique-se de ter salvo o Código Personalizado e publicado as alterações.