> For the complete documentation index, see [llms.txt](https://docs.samita.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.samita.io/faqs/how-custom-css.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.