---
title: "Style Administration: CSS Upload"
slug: "style-administration-css-upload"
updated: 2026-05-04T18:27:12Z
published: 2026-05-04T18:27:12Z
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

Your application design goes beyond pretty colors. The styles you choose are the key to a memorable, user-friendly journey. After you create your design in CSS, upload the file using CSS Upload. CSS is a style sheet language that customizes the look and feel of a website. While HTML provides a website's structure, CSS handles all styling.

[![Administration panel displaying styles with modification dates and management options.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/StyleStudio%2001%20v2.jpg?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A44Z&se=2026-11-07T21%3A53%3A44Z&sr=c&sp=r&sig=TR1It9jXG56OHbhpDKMo0FHTUQ3oZgkeZc%2FzMs54aJk%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/StyleStudio%2001%20v2.jpg?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A44Z&se=2026-11-07T21%3A53%3A44Z&sr=c&sp=r&sig=TR1It9jXG56OHbhpDKMo0FHTUQ3oZgkeZc%2FzMs54aJk%3D)

With CSS Upload, you have more control over your branding and custom designs. Here are a few reasons you might use CSS Upload:

- **Apply your design without boundaries**: Your uploaded CSS is available to all the applications in your environment.
- **Control is in your hands**: Does your brand's primary color need to change from blue to green? You can update your CSS file and reupload it in minutes. Your changes automatically cascade throughout your application.

## Adding a New Style

A valid .CSS file and its assets (covered later in this article) make up a style. To create a new style, upload your CSS in the **Create Style** pop-up modal. Then, complete the additional details.

[![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/StyleStudio%2002%20v2.jpg?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A44Z&se=2026-11-07T21%3A53%3A44Z&sr=c&sp=r&sig=TR1It9jXG56OHbhpDKMo0FHTUQ3oZgkeZc%2FzMs54aJk%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/StyleStudio%2002%20v2.jpg?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A44Z&se=2026-11-07T21%3A53%3A44Z&sr=c&sp=r&sig=TR1It9jXG56OHbhpDKMo0FHTUQ3oZgkeZc%2FzMs54aJk%3D)

| Setting | Description |
| --- | --- |
| Style Name | Enter a name for your new style. Choose something that helps you and your team quickly locate your style. It doesn't have to be the same name as your .CSS file. |
| Description | Enter notes about your stylesheet. Everyone with access to your environment can see these notes. You can edit the description in the future to add change notes or link to other documents. This field is optional. |
| Stylesheet | This is where you upload your stylesheet. The uploader only accepts files with the .CSS extension. |
| Set As Default style | Select this checkbox to make this your default style. The default style displays when you preview your application. By selecting this box, your new style is active throughout your environment. It overrides the current default if there is one. By default, this checkbox is clear. |

To add a new style to your environment:

1. Above the Styles Admin table, click **+ Create New**.

[![Administration panel displaying styles with options to manage and create new styles.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/StyleStudio%2006%20v2.jpg?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A44Z&se=2026-11-07T21%3A53%3A44Z&sr=c&sp=r&sig=TR1It9jXG56OHbhpDKMo0FHTUQ3oZgkeZc%2FzMs54aJk%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/StyleStudio%2006%20v2.jpg?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A44Z&se=2026-11-07T21%3A53%3A44Z&sr=c&sp=r&sig=TR1It9jXG56OHbhpDKMo0FHTUQ3oZgkeZc%2FzMs54aJk%3D)
2. On the **Create Style** pop-up modal, upload your stylesheet and configure your settings.
3. Click **Create**.

> [!NOTE]
> On the Styles Admin page, existing styles are denoted by the Unqork badge. New styles you create do not display the Unqork badge.

## Editing a Style

On the Style Details page, you can revisit and make changes to your style. The Style Details page has similar features to the Create New pop-up modal and lets you:

- Edit the Description
- Download the style’s stylesheet
- Upload a new stylesheet

> [!NOTE]
> Uploading a new stylesheet overrides the existing stylesheet.

To edit a style:

1. Find the style that you want to edit.
2. Under the **Actions** column, open the Manage drop-down.
3. Select **Edit**.
4. Make changes to the style as needed.
5. Click **Save**.

## Setting an Existing Style as a Base for Other Styles

You can use an existing style as a base to build other styles. Base styles use an existing style's CSS file as a foundation. The other style's CSS file then layers on top of the base style. This lets you create or prototype new styles without starting from scratch. A style used as a base displays the BASE badge on the Styles Admin page.

[![Styles Admin interface showing different versions and their last modified dates.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/StyleStudio%2016.jpg?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A44Z&se=2026-11-07T21%3A53%3A44Z&sr=c&sp=r&sig=TR1It9jXG56OHbhpDKMo0FHTUQ3oZgkeZc%2FzMs54aJk%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/StyleStudio%2016.jpg?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A44Z&se=2026-11-07T21%3A53%3A44Z&sr=c&sp=r&sig=TR1It9jXG56OHbhpDKMo0FHTUQ3oZgkeZc%2FzMs54aJk%3D)

> [!NOTE]
> If there is a conflict between the base style CSS and the style it is being applied to, the other style overrides the base style's CSS.

To set a base style when you create a new style:

1. At the top right of the Unqork Designer Platform, click the **Settings** drop-down.
2. Click **Administration**.
3. Under Environment, select **Style Administration**.
4. Above the Styles Admin table, click + Create New.
5. Fill out the information required for the new style.

> [!NOTE]
> When creating a new style, you must upload a CSS stylesheet in addition to selecting a base style.
6. Under **Base Style**, click the drop-down and select an existing style you want to use as a base.
7. Click **Create**.

### Setting a Base Style for an Existing Style

To set a base style for an existing style:

> [!NOTE]
> Existing styles that are assigned a base style cannot be used as a base for other styles.

1. At the top right of the Unqork Designer Platform, click the **Settings** drop-down.
2. Click **Administration**.
3. Under Environment, select **Style Administration**.
4. Find and click the name of the style you want to add a base style to.
5. Under **Base Style**, click the drop-down and select an existing style you want to use as a base.
6. Click **Save**.

### Setting a Temporary Base Style in Express View

To temporarily set a base style in Express View:

1. At the top right corner of Express View, click the **Preview Style** drop-down.
2. Select a style you want to temporarily add a base style to.
3. In the URL bar of your browser, after the `style={styleName}` text, insert the **&** symbol followed by `baseStyle={baseStyleName}`. For example:` unqork.io/?style=unqork-v2#/ `becomes `unqork.io/?style=unqork-v2&baseStyle=baseStyleName#/.`
4. Press **Enter** to refresh the page.

> [!NOTE]
> This method lets you rapidly test a combination of styles. Base styles applied through the browser URL are not retained if you navigate away from the Express View page.

### Disconnect a Base Style From an Existing Style

If your style no longer requires a base style, you can disconnect it. This removes the base style's CSS from the chosen style.

To disconnect a base style from an existing style:

1. At the top right of the Unqork Designer Platform, click the **Settings** drop-down.
2. Click **Administration**.
3. Under Environment, select **Style Administration**.
4. Find and click the name of the style you want to disconnect the base style from.
5. Under **Base Style**, to the right side of the drop-down, click the **X** (Remove) button.

[![Example Company stylesheet settings with fields for name, description, and stylesheet file.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/StyleStudio%2018.jpg?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A44Z&se=2026-11-07T21%3A53%3A44Z&sr=c&sp=r&sig=TR1It9jXG56OHbhpDKMo0FHTUQ3oZgkeZc%2FzMs54aJk%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/StyleStudio%2018.jpg?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A44Z&se=2026-11-07T21%3A53%3A44Z&sr=c&sp=r&sig=TR1It9jXG56OHbhpDKMo0FHTUQ3oZgkeZc%2FzMs54aJk%3D)
6. Click **Save**.

> [!NOTE]
> To delete a style currently in use as a base, you must first disconnect it from all other styles.

## Managing Style Assets

Assets make up your style. They include documents, web fonts, forms, images, and more. Since your CSS references assets, keep them in the Style Assets section.

The Style Assets page lets you:

- Create new asset folders
- Upload new style assets
- Delete folders and style assets
- Download an asset
- Copy an asset file's

[![Overview of style assets including documents, forms, images, and web fonts management.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/StyleStudio%2004%20v2.jpg?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A44Z&se=2026-11-07T21%3A53%3A44Z&sr=c&sp=r&sig=TR1It9jXG56OHbhpDKMo0FHTUQ3oZgkeZc%2FzMs54aJk%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/StyleStudio%2004%20v2.jpg?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A44Z&se=2026-11-07T21%3A53%3A44Z&sr=c&sp=r&sig=TR1It9jXG56OHbhpDKMo0FHTUQ3oZgkeZc%2FzMs54aJk%3D)

| Setting | Description |
| --- | --- |
| **Title** | The name you give your file or folder. |
| **File Size** | The size of your file or folder. |
| **Last Modified** | Displays the date and time a file was uploaded, or a folder was changed. |
| **Actions** | The Manage button lets you download, copy path, or delete the selected asset. |
|  | Upload icon | Opens a file uploader to select the assets you want to add. |
| Folder icon | Opens a pop-up modal for you to create and name a new folder. |

To create a new asset folder:

1. On the **Style Assets** page, navigate to the right side of the page and click the **Folder** icon.
2. On the pop-up modal, enter a name for the folder.
3. Click **Create**.

To upload individual assets:

1. On the **Style Assets** page, navigate to the right side of the page and click the **Upload** icon.
2. On the navigation pane, find and select the file.
3. Click the **Open** button to upload the file.

> [!NOTE]
> Uploading an asset with an existing file name displays a pop-up modal that asks you to replace the previous file.

To download individual assets:

1. On the **Style Assets** page, find the file you want to download.
2. To the right of the file, under the **Actions** column, open the Manage drop-down.
3. Click **Download**.

To delete a style asset:

1. On the **Style Assets** page, find the file or folder you want to remove.
2. To the right of the file or folder, under the **Actions** column, open the Manage drop-down.
3. Click **Delete**.

## Copying and Inserting an Asset's Relative Path

After you upload an asset to your style, you can copy its relative path to use in your .CSS file. You can also use asset relative paths in a Content component for your module.

To copy an asset's relative path:

1. On the **Style Assets** page, find the file you want to copy the relative path of.
2. To the right of the file, under the **Actions** column, open the Manage drop-down.
3. Click **Copy Path**.

To insert an asset's relative path into a Content component:

1. On the **Module** **Editor View** page, find the Content component you want to insert the path into.
2. In the Content component field, **Paste** in the asset relative path.
3. **Delete** the CSS selector "." from the asset path.

[![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/StyleStudio%2013%20v2.jpg?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A44Z&se=2026-11-07T21%3A53%3A44Z&sr=c&sp=r&sig=TR1It9jXG56OHbhpDKMo0FHTUQ3oZgkeZc%2FzMs54aJk%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/StyleStudio%2013%20v2.jpg?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A44Z&se=2026-11-07T21%3A53%3A44Z&sr=c&sp=r&sig=TR1It9jXG56OHbhpDKMo0FHTUQ3oZgkeZc%2FzMs54aJk%3D)
4. **Append** the asset path with the style location.

> [!NOTE]
> Style locations in Unqork begin with 'styles/{styleName}/' where {styleName} is the name of the style the asset belongs to.

[![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/StyleStudio%2014%20v2.jpg?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A44Z&se=2026-11-07T21%3A53%3A44Z&sr=c&sp=r&sig=TR1It9jXG56OHbhpDKMo0FHTUQ3oZgkeZc%2FzMs54aJk%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/StyleStudio%2014%20v2.jpg?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A44Z&se=2026-11-07T21%3A53%3A44Z&sr=c&sp=r&sig=TR1It9jXG56OHbhpDKMo0FHTUQ3oZgkeZc%2FzMs54aJk%3D)
5. **Insert** the CSS rule-set that utilizes the style asset.

[![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/StyleStudio%2015%20v2.jpg?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A44Z&se=2026-11-07T21%3A53%3A44Z&sr=c&sp=r&sig=TR1It9jXG56OHbhpDKMo0FHTUQ3oZgkeZc%2FzMs54aJk%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/StyleStudio%2015%20v2.jpg?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A44Z&se=2026-11-07T21%3A53%3A44Z&sr=c&sp=r&sig=TR1It9jXG56OHbhpDKMo0FHTUQ3oZgkeZc%2FzMs54aJk%3D)
6. Click **Save**.

To learn more about how to use CSS in a Content component, click here: https://docs.unqork.io/Content/A04-ModEditor-Display_Layout/A04002B-Content_CSS.htm

## Setting Up a Remote Root

Connect your CSS to your environment and test it in real time. This setup uses your root folder structure, which acts as a local server to host your customer.CSS file. Unqork's `remoteRootCustomer` query then finds your file and inserts it into the environment. Without a remote root, Unqork can't find and display your CSS.

Before you begin, name your compiled CSS file `customer.CSS`. This is the file name that remoteRootCustomer looks for.

1. Run a localhost server to serve your compiled CSS file. Your local server is available at the following addresses:

> [!NOTE]
> To change your port Number, enter the number to the end of the command. For example, $python -m SimpleHTTPServer 3002. By default, this HTTP server runs on port 8000.

> [!TIP]
> **SimpleHTTPServer** is a quick and easy way to serve your CSS file locally. All you need to do is install python2 and run this command: $ python -m SimpleHTTPServer
  - HTTP://0.0.0:8000/
  - http://127.0.0.1:8000/
  - http://localhost:8000/
2. Place your customer.CSS file inside the directory structure **styles/STYLE-NAME**.
3. Complete this path with your own information: `?style=STYLE-NAME&remoteRootCustomer=http://localhost:8000/`

| Option Label | Value to Store in Submission Data |
| --- | --- |
| STYLE-NAME | The name you give your folder. The best practice is to use lowercase letters. Your name can't contain any spaces. |
| http://localhost:8000 | The address of your port. Make sure the number here matches your port number if it isn't the default. |
4. Add your new path to the remaining application path before the hashtag (#). So, your URL looks like this: `https://YOUR-ENVIRONMENT-stagingx.unqork.io/?style=STYLE-NAME&remoteRootCustomer=http://localhost:8000/#/display/a0s9d8a0s9d8a70dssd`.

Your locally-hosted CSS file is now part of your environment.

## Promoting a Style

You promote applications between environments after you make changes. Do the same for styles.

Styles can be shared across applications in Unqork. Be mindful when promoting an application and its styles. Consider how promoting your style might affect other applications in your target environment.

> [!TIP]
> To learn more about how promotion works, search **Promoting Applications** in our In-Product Help.

> [!WARNING]
> Style promotions and updates are not instantaneous. You might experience a delay before changes go into effect.

To promote a style:

1. On the **Styles Admin** page, find the style that you want to promote.
2. Under the **Actions** column, open the Manage drop-down.
3. Select **Promote**.

[![Styles Admin interface showing options to manage and promote different styles.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/StyleStudio%2011%20v2.jpg?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A44Z&se=2026-11-07T21%3A53%3A44Z&sr=c&sp=r&sig=TR1It9jXG56OHbhpDKMo0FHTUQ3oZgkeZc%2FzMs54aJk%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/StyleStudio%2011%20v2.jpg?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A44Z&se=2026-11-07T21%3A53%3A44Z&sr=c&sp=r&sig=TR1It9jXG56OHbhpDKMo0FHTUQ3oZgkeZc%2FzMs54aJk%3D)
4. Make a selection from the **Environment** drop-down.
5. Click Promote.

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

## Deleting a Style

From time to time, you might clean up styles you no longer need. A delete option makes this quick and easy.

> [!NOTE]
> This also deletes all assets saved in the style.

To delete a style:

1. On the **Styles Admin** page, find the style to delete.
2. Under the **Actions** column, open the Manage drop-down.
3. Select Delete.

[![Styles Admin interface displaying various style options and management actions.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/StyleStudio%2012%20v2.jpg?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A44Z&se=2026-11-07T21%3A53%3A44Z&sr=c&sp=r&sig=TR1It9jXG56OHbhpDKMo0FHTUQ3oZgkeZc%2FzMs54aJk%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/StyleStudio%2012%20v2.jpg?sv=2026-02-06&spr=https&st=2026-11-07T20%3A53%3A44Z&se=2026-11-07T21%3A53%3A44Z&sr=c&sp=r&sig=TR1It9jXG56OHbhpDKMo0FHTUQ3oZgkeZc%2FzMs54aJk%3D)
4. Enter the style's name to confirm you want to delete it.
5. Click **Delete**.

A key-value pair is a fundamental data structure where a unique "key" is associated with a specific "value," used for organizing and retrieving data efficiently, like in dictionaries or databases.

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

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.

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 URL (uniform resource locator) is a unique identifier used to locate a resource on the internet. Also known as a web address.

In JavaScript, a method is a function that is associated with an object. It is essentially a property of an object whose value is a function. Methods define actions or operations that can be performed on the object they belong to.

A query lets you retrieve, access, manipulate, and delete data in a database.

HTTP (Hypertext Transfer Protocol) is an application-layer protocol used to transmit hypermedia documents like HTML.

The Number data type accepts integer or floating point values. The number data type does not use quotes around numerical values.

Also known as Record Data. Submission data consists of information saved by Unqork components. View submission data by using the angular command, or in Record Collections.