---
title: "Style Administration CSS Upload"
slug: "style-administration-css-upload"
tags: ["administration", "guides"]
updated: 2026-09-11T19:14:22Z
published: 2026-09-15T20:08:17Z
canonical: "docs.unqork.io/style-administration-css-upload"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Style Administration CSS Upload

CSS Upload lets Creators upload custom CSS stylesheets to control the visual design of Unqork applications. CSS is a style sheet language that handles website styling. While HTML provides structure, CSS controls layout, colors, fonts, and branding. Use CSS Upload when the built-in style options do not meet branding requirements, or when consistent styling is needed across multiple applications in an environment.

CSS styles apply to all applications in the environment. When a CSS file is updated and reuploaded, the changes cascade throughout every application using that style.

## Adding a New Style

A style consists of a valid CSS file and its assets. Click **Add Style** to open the Add Style page, upload the CSS file, and complete the settings.

| Setting | Description |
| --- | --- |
| **Name** | A unique name for the style. Must contain only letters, numbers, and hyphens, and must not begin with a hyphen. Required. |
| **Description** | Notes about the stylesheet. Visible to all Creators with access to the environment. Optional. |
| **Base Style** | An existing style to use as the foundation for this style. See [Setting a Base Style](/unqorkai/docs/style-administration-css-upload#setting-a-base-style). Optional. |
| **Stylesheet** | The CSS file to upload. Accepts `.css` files only. Required. |
| **Set as default style** | When checked, this setting sets this style as the default applied across the environment. |

Click **Save Changes** to save, or **Cancel** to discard.

> [!NOTE]
> On the Style Administration page, existing Unqork-managed styles display the **Unqork** badge. Styles created by Creators do not display this badge.

## Editing a Style

1. On the **Style Administration** page, open the actions menu on the style row.
2. Select **Edit**.
3. Make changes as needed. **Name** is read-only after creation. To replace the CSS file, click the remove icon next to the existing file to reveal the upload area, then upload a new file.
4. Click **Save**.

> [!WARNING]
> Uploading a new stylesheet replaces the existing stylesheet.

## Setting a Base Style

Base styles let Creators use an existing style's CSS file as a foundation. The new style's CSS layers on top of the base, allowing variations to be built without starting from scratch. A style used as a base displays the **Base** badge on the Style Administration page.

> [!NOTE]
> When there is a CSS conflict between a base style and the style applied to it, the applied style overrides the base.

### When creating a new style

1. Click **Add Style**.
2. Fill out the required fields including the CSS stylesheet.
3. From the **Base Style** drop-down, select an existing style to use as the base.
4. Click **Save Changes**.

> [!WARNING]
> You must upload a CSS stylesheet when creating a style, even when selecting a base style.

### For an existing style

> [!NOTE]
> A style that has a base style assigned cannot itself be used as a base for other styles.

1. On the **Style Administration** page, open the actions menu on the style row.
2. Select **Edit**.
3. From the **Base Style** drop-down, select an existing style.
4. Click **Save**.

### Setting a temporary base style in Express View

To test a base style combination without saving it:

1. In Express View, click the **Preview Style** drop-down at the top right.
2. Select the style to preview.
3. In the browser URL bar, after `style={styleName}`, add `&baseStyle={baseStyleName}`. For example: `https://your-env.unqork.io/?style=myStyle&baseStyle=baseStyleName#/`
4. Press **Enter** to reload.

> [!TIP]
> This combination is not saved. Navigating away from Express View removes the temporary base style.

### Removing a base style

1. On the **Style Administration** page, open the actions menu on the style row.
2. Select **Edit**.
3. Next to the **Base Style** drop-down, click the remove icon to disconnect the base style.
4. Click **Save**.

> [!WARNING]
> To delete a style that is currently used as a base, disconnect it from all styles that reference it first.

## Managing Style Assets

Style assets are the files referenced in a style's CSS: fonts, images, icons, and other resources. Manage assets from the **Assets** tab in the style's edit view.

To open the Assets tab:

1. On the **Style Administration** page, open the actions menu on the style row.
2. Select **Edit**.
3. Select the **Assets** tab.

### Asset actions

| Action | Description |
| --- | --- |
| **Upload** | Uploads one or more files to the current folder. |
| **New Folder** | Creates a subfolder. Folder names must contain only letters, numbers, and hyphens, must not begin with a hyphen, and must be 255 characters or fewer. |
| **Download** | Downloads the selected file. |
| **Copy Path** | Copies the asset's relative to the clipboard for use in CSS. |
| **Delete** | Permanently removes the asset or folder. |

### Using an asset path in CSS

After uploading an asset, use **Copy Path** to get the relative path, then reference it in your CSS file. Asset paths follow the pattern `styles/{styleName}/path/to/asset`.

To reference an asset path in a Content component:

1. In Module Builder, open the Content component settings.
2. Paste the asset path into the content field.
3. Remove the leading `.` from the path.
4. Prepend the path with `styles/{styleName}/` where `{styleName}` is the name of the style.
5. Insert the CSS rule that uses the asset.
6. Click **Save**.

## Promoting a Style

Styles are promoted independently of applications. Promote a style to each target environment where it is needed.

1. On the **Style Administration** page, open the actions menu on the style row.
2. Select **Promote**.
3. Select a target environment from the drop-down.
4. Click **Promote**.

> [!NOTE]
> Promoting a style also promotes its associated base styles and assets.

## Deleting a Style

To remove a style that is no longer needed:

1. On the **Style Administration** page, open the actions menu on the style row.
2. Select **Delete**.
3. Confirm the deletion.

> [!CAUTION]
> Deleting a style also deletes all assets saved to it.

---

**Changelog**

| Date | Change |
| --- | --- |
| 2026-06-24 | Migrated from legacy Doc360 (v1) to UnqorkAI platform documentation. Updated all UI labels, button names, and navigation to match the UnqorkAI platform. Removed remote root section (legacy only). |

Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users.

Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform.

HTML (Hyper Text Markup Language) is the standard markup language for for achieving font, color, graphic, and hyperlink effects when creating web pages.

Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.

A URL (uniform resource locator) is a unique identifier used to locate a resource on the internet. Also known as a web address.

The Unqork front-end application framework that delivers Creator-built applications to end-users. Express is the layer end-users interact with—the published forms, screens, and navigation built in the Module Builder. Express is distinct from Express View, which is a Creator-facing preview tool in the IDE.

A place on your operating system that stores recently copied content. The clipboard only stores one item at a time.

The UI (user interface) is a device's end-user interaction and communication point. It can include display screens, keyboards, and mouse. It is also how a user interacts with your application.