# Embedded Notebook requires CSS, while Observable Hosted Notebook Did Not

**URL:** <https://talk.observablehq.com/t/embedded-notebook-requires-css-while-observable-hosted-notebook-did-not/1080>\
**Category:** Help\
**Created:** [August 11, 2018, 8:56pm UTC](https://talk.observablehq.com/t/embedded-notebook-requires-css-while-observable-hosted-notebook-did-not/1080 "2018-08-11T20:56:26Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![roblabs](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/roblabs/32/871_2.png) [@roblabs](https://talk.observablehq.com/u/roblabs)\
**Post date:** [August 11, 2018, 8:56pm UTC](https://talk.observablehq.com/t/embedded-notebook-requires-css-while-observable-hosted-notebook-did-not/1080/1 "2018-08-11T20:56:26Z")

</div>

**Issue** — Mapbox CSS elements don’t appear in Embedded Notebook, unless explicit call made to `link` Mapbox CSS in embed. Mapbox CSS elements work fine in Observable Notebook.

I have a workaround in the HTML that wraps the Embedded Notebook, I simply include the same `link` to the Mapbox CSS that is already in the Observable cell. It feels like I’m doing something wrong in the Observable Notebook which is forcing me to include the Mapbox CSS a second time.

### Background

I have a Notebook that uses Mapbox GL JS, which I’m now trying to port to an Embedded Notebook. Following the lead from @jashkenas and notes on how to embed, [https://beta.observablehq.com/@jashkenas/downloading-and-embedding-notebooks](https://beta.observablehq.com/@jashkenas/downloading-and-embedding-notebooks).

The Observable Notebook has a cell that includes Mapbox CSS, and everything works fine. But the Embedded Notebook does not show the Mapbox CSS elements (such as Mapbox logo, Full Screen & Zoom controls), unless an explicit call is made.

#### Observable Notebook

- Observable hosted, see the Appendix for how the Mapbox CSS is included — [https://beta.observablehq.com/@roblabs/united-states-active-fire-perimeters](https://beta.observablehq.com/@roblabs/united-states-active-fire-perimeters)

* * *

- Error Case, Using the Embedded Notebook module, as is.
- Mapbox Logo _ **does not** _ show
- embedded notebook, with no Mapbox CSS — [https://www.RobLabs.com/projects/fire/index-no-mapbox-css.html](https://www.RobLabs.com/projects/fire/index-no-mapbox-css.html)

![index-no-mapbox-css.html](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/1X/6300572f34ef270f668b730cd2ddddeab5798623.png)

* * *

- Work around, Mapbox Logo **_does_** show. Using the Embedded Notebook  
module, but forced to include
  - [https://unpkg.com/mapbox-gl@0.47.0/dist/mapbox-gl.css](https://unpkg.com/mapbox-gl@0.47.0/dist/mapbox-gl.css)

- embedded notebook — [https://www.RobLabs.com/projects/fire/index.html](https://www.RobLabs.com/projects/fire/index.html)

![index.html](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/1X/b32d28f23c120a63940f7d7bc7a034653e08d626.png)

---

<div class="post-metadata">

**Author:** ![tom](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tom/32/2262_2.png) [@tom](https://talk.observablehq.com/u/tom)\
**Post date:** [August 11, 2018, 9:48pm UTC](https://talk.observablehq.com/t/embedded-notebook-requires-css-while-observable-hosted-notebook-did-not/1080/2 "2018-08-11T21:48:26Z")

</div>

Hi Rob,

The issue here is:

- When you embed a notebook, you explicitly choose which cells to output on the page and where they go.
- This notebook outputs the map cell, but it doesn’t output the CSS cell.

So, the CSS doesn’t get included. Here’s a [fixed example](https://bl.ocks.org/tmcw/aada7871d515b1d5c839326babfa88eb), that refers to a fork of your notebook that names the CSS cell, so that we can map it to a DOM element.

---

<div class="post-metadata">

**Author:** ![roblabs](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/roblabs/32/871_2.png) [@roblabs](https://talk.observablehq.com/u/roblabs)\
**Post date:** [August 11, 2018, 10:45pm UTC](https://talk.observablehq.com/t/embedded-notebook-requires-css-while-observable-hosted-notebook-did-not/1080/3 "2018-08-11T22:45:34Z")

</div>

Thank you for quick reply and support. I now see that you updated the notebook to output the CSS cell. I did not explicitly include the CSS in the embed.

```json
const notebookCellsToRender = {
  "mapContainer": "#mapContainer",
  "mapboxCss": "#mapboxCss"
};

```

* * *

I also needed to include a `<div>` for the `mapboxCss`.

```auto
  <div class="wrapper">
    <div id="mapContainer"></div>
    <div id="mapboxCss"></div>
  </div>

```

Problem solved. Thanks!