# Jupyter Notebook CSS styling

**URL:** <https://discourse.julialang.org/t/jupyter-notebook-css-styling/34770>\
**Category:** Tooling\
**Tags:** question\
**Created:** [February 17, 2020, 7:59pm UTC](https://discourse.julialang.org/t/jupyter-notebook-css-styling/34770 "2020-02-17T19:59:39Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![kumarbalachandran](https://avatars.discourse-cdn.com/v4/letter/k/9f8e36/32.png) [@kumarbalachandran](https://discourse.julialang.org/u/kumarbalachandran)\
**Post date:** [February 17, 2020, 7:59pm UTC](https://discourse.julialang.org/t/jupyter-notebook-css-styling/34770/1 "2020-02-17T19:59:39Z")

</div>

I am trying to clean up a Jupyter notebook so it can be distributed and I figured out that you can insert CSS into a code cell using e.g.

```julia
HTML("""
<style>
body {
  counter-reset: section; /* Set a counter named 'section', and its initial value is 0. */
}

h3::before {
  counter-increment: section; /* Increment the value of section counter by 1 */
  content: "Section " counter(section) ": "; /* Display the word 'Section ', the value of 
                                                   section counter, and a colon before the content
                                                   of each h3 */
}
</style>
    """)

```

However, it would be good if the code and output for this cell alone were suppressed from display. I don’t want to mess with a custom.css file and would prefer the solution to not depend on any ipython notebook extensions; this will make the notebook self-contained. Is there a way to do this?

---

<div class="post-metadata">

**Author:** ![kumarbalachandran](https://avatars.discourse-cdn.com/v4/letter/k/9f8e36/32.png) [@kumarbalachandran](https://discourse.julialang.org/u/kumarbalachandran)\
**Post date:** [February 17, 2020, 10:16pm UTC](https://discourse.julialang.org/t/jupyter-notebook-css-styling/34770/2 "2020-02-17T22:16:01Z")

</div>

Well the second problem is that the counters do not seem to propagate across cells.

---

<div class="post-metadata">

**Author:** ![tbeason](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/tbeason/32/15898_2.png) [@tbeason](https://discourse.julialang.org/u/tbeason)\
**Post date:** [February 17, 2020, 10:31pm UTC](https://discourse.julialang.org/t/jupyter-notebook-css-styling/34770/3 "2020-02-17T22:31:05Z")

</div>

Could you do something like this with a Julia variable as the section counter and then interpolate it into Markdown to display a nice section heading?