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

# In[1]:


from IPython import display


# In the previous NB we used `!important` to make our output HTML CSS properties take priority over the NB pre-defined ones. This worked well except that we did not know in advance what would and wouldn't be overridden by the NB pre-defined output HTML CSS. It would mean some properties we would be artificially just setting to `!important` which seems a little clunky.

# Looking at the page structure (hit F12 in Chrome for example) shows that the output HTML generated by a cell is placed into an element which has the class `.output_html`. Thus, a better way, perhaps to structure our CSS modifications is to add this as a prefix to all elements we format....

# 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>""")

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


# Job done :) Although, even this method seems slightly artifical in the sense that we had to prefix all out CSS selectors with `.output_html` rather than just having a "clean" style sheet...