mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-11 23:02:54 +01:00
656e5fc8d2
* chore: Upgrade Docusaurus from v2 to v3 * chore: Update "Test build" GH workflow * fix: build All markdown is processed as MDX * fix: Broken links
38 lines
1.2 KiB
Markdown
38 lines
1.2 KiB
Markdown
---
|
|
hide_title: true
|
|
hide_table_of_contents: true
|
|
title: CSS Definition node
|
|
---
|
|
|
|
{/*##head##*/}
|
|
|
|
# CSS Definition
|
|
|
|
This node lets you write your own global custom CSS. It outputs your style definitions in a style tag at the top of your web app.
|
|
|
|
<div className="ndl-image-with-background l">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
The Visual nodes all have built in Visual Properties. They feature all the styling options needed for the majority of apps. The CSS Definition node is used whenever those properties are not enough: if you want to use experimental or advanced CSS features, hacks or workarounds. It is written like plain CSS:
|
|
|
|
<div className="ndl-image-with-background l">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
Classes can be attached to the Visual nodes in the Property Panel:
|
|
|
|
<div className="ndl-image-with-background l">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
The CSS Definition is best used if a style class will be reused on multiple different Visual nodes. If you're only styling one Visual node you should do it in the CSS Style editor at the bottom of the Property Panel.
|
|
|
|
{/*##head##*/}
|