> For the complete documentation index, see [llms.txt](https://docs.cwicly.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cwicly.com/global-styles/global-classes-and-stylesheets/global-stylesheets.md).

# Global Stylesheets

<figure><img src="/files/95rGU3IDUu8xQ00yMDJz" alt=""><figcaption></figcaption></figure>

The Global Stylesheets property allows you to add your own custom CSS rules when you are unable to find exactly what you need.

{% hint style="danger" %}
You can create as many global stylesheets as required.!!! You can create as many global stylesheets as required !!!
{% endhint %}

{% hint style="danger" %}
The stylesheets are deactivated by default to allow you to try things out before applying them and to have keep a few styles in reserve.
{% endhint %}

{% hint style="danger" %}
No need to minify or prefix your properties, Cwicly creates a minified version of your stylesheet for optimised delivery on the frontend.
{% endhint %}

## Add

This allows you to add a new Global Stylesheet.

* Open the Cwicly Global Classes and Stylesheets tab.
* Open Global Stylesheets tab.
* Open the All tab.
* Click ➕ to add a new Global Stylesheet.

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

* Input a suitable name.
* Click "Create".

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

* Click name to open code modal.

![](/files/Hu2KF9nWszJNdBgs9lwK)

## CSS Code

The Global Stylesheets property allows you to add your own custom CSS rules when you are unable to find exactly what you need.

* Input required CSS code.

![](/files/U4uVcj2M6GHQKk9JttZI)

### Edit in Modal

This property allows you to edit your CSS code in modal.

* Click name to open code modal.
* Click Edit in Modal to edit your CSS code.

![](/files/WYed1Dnn8rn2eCZbFw5H)

### Word Wrap

This property allows you to wrap long words on to the next line of code.

* Click name to open code modal.
* Click Word Wrap.

![](/files/EiATOEmFiTfcoaYV7XaZ)

### Beautify

This property allows you to have your code automatically cleaned up and made pretty.

* Click name to open code modal.
* Click Beautify.

![](/files/yGCCSLMM7I6OQvhBu0dh)

### Close Modal

* Click Back to close modal.

![](/files/TEXRqOanGnDQ4VMYi4SW)

## Copy

* Open the Cwicly Global Classes and Stylesheets tab.
* Open the Global Classes and Stylesheets tab.
* Open Global Stylesheets tab.
* Find desired Global Stylesheet.
* Click to open CCS code.
* Click Copy icon to copy.

![](/files/P6TCySvEkt1rLDVfWbXm)

## Remove

You can remove the Global Stylesheet in two ways.

* Open the Cwicly Global Classes and Stylesheets tab.
* Open the Global Classes and Stylesheets tab.
* Open Global Stylesheets tab.
* Find desired Global Stylesheet.
* Click  🗑 (trash) to remove.

![](/files/ZqVtSF8XQ38a0HciXCmP)

* Alternately,
* Find desired Global Stylesheet.
* Click to open CCS code.
* Click Bin icon to remove.

![](/files/2XGMfbdVPJdDbiQCvVZh)

## Activate/Deactivate

The Global Stylesheet can be activated/deactivated in two ways&#x20;

* Open the Cwicly Global Classes and Stylesheets tab.
* Open the Global Classes and Stylesheets tab.
* Open Stylesheets tab.
* Find desired Global Stylesheet.
* Click button to activate/deactivate.

![](/files/JKlLyklYqG52kDEbEZVc)

* Alternately,
* Find desired Global Stylesheet.
* Click to open CCS code.
* Click activate/deactivate  to activate/deactivate Global Stylesheet.

![](/files/EifNA79otLoGIlZ7KYCp)

## Search Global Stylesheets

To speed up your workflow, the Search bar allows you to find a Global Stylesheet rapidly and efficiently.

* In the Global Stylesheets tab, find the Search bar.
* Input the name of the Global Stylesheet you wish to locate.

![](/files/HGjBPFP4cRJ68PWKvO5u)

## Select Folder

This property allows you to select the Folder to which you wish to add a particular Global Stylesheet.

* Open the Global Stylesheet which you wish to add to a folder.
* Click "Select folder"...
* Input name of folder (or select in dropdown) to which you wish a Global Stylesheet to be added.

![](/files/qUPDGer5bNWK7KdxkmSz)

## Folders&#x20;

From here you can add a Global Stylesheet Folder, search for a particular Folder and visualise, reposition or delete existing Folders.

* Open Global Classes and Stylesheets tab.
* Open Global Stylesheets tab.
* Open Folders tab.

![](/files/YEMJHCERn1W77KZGqKz7)

### Add

This property allows you to create a new Global Stylesheet Folder.

* Open Global Classes and Stylesheets tab.
* Open Global Stylesheets tab.
* Open Folders tab.
* Find Global Stylesheets Folders and click "+" to open the Add Global Stylesheets Folder modal.

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

* Input a suitable name and click Create.

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

### Search

The search property allows you to locate a required Global Stylesheet Folder.

* Open Global Classes and Stylesheets tab.
* Open Global Stylesheets tab.
* Open Folders tab.
* Input a Folder name in the Search bar.

![](/files/QjGVVlAQ33WkN9ElibCI)

### Remove

The Remove property allows you to delete a Global Stylesheet Folder.

This does not delete the individual Global Stylesheets.

* Open Global Classes and Stylesheets tab.
* Open Global Stylesheets tab.
* Open Folders tab.
* Click Remove icon next to Global Stylesheet Folder to be deleted.

![](/files/Qls3wbrL41dSvV0tHQTk)

### Open

* Open Global Classes and Stylesheets tab.
* Open Global Stylesheets tab.
* Open Folders tab.
* Click  Global Stylesheet Folder to be opened.

![](/files/XhKpRWrF1vlEN0VUcXbV)

### Modify name

You can change the name as required.

![](/files/BzvqKuZK6fwVFPAOUoc5)

### Search

The Search property allows you to locate a Global Stylesheet Folder.

* Input Global Stylesheet Folder name into Search bar.

![](/files/56nub3Vq2Nzc466fZZkA)

### Edit

You can edit a Global Stylesheet Folder by selecting the required Folder in the list.

* Open Folders.
* Select required Folder in the list.

![](/files/5cinyFOrSN5HWcofqo1d)

* You can now edit the CSS as required.

See [CSS Code](#css-code)

![](/files/qjRHcQlwAxLKvYXOR4lW)
