# How to add Css file path to html file of custom node

**URL:** <https://discourse.nodered.org/t/how-to-add-css-file-path-to-html-file-of-custom-node/20096>\
**Category:** General\
**Created:** [9 January 2020 06:42 UTC](https://discourse.nodered.org/t/how-to-add-css-file-path-to-html-file-of-custom-node/20096 "2020-01-09T06:42:22Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![kiran](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kiran/32/27855_2.png) [@kiran](https://discourse.nodered.org/u/kiran)\
**Post date:** [9 January 2020 06:42 UTC](https://discourse.nodered.org/t/how-to-add-css-file-path-to-html-file-of-custom-node/20096/1 "2020-01-09T06:42:23Z")

</div>

I created custom node, i want to add CSS style like

```auto
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

```

to element in html. how to do that

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [9 January 2020 08:19 UTC](https://discourse.nodered.org/t/how-to-add-css-file-path-to-html-file-of-custom-node/20096/2 "2020-01-09T08:19:52Z")

</div>

You will need to give us some more clues I'm afraid as the answer depends on what you are trying to do and we can't guess that from what you've said so far.

Where is the CSS to be used? In the Editor, in some end user interface that you are creating? Dashboard?

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [9 January 2020 08:29 UTC](https://discourse.nodered.org/t/how-to-add-css-file-path-to-html-file-of-custom-node/20096/3 "2020-01-09T08:29:06Z")

</div>

Hi @kiran

You can include a `<style>` block in your custom node's html file to provide the CSS.

Make sure you use a css selector name that is unique for your node - for example, include the node type in the name. `fadeIn` is too generic and could clash with other things. `my-custom-node-type-fadeIn` would be less likely to clash.

---

<div class="post-metadata">

**Author:** ![Mirco\_H](https://avatars.discourse-cdn.com/v4/letter/m/779978/32.png) [@Mirco\_H](https://discourse.nodered.org/u/Mirco_H)\
**Post date:** [16 December 2020 09:36 UTC](https://discourse.nodered.org/t/how-to-add-css-file-path-to-html-file-of-custom-node/20096/4 "2020-12-16T09:36:47Z")

</div>

Hey i have the same Problem like @kiran,

I would like to create a Dashboard with ui\_text Node.  
This Dashboard is Displayed for End Customer, when they say for Example Hello,  
The Voice2Json should trigger a Message and send it at the ui\_text node.

My first Question is: When this Message Arrive, is it possible to use a Fade in everytime it gets an new message?  
And is there a Solution to use Google Fonts for this Text.

I know how to Style CSS, but where do i put my Styles or is it possible to modify the main css from the Dashboard.

Thanks in Advance

Mirco

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [16 December 2020 10:00 UTC](https://discourse.nodered.org/t/how-to-add-css-file-path-to-html-file-of-custom-node/20096/5 "2020-12-16T10:00:29Z")

</div>

@Mirco_H hi and welcome to the forum. This 11 month old topic was related to creating new types of node-red nodes (e.g. for other users to install into node-red).

Your question is very much unrelated (you are asking as user of node-red, how to apply CSS to parts of the dashboard)

I believe you will get much better help if you create a new topic with a good title. Something like "how to apply style to dashboard item when a message arrives" or similar.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [16 December 2020 10:00 UTC](https://discourse.nodered.org/t/how-to-add-css-file-path-to-html-file-of-custom-node/20096/6 "2020-12-16T10:00:58Z")

</div>