file-codeHow 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;

Last updated

Was this helpful?