# To what extent can I completely customise the look of a notebook?

**URL:** <https://talk.observablehq.com/t/to-what-extent-can-i-completely-customise-the-look-of-a-notebook/4908>\
**Category:** Help\
**Created:** [April 13, 2021, 11:06pm UTC](https://talk.observablehq.com/t/to-what-extent-can-i-completely-customise-the-look-of-a-notebook/4908 "2021-04-13T23:06:44Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![vegabook](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/vegabook/32/4813_2.png) [@vegabook](https://talk.observablehq.com/u/vegabook)\
**Post date:** [April 13, 2021, 11:06pm UTC](https://talk.observablehq.com/t/to-what-extent-can-i-completely-customise-the-look-of-a-notebook/4908/1 "2021-04-13T23:06:44Z")

</div>

I’m interested in using ObservableHQ to publish advisory notes to clients. However if I do that, ideally I’d like the notebook to reflect my branding, so change the default font, change the CSS generally. Maybe even remove the ObservableHQ logo at the top, etc (I don’t mind getting a paid version to allow this to happen). Is this possible?

---

<div class="post-metadata">

**Author:** ![dunstan](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/dunstan/32/5230_2.png) [@dunstan](https://talk.observablehq.com/u/dunstan)\
**Post date:** [April 13, 2021, 11:26pm UTC](https://talk.observablehq.com/t/to-what-extent-can-i-completely-customise-the-look-of-a-notebook/4908/2 "2021-04-13T23:26:13Z")

</div>

Hi vegabook.

You can certainly apply CSS to your notebook, and that includes font choices. However your CSS will only effect the cells of your notebook — everything around it, including the site navigation and the Observable logo, will remain untouched.

Another option is to embed Observable notebook cells into an HTML page that you control (say on your own site). You can learn more about that here [Sharing, Publishing & Embedding / Observable / Observable](https://observablehq.com/@observablehq/sharing-publishing-embedding?collection=@observablehq/learning-observable)

Hope that helps.

Dunstan

---

<div class="post-metadata">

**Author:** ![tomlarkworthy](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/tomlarkworthy/32/5940_2.png) [@tomlarkworthy](https://talk.observablehq.com/u/tomlarkworthy)\
**Post date:** [April 14, 2021, 4:59am UTC](https://talk.observablehq.com/t/to-what-extent-can-i-completely-customise-the-look-of-a-notebook/4908/4 "2021-04-14T04:59:36Z")

</div>

For small and hoc page delivery you can use a serverless-cell [https://endpointservice.web.app/notebooks/@endpointservices/serverless-cell-tests/deployments/social\_link/cells/webpage](https://endpointservice.web.app/notebooks/@endpointservices/serverless-cell-tests/deployments/social_link/cells/webpage)

To put it into a CDN use the cache-control headers.

For high performance custom pages with fast invalidation I made an observable to netlify deployer [Static Site Generator (Netlify) / Endpoint Services / Observable](https://observablehq.com/@endpointservices/netlify)  
(It essentially just materialize the output of serverless cells)

I agree with Dunstan simplest is a custom html frame with observable embeds inside. Serverless cells can be helpful in prototyping that

---

<div class="post-metadata">

**Author:** ![vegabook](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/vegabook/32/4813_2.png) [@vegabook](https://talk.observablehq.com/u/vegabook)\
**Post date:** [April 14, 2021, 9:39am UTC](https://talk.observablehq.com/t/to-what-extent-can-i-completely-customise-the-look-of-a-notebook/4908/5 "2021-04-14T09:39:27Z")

</div>

@dunstan Is there documentation anywhere on how to add CSS to an Observablehq-hosted notebook?

---

<div class="post-metadata">

**Author:** ![dunstan](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/dunstan/32/5230_2.png) [@dunstan](https://talk.observablehq.com/u/dunstan)\
**Post date:** [April 14, 2021, 4:42pm UTC](https://talk.observablehq.com/t/to-what-extent-can-i-completely-customise-the-look-of-a-notebook/4908/6 "2021-04-14T16:42:02Z")

</div>

Here’s a demo for you [Forum question demo / Observable / Observable](https://observablehq.com/d/d7b1abf57c980130)

There’s also a brief mention of CSS in this notebook [Introduction to HTML / Observable / Observable](https://observablehq.com/@observablehq/introduction-to-html?collection=@observablehq/notebook-fundamentals)

 ![Screen Shot 2021-04-14 at 9.44.37 AM](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/f/f33ee56a19d5a725d07bf61b584b2249955d4479.png)

---

<div class="post-metadata">

**Author:** ![dunstan](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/dunstan/32/5230_2.png) [@dunstan](https://talk.observablehq.com/u/dunstan)\
**Post date:** [April 14, 2021, 4:46pm UTC](https://talk.observablehq.com/t/to-what-extent-can-i-completely-customise-the-look-of-a-notebook/4908/7 "2021-04-14T16:46:47Z")

</div>

You can also search for CSS to see lots of crazy things people use it for on the site [Observable](https://observablehq.com/search?query=css)

---

<div class="post-metadata">

**Author:** ![vegabook](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/vegabook/32/4813_2.png) [@vegabook](https://talk.observablehq.com/u/vegabook)\
**Post date:** [April 14, 2021, 5:29pm UTC](https://talk.observablehq.com/t/to-what-extent-can-i-completely-customise-the-look-of-a-notebook/4908/8 "2021-04-14T17:29:37Z")

</div>

Thanks, but the markdown itself cannot be styled differently, right? I mean I get it, the markdown is markdown, not html, so that makes sense, but I was hoping there might also be some global “css” setting that you can use to change the font for that too? I guess one way is just not use markdown.

If I can’t restyle the markdown, can I globally change the CSS for _all_ the cells at the same time?

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [April 14, 2021, 8:01pm UTC](https://talk.observablehq.com/t/to-what-extent-can-i-completely-customise-the-look-of-a-notebook/4908/9 "2021-04-14T20:01:16Z")

</div>

@vegabook Drop the following code into a new cell in your notebook:

```auto
html`<style>
body {
  border: 10px solid red;
  background: linear-gradient(to bottom right, #afa 50%, #faf 50%);
  font: italic 12px monospace;
}`

```

I think this will clear things up for you.

---

<div class="post-metadata">

**Author:** ![dunstan](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/dunstan/32/5230_2.png) [@dunstan](https://talk.observablehq.com/u/dunstan)\
**Post date:** [April 14, 2021, 8:03pm UTC](https://talk.observablehq.com/t/to-what-extent-can-i-completely-customise-the-look-of-a-notebook/4908/10 "2021-04-14T20:03:34Z")

</div>

If you do what I did in my demo then the CSS in that block will apply to the HTML in all your cells, regardless of whether you made them using markdown or if you typed HTML yourself.

Here’s a demo of the CSS effecting markdown: [This is a markdown H1 / Observable / Observable](https://observablehq.com/d/692193375157d968)

---

<div class="post-metadata">

**Author:** ![vegabook](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/vegabook/32/4813_2.png) [@vegabook](https://talk.observablehq.com/u/vegabook)\
**Post date:** [April 14, 2021, 9:10pm UTC](https://talk.observablehq.com/t/to-what-extent-can-i-completely-customise-the-look-of-a-notebook/4908/11 "2021-04-14T21:10:36Z")

</div>

haha yes that indeed made it clear!