How to import CSS file into Google Colab notebook (Python3)

Question

I am working on a Python 3 notebook in Google Colab. I would like to use a CSS file to change the header styles (color, font, etc.) and change numbered sub-lists to alphabetical. I need help importing the CSS into a Colab notebook.

Here is the Markdown code:

# List
1. item
1. item
1. item
  1. sub-item
  1. sub-item
  1. sub-item

It renders as:

List

1. item
2. item
3. item
   1. sub-item
   2. sub-item
   3. sub-item

Here's the CSS:

ol ol {
  list-style-type: lower-roman;
}
h1 {
  color: red;
}

I want it to render as:

List (should be red)

1. item
2. item
3. item
   a) sub-item
   b) sub-item
   c) sub-item

Answer 1

This is a hacky answer, but it seems to work. In the advanced_outputs example from Colab, there is a reference to how to enable MathJax in Colab. This requires adding a handler that is triggered on each cell creation. This method can be changed to add in a CSS element instead of including the MathJax JavaScript source.

from IPython.display import Math, HTML, display

def set_css_in_cell_output():
  display(HTML("""<style>
ol ol {
  list-style-type: lower-roman;
}
h1 {
  color: red;
}
</style>"""))

get_ipython().events.register('pre_run_cell', set_css_in_cell_output)

After running this cell, every new output cell in your notebook will have that CSS added to it. From my own experience, I often end up having to use !important on rules because the CSS hierarchy can get quite complicated.