I tried to replicate this forked notebook:
> **[Observable](https://observablehq.com/d/d4352dba699648ed)**
>
> The magic notebook for visualization.
as this:
> **[Observable](https://observablehq.com/d/b9c8b5a78cd675ef)**
>
> The magic notebook for visualization.
However, somehow the first notebook is loading the dc.css but I cannot figure out how it is importing the css because both notebooks imports the same libraries.
---
Welcome! Would you mind clicking “Enable link sharing” in the upper-right dropdown menu of each of these two notebooks so that we might see what’s going on?
---
The final cell of your first notebook (named `INJECTCSS`) is missing from the second one. When I copy that cell to the second notebook, the hover styles then work as expected. I guess the `INJECTCSS` cell is hard to see (unless you happen to hover over it) since it returns an empty `div`.
You may already know this, but a more Observable-idiomatic way to write `INJECTCSS` is with the `html` template tag function:
```auto
INJECTCSS = html``
```
Using it this way also displays a more-visible `` placeholder (though maybe you wanted to hide to it).
An alternative approach I’ve used before is to load resources together, so that e.g. the `dc` stylesheet and `dc` package are loaded in the same cell:
```auto
dc = {
if (!document.getElementById('dc-stylesheet'))
document.head.appendChild(html``);
return require("dc");
}
```
---
Another way to bundle JS and CSS without having to append to `` would be to use `viewof`:
```javascript
viewof dc = {
const PKG = 'dc@3.0.4';
// dc just adds a visual clue to the cell's output.
const view = html`${PKG}`;
view.value = require(PKG);
return view;
}
```