How custom CSS ?

GUIDE: HOW TO FIND CSS CLASSES AND ADD CUSTOM CSS

This document is written for end users and beginners. It explains how to:

• Find (inspect) CSS classes on a website

• Add custom CSS code to change the website appearance

It applies to most modern websites such as Shopify, WordPress, and custom-built websites.

---

1. What is CSS?

CSS (Cascading Style Sheets) controls how a website looks, including:

• Colors

• Font sizes and styles

• Spacing (margin, padding)

• Alignment and layout

CSS works by targeting HTML elements using selectors such as class names, IDs, or tags.

Example:

.title {color: red;font-size: 20px;}

---

2. How to find a CSS class on a website

Step 1: Open the page you want to edit

Go to the page that contains the element you want to modify (text, button, product title, etc.).

---

Step 2: Open Inspect / Developer Tools

You can do this in one of the following ways:

• Right-click on the element → select Inspect

• Or use keyboard shortcuts:

  • Mac: Command (⌘) + Option + I

  • Windows: Ctrl + Shift + I

---

Step 3: Identify the CSS class

After inspecting, you will see HTML code similar to this:

<div class="product-title text-bold">Men's T-Shirt</div>

👉 In this example:

• product-title is a CSS class

• text-bold is another CSS class

⚠️ Notes:

• One element can have multiple classes

• Classes are separated by spaces

---

Step 4: Check which CSS rules apply

On the right side (in the Styles panel), you will see the CSS rules currently applied:

.product-title {font-size: 18px;color: black;}

👉 Prefer using clear and meaningful class names that are less likely to change.

---

3. How to write CSS using a class

Basic syntax

.class-name {property: value;}

Example:

for this label id 74936:

---

4. Common CSS properties

Text & color

color: #000;font-size: 16px;font-weight: bold;text-transform: uppercase;

Spacing

margin: 10px;padding: 20px;

Size

width: 100%;max-width: 1200px;height: auto;

Alignment

text-align: center;margin: 0 auto;