# Using Notebooks in online textbook

**URL:** <https://talk.observablehq.com/t/using-notebooks-in-online-textbook/1048>\
**Category:** Uncategorized\
**Created:** [August 2, 2018, 3:04pm UTC](https://talk.observablehq.com/t/using-notebooks-in-online-textbook/1048 "2018-08-02T15:04:47Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![sdwfrost](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/sdwfrost/32/139_2.png) [@sdwfrost](https://talk.observablehq.com/u/sdwfrost)\
**Post date:** [August 2, 2018, 3:04pm UTC](https://talk.observablehq.com/t/using-notebooks-in-online-textbook/1048/1 "2018-08-02T15:04:47Z")

</div>

Dear All,

I’m trying to embed some Observable notebooks into a Jekyll-powered online textbook that mostly uses Jupyter notebooks. See:

[http://epirecip.es/epicookbook/chapters/sir/js](http://epirecip.es/epicookbook/chapters/sir/js)

Is there a straightforward way I can change the CSS to match the parent, and to only include a subset of the cells that are displayed in the output?

Best wishes  
Simon

---

<div class="post-metadata">

**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\
**Post date:** [August 2, 2018, 7:23pm UTC](https://talk.observablehq.com/t/using-notebooks-in-online-textbook/1048/2 "2018-08-02T19:23:17Z")

</div>

Hi there.

Looks like you’re generating your page from here:

> <https://github.com/epirecipes/epicookbook/blob/master/_chapters/sir/js.md>

And that you’re embedding your Observable notebook as a iFrame?

Have you tried working through @jashkenas 's embed tutorial? Jeremy talks about how one can pull in each cell at a time, which may address your question about showing a subset of your notebook’s cells.

> **[Downloading and Embedding Notebooks](https://observablehq.com/@jashkenas/downloading-and-embedding-notebooks)**
>
> An Observable notebook.

Regarding the CSS, @Fil 's Jekyll example writes additional CSS into the Jekyll page HTML:

> **[Fil/observable-jekyll](https://github.com/Fil/observable-jekyll)**
>
> Tutorial: How to embed ObservableHQ notebooks into your CMS - Fil/observable-jekyll

---

<div class="post-metadata">

**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\
**Post date:** [August 3, 2018, 12:18pm UTC](https://talk.observablehq.com/t/using-notebooks-in-online-textbook/1048/3 "2018-08-03T12:18:43Z")

</div>

I clumsily hacked this together. I continue to struggle to get the CSS looking good, but it at least it shows your visualization with only one control in Jekyll:

> **[concept](https://aaronkyle.github.io/concept/data-visualization/observable-proof-of-concept.html)**
>
> trying to spell out what I want from the Internet