# Custom CSS

**Style, look, and feel** are critical aspects of any user interface. ONEWEB recognizes the importance of enabling designers and developers to customize application styling and therefore provides flexible mechanisms to apply **custom CSS** directly within **Page Designer**.

Custom CSS allows users to fine‑tune visual presentation, improve user experience, and align the UI with branding or design standards.

***

#### **Style Editor in Page Designer**

Page Designer includes a built‑in **Style Editor panel** where users can define custom CSS rules.

To open the Style Editor:

1. Locate the **arrow icon** at the bottom‑right corner of the Page Designer screen.
2. Click the arrow to expand the **Style Editor window**.
3. Write custom CSS rules directly inside the editor.

These styles are immediately associated with the page being designed.

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FbJK4eClkdPsZ6lRC8R4m%2Fimage.png?alt=media&#x26;token=0752a49b-947f-4cdc-9e6e-06d9beafb9d5" alt=""><figcaption></figcaption></figure>

***

#### **Applying Custom CSS Classes to Elements**

In addition to writing raw CSS, Page Designer allows users to associate **CSS classes** and **IDs** with individual HTML elements.

To apply a custom CSS class:

1. Select the target HTML element on the page.
2. Open the **Settings and Data** configuration panel on the left.
3. Enter the desired CSS class name in the **Class List** field.
4. Press **Enter** to apply the class to the element.

The class is then available for styling through the Style Editor.

***

#### **Using Element IDs for Styling**

Users can also assign a unique **ID** to an HTML element through the same **Settings and Data** panel.

Once an ID is assigned:

* It can be referenced directly in CSS selectors
* It enables precise, element‑specific styling
* It is useful for advanced UI customization or scripting

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2F8mgbN11CmYKn9J0KrNYE%2Fimage.png?alt=media&#x26;token=1298d3f8-9c2e-45c1-8d19-fb86c461c1e3" alt=""><figcaption></figcaption></figure>

***

#### **Summary**

**Custom CSS** in ONEWEB provides powerful UI customization capabilities through Page Designer.

Key benefits include:

* Direct CSS editing within Page Designer
* Easy assignment of CSS classes and IDs to elements
* Fine‑grained control over layout, spacing, colors, and typography
* Support for branding and visual consistency
* No external tooling required for basic styling changes

By combining the Style Editor with element‑level class and ID configuration, designers can achieve highly customized and visually refined page layouts while maintaining maintainability and structure.


---

# 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.onewebstack.com/oneweb-platform-th/building-apps/ui-page-designer/ux-ui-customization/page-customization/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.