Is it possible to add .css style to Jupyter notebook from separate file?

Question

I need to render some html tables in Jupyter Notebook and for this I have defined my own css styles. I want it to be reusable on any PC.

For now I need to run code like this in one of Jupyter cells:

%%html
<style>
.output_wrapper, .output {
    height:auto !important;
    max-height: none;
}
.output_scroll {
    box-shadow:none !important;
    webkit-box-shadow:none !important;
}

.package_header {
    width: 100%;
    background-color: #0e2b59;
    color: #ffffff;
    font-size: 14px;
    text-align: center;
    padding-top: 8px;
    padding-right: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
}

.placeholder {
    width: 100%;
    background-color: #ffffff;
    height: 6px;
}

.passed_test_table {
  display: table;         
  width: 100%;         

  background-color: #ebffd3;                
  border-spacing: 5px;
}

# (...) rest of css classes omitted 
</style>

Yet I don't want to store this style inside Jupyter Notebook but in other file like my_default_style.css and load it somehow so it doesn't take too much space in Notebook making it less readable.

Is it possible to load .css style from some local file instead of running it in Jupyter Notebook cell directly?

Answer 1

If you are okay with the styling applying to all notebooks you make, then you can store your css in ~/.jupyter/custom/custom.css and this will be automatically loaded and will override any default styles.

An alternative is to do something like this:

from IPython.core.display import HTML
import urllib2
HTML(urllib2.urlopen('[url to your css file here').read())

(from http://moderndata.plot.ly/custom-styling-for-ipython-notebooks-with-3-lines-of-code/)

Where you store your css file somewhere (e.g. on Github) and download it and apply it when you run the notebook.

If you want it to be completely external, use custom.css, but this will apply to every notebook. If you need it to only apply to a single notebook, then you'll have to specify it within the notebook, but there are less verbose ways of doing it (like above).

See configuration docs