CSS Styling of HTML in IPython Notebook output

Question

I am attempting to style the html table output for an IPython output cell with an external css file. I would like help understanding how to do this and have created a couple of test cases for exploration. Neither inline or external styling behave as I expect -

External which I am hoping to do:

htmlstr = "<html><head><link rel='stylesheet' type=\"text/css\" href=\"local.css\"></head><body>TEST BODY</body></html>"
HTML(htmlstr)

The file does not seem to be read. I have tried different paths and moving the file around; but, it does not seem to be recognized.

Internal Styling:

htmlstr = "<html><head><style>body {background-color:yellow;}</style></head><body>TEST BODY</body></html>"
HTML(htmlstr)

Execution of this in IPython changes the background of IPython itself. That is the background changes to yellow for all of IPython and the input cells remain white. Which is pretty cool; but, I want to style the specific output. And again, I want to store the CSS in an external file. Can someone help me understand the behaviour?

IPython is great about providing many possibilities and it is possible that there is a better path for my need.

I'm having the same problem, where should I put my project-specific css file? — ZK Zhao
– ZK Zhao, Commented Feb 16, 2016 at 6:58

Jakob · Accepted Answer · 2013-11-22 22:23:57Z

7

You could simply use more specific CSS properties! E.g. in a markdown cell (or custom.css with is the default external file for styling the notebook and its content)

<style>
th {
background-color:#55FF33;
}
td {
background-color:#00FFFF;
}
</style>

with the following code

from IPython.display import HTML
table = "<table><tr><th>bar</th><th>bar</th></tr><tr><td>foo</td><td>foo</td></tr></table>"
HTML(table)

gives
enter image description here

answered Nov 22, 2013 at 22:23

Jakob

21k8 gold badges81 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TauPan Over a year ago

Note that for me I see 'HTML Sanitizer style removed Object' when I simply put the CSS into a markdown cell with notebook server 5.4.0. In that case it has helped me to put the CSS into string and display it with display(HTML(...)).

dev.user.23 · Accepted Answer · 2020-04-17 02:36:26Z

0

If you place your styles in a separate notebook (At least in Jupyter Lab on Ubuntu 18.04 for ), the style will carry over to other notebooks.

Example:

<style>
       h1 {
            color:red;
            font-size: 6em;
       }
   </style>

OR

    container = "jp-InputArea"
    style = "<style>"
    _dict = {}
    im = "!important"

    # -------------------------------------------------------------------------
    arr = {}
    arr['h1'] = ["color:red","font-size:6em;"]
# -----------------------------------------------------------------------------

    for i,(el, st) in enumerate(arr.items()):
        arr_str = ""


        for j in arr[el]:
            arr_str = arr_str + j + " !important; "

        style = style + (r".jp-InputArea %s { %s }\n") % (el,arr_str)

    style = style +"</style>"
    HTML(style)

answered Apr 17, 2020 at 2:36

dev.user.23

375 bronze badges

1 Comment

mccurcio Over a year ago

This did not work on Linux Mint 20, Ipython: 6.4.12, Python: 3.9.13.

Collectives™ on Stack Overflow

CSS Styling of HTML in IPython Notebook output

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related