Skip to main content

Use of External CSS Files in the Synergy IDE Environment

This documentation describes how to use external CSS files in form files or a different CSS file in the Synergy IDE environment. As an example, we will show you how to use a file named '/asset/Styles/Loading.css'.

1. Using an external CSS file in another CSS file​

To use a CSS file in another CSS file, you can use the '@import' rule. For example, to use the file '/asset/Styles/Loading.css' in the file 'BaseStyle.css' in the same folder structure:

'''css / Add to the top of the BaseStyle.css file / @import url("./Loading.css");


In this way, all styles in the 'Loading.css' file will be included in the 'BaseStyle.css' file.

## 2. Using an External CSS File in a Form File

You can also use the '@import' rule to use another CSS file in the CSS file of one form. For example, to add the file 'BaseStyle.css' to the form's CSS file:

'''css
/* Add it to the top of the form's CSS file */
@import url("/asset/Styles/BaseStyle.css");

This way, all styles in the 'BaseStyle.css' file will be included in the form's CSS file.

Example Scenario​

  1. The contents of the file '/asset/Styles/Loading.css' are:

'''css / Loading.css / .loading-spinner { width: 50px; height: 50px; border: 5px solid #f3f3f3; border-radius: 50%; border-top: 5px solid #3498db; animation: spin 2s linear infinite; }

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

```
  1. The contents of the file '/asset/Styles/BaseStyle.css' are:

'''css / BaseStyle.css / @import url("./Loading.css");

body { font-family: Arial, sans-serif; background-color: #f0f0f0; }

```
  1. The contents of the form's CSS file:

'''css / CSS file of the form / @import url("/asset/Styles/BaseStyle.css");

.form-container { width: 100%; max-width: 600px; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); }

```

In these examples, the styles in the 'Loading.css' file are included in the 'BaseStyle.css' file. Likewise, the styles in the 'BaseStyle.css' file are included in the form's CSS file. In this way, all styles can be used hierarchically by including each other.

Conclusion​

In the Synergy IDE environment, you can use the '@import' rule to use external CSS files in another CSS file or in the CSS file of the form. This method makes style management more modular and organized.