# 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**

<figure><img src="/files/5po23LO95bh1lSGrcqoj" alt=""><figcaption></figcaption></figure>

⚠️ 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:

<figure><img src="/files/DfrMbtGU9G7GjSG2KIKZ" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/DC7Sw3q5bY2BbxNn5FrC" alt=""><figcaption></figcaption></figure>

***

### 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;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.samita.io/faqs/how-custom-css.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.