# Tabs, groups and help with CSS structure

**URL:** https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178
**Category:** Dashboard
**Created:** [20 April 2020 08:39 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178 "2020-04-20T08:39:11Z")
**Posts on this page:** 1
**Showing post:** 27

<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: [21 April 2020 09:51 UTC](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178/27 "2020-04-21T09:51:45Z")

</div>

> [@Trying\_to\_learn](#):
>
> what is achieved with the `widget in group` over the other one if you have to enter/type the path to the _group_ you want to edit anyway?

`widget in group` inserts HTML content into the group. The HTML can be any valid HTML - it doesn't just insert CSS styles.

If the template contained just the text:

```auto
background-image: url("/Pictures/metal_2.jpg");

```

then you would end up with that text on the dashboard - because it is just that, a piece of text.

If you want the page to know this is intended as a CSS style, then it needs wrapping in a `<style>` tag and it needs to identify what element on the page the rule is for.

Hence why we have said _repeatedly_ that the template should be:

```auto
<style>
    #TEST_Home{
        background-image: url("/Pictures/metal_2.jpg");
    }
</style>

```

The `<style>` tag applies to the whole page. That is just how it works. That is not a Dashboard thing - it is a basic rule of how the style tag works in HTML.

It is perhaps best you had a break from this. I have explained this multiple times. I have run out of ways to try to explain it.

---

_[View the full topic](https://discourse.nodered.org/t/tabs-groups-and-help-with-css-structure/25178)._