> For the complete documentation index, see [llms.txt](https://community-test.logicnets.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://community-test.logicnets.com/release-9/platform-documentation/layout/layering-css-and-js-files.md). # Layering CSS and JS Files Cascading Style Sheets (CSS) follow **ordering rules**, where styles that are defined and loaded later in the page rendering process will have higher priority. ``` ``` In the example above, if there are duplicate rules in `blog1.css` and `blog2.css`, the system applies the CSS rules in `blog2.css`. ## Approach to Customized CSS and JS In some applications there is a need to manage multiple CSS and/or JS files and control their use and loading during runtime. The LogicNets Designer Project Settings allows the definition of CSS ordering rules for the project. In Version 7.3 on, CSS and JS file locations are specified in the Project Settings (rather than in the Framework Settings). Projects created prior to version 7.3 will still work as expected but need to be edited to follow the new approach below to take advantage of multiple files and ordering. See end of article for more information on the conversion. In the example below are stylesheets in the CSS folder, in the pdf subfolder and the overrides subfolder. (Note that CSS folder can contain any number/hierarchy of user-defined subfolders. Folders and subfolders are created using the Explorer icons at the top of the Explorer bar). In this example, the Designer User wants to specify ordering rules such that the project\_css\_handler CSS is loaded, followed by the additional\_css, and the PDF\_custom CSS is ignored (and reserved for the PDF generation process only) ## Resources/Layout/CSS Folder Structure Example ![](https://2802811211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdFhfexCjZ5JMhwGzzywq%2Fuploads%2Fgit-blob-f3111b40984107bdbce9620898d9d6cbbf9570bb%2Fa70c5bbb-758b-4c9d-b5e6-3b3388fc2ffc.png?alt=media) ## Project Settings Example In the Project Settings, the Designer User dictates the load order of CSS folders using the syntax *project@/resources/layout/folder/subfolder/subsubfolder/\**. When multiple files appear in a folder, the system loads the files in the order shown on screen. ![](https://2802811211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdFhfexCjZ5JMhwGzzywq%2Fuploads%2Fgit-blob-e37cf0d9ad0554cdec1ba7e7d7ffbcdf6ee7eef9%2F5b225706-b43d-42f3-8976-acfd94de17c8.png?alt=media) In this example, during page rendering the system first applies the CSS styles from any file in *resources/layout/css*, followed by styles in *resources/layout/css/overrides*. Even though the PDF folder exists within *resources/layout/css,* the system does not use the PDF stylesheet during rendering, because the PDF folder is not directly referenced in the Project Settings. ## CSS Layering with Custom Frameworks In more complex application setups there may be a custom framework with its own set of CSS folder settings similar to those above. If so, the ordering rules are dictated in similar fashion as follows: * Loaded First: LogicNets Product CSS (e.g. Assessment Framework) * Loaded Second: Custom Framework CSS (and order of multiple files at custom framework level dictated by custom framework-level project settings) * Loaded Third: Project CSS (and order of multiple files at project level dictated by project-level project settings) For more information on the ordering rules within CSS files, see such Internet resources as . A useful graphical representation can be found [here](https://vecta.io/blog/definitive-guide-to-css-styling-order/#howeverythingworksinadiagram) and is shown at the end of this article. ## JS Files JS files follow the exact same approach as above. ## Basic Approach to Customized CSS and JS When using a LogicNets framework created prior to version 7.3, the simplest set up with customized JS and CSS is where the Designer User specifies an individual file for each in the FRAMEWORK SETTINGS (see screenshot below). No action is required for these projects to continue to work in later versions of LogicNets. But in the event the Designer User wants to take advantage of the new approach (e.g. to specify multiple CSS or JS files and dictate the priority order), first of all, the FRAMEWORK settings shown below for custom JS and custom CSS should be cleared. (Custom PDF CSS setting is limited to a single file so is not featured in the advanced approach). ![](https://2802811211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdFhfexCjZ5JMhwGzzywq%2Fuploads%2Fgit-blob-98a07dd20e726d6c9e55f9571c5b35d0b7e9e6bc%2F1a4e7c64-5bf1-46a8-99a9-a223b2ac79ca.png?alt=media) ## Guide to CSS Styling Order ![](https://2802811211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdFhfexCjZ5JMhwGzzywq%2Fuploads%2Fgit-blob-a5b2db7e560371044c037584d4662d4409af0e9c%2Faa0b1eee-ad63-42e3-8c6d-b17af7fd09bf.png?alt=media) --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://community-test.logicnets.com/release-9/platform-documentation/layout/layering-css-and-js-files.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. 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.