CSS Colors Guide: How to Use CSS to Style Backgrounds in GemPages

What Are CSS Colors?

CSS (Cascading Style Sheets) is used to control the appearance of HTML elements on a webpage. One of the core styling tools in CSS is color. You can apply color to text, backgrounds, borders, buttons, and more.

Common Ways to Define Colors in CSS:

1. Named Colors – Predefined keywords like red, blue, or black.
   Example: color: red;
2. Hexadecimal Codes – Six-digit codes starting with #.
   Example: color: #ff0000;
3. RGB (Red, Green, Blue) – Each value ranges from 0–255.
   Example: color: rgb(255, 0, 0);
4. HSL (Hue, Saturation, Lightness) – More intuitive for designers.
   Example: color: hsl(0, 100%, 50%);
5. RGBA / HSLA – Same as above, but with an alpha (transparency) value.
   Example: background-color: rgba(255, 0, 0, 0.5);

These formats give you flexibility and control over your site’s visual design.

CSS Colors List (Most Common)

Here are some of the most widely used CSS color names and their hexadecimal codes:

You can use these directly in your CSS to style elements.

How to Change Background Color of a Section in GemPages Using CSS

If you’re using GemPages, you can change a section’s background color using custom CSS code. Here’s how:

Step 1: In GemPages Editor, right-click on the section where you want to apply a custom background and select “Custom Code.”

Step 2: Paste the CSS code into the CSS tab inside the Custom Code modal.

Here is a CSS example you can use:

body {

     background: #3355ff !important;    

}  

Replace #3355ff with the hex color code of your choice.

E.g.: Use #000000 for black, #ffffff for white, or any other hex code to match your design preferences.

The !important ensures the background color is applied consistently across the entire page, overriding any conflicting styles.

Step 3: Click Save and Preview the changes. This CSS will override any default background color set by the theme or GemPages.

Frequently Asked Questions

1. How do I target a specific section or element in GemPages using CSS?

You can target specific sections in GemPages by adding a custom class name to an element and referencing it in your CSS.
Example:

• In GemPages, copy the section class name.

• Use the following CSS:

.my-section {

  background-color: #e0e0e0;

}

This method gives you more control than using body.

2. Can I use Tailwind CSS colors in Shopify or GemPages?

Not directly. Tailwind CSS is a utility-first framework that needs to be integrated during build time. Unless Tailwind is already included in your Shopify or GemPages setup, you cannot use its color classes like bg-red-500. You’ll need to use standard CSS instead.

3. What happens if my custom CSS doesn’t apply in GemPages or Shopify?

If your custom CSS doesn’t apply:

• Check if another style is overriding it.
• Add !important to force it (use with care).
• Make sure your selector is specific enough.
• In GemPages, ensure you saved the Custom Code and published the changes.