#!/usr/bin/env python
# coding: utf-8

# In[1]:


from IPython import display


# Adding CSS to the *output* HTML (i.e. CSS that effects output generated by the NB but not how the NB itself displays) is fairly straight forward... just create an HTML style element and display it like so...

# In[3]:


styles = display.HTML("""<style>
th {
    background: black;
    color: white;
    font-weight: bold;
}
td { 
    vertical-align: top;
}
</style>""")
display.display(styles)


# In[4]:


tbl = display.HTML("""<table>
<tr>
    <th>Title1</th>
    <th>Title 2</th>
</tr><tr>
    <td>Value 1</td>
    <td>Value 2<br/>Something else</td>
</tr>
</table>""")
display.display(tbl)


# That's annoying, most of the CSS is looking okay, but **the vertical align property has not been used!** 
# 
# So what happened? The display module generated a DIV in which to display the output of the cell. The elements output have a style named `.output_html` which is overriding the stylesheet we displayed above.
# 
# This leaves us with two options. We could use the `!important` CSS modifier to achieve the result we want. The drawback here is that to know which items to make `!important` we need to try it out and fix errors.
# 
# Also note that the style we just set applies to every output cell in this notebook.