Here I will go over multiple methods of using css and html to style and prettify your jupyter notebook like my photo below. For use in any html/css scenario I will be going over:

alert boxes
editing attributes in VSCode
css of headers
css of blockquotes
adding a shadow to an alert box
using markdown in a <div> block

Before:

After:

Alert Boxes:

These are basic html, that you can simply copy and paste into a markdown block of a Jupyter Notebook

Select desired markdown cell.

ctrl+m

try pasting the code below.

Let's start with THIS blue box:

<div class="alert alert-info">
  <strong>Let's start with THIS blue box:</strong>
</div>

class="alert alert-success" for
green
class="alert alert-warning" for
yellow, indicating a warning, or some findings that could be neutral->negative
class="alert alert-danger" for
red, indicating something is bad or "dangerous", negative findings.
class="alert alert-info" for
blue

Adding css into a notebook:

css is the different shadows, colors, and titles you see in the After: screenshot above

The folder structure you would use for css.

+--student.ipynb
|
|
+--styles
|  |
|  |
|  +--custom.css

If you want to import the css from that folder structure into your notebook you would use the below in a code cell.

# Styling notebook
from IPython.core.display import HTML
def css_styling():
    styles = open("./styles/custom.css", "r").read()
    return HTML(styles)
css_styling()

Inside of the custom.css file you can customize things like:

Headers
Codeblocks
Bolded text
*alerts*
blockquotes
listelements
And many more...

Custom Headers:

A header is ^ exactly like that, there are 6 different header types ( h1-h6 ) defined as (## Header) in markdown with the number of # symbols being significant.

Lets take an h1 header as example:
In html

<h1> Title </h1>

Or in markdown

# Title

Both showing up as:

Title

If I wanted to style the h1 header I would have in the .css file:

<style>
h1 {
  border: 1.5px solid #333;
  padding: 8px 12px;
  background-image: linear-gradient(180deg, #fff, rgb(160, 147, 147));
  position: static;
}
</style>

Which would show all of the h1 headers as:

An HTML/CSS developing environment:

Visual Studio Code

HTML Preview extension by Thomas Haakon Townsend
A .html file where you can test the styles

For testing with markdown markdown-it Which I am using right now

Developing css in Visual Studio Code:

Color:

Hovering over any color opens a color selector window, and will automatically fill in the required code for the color you pick.

Styles:

Starting to type inside of a block will give you different suggestions of styling

Searching on the web for your specific needs can also help you find different attributes to change.

Blockquotes:

This is a block quote

There are two ways to make a blockquote:
In html

<blockquote>This is a blockquote</blockquote>

Or in markdown

> This is a blockquote

Both showing up as:

This is a blockquote

If I wanted to style the blockquotes I would have in the .css file:

<style>
blockquote {
  border: 1px groove gray;
  background-color: rgb(219, 214, 214);
}
</style>

Which would show all blockquotes as:

Adding the shadow to alert boxes:

This is a little more complicated, as we will be “wrapping” the alert box with a shadow.

If I wanted to give a shadow to alert for jupyter notebook I would have in my css file:

Quick note: /* This is a css comment */

<style>
.shadow {

    /*Edit or add new attributes, change size, color, etc */
    width: 45em;
    box-shadow: 8px 8px 10px #444;
    border: 1px solid silver;

    /*For positioning in a jupyter notebook*/
    margin-top: 2em;
    position: relative;
    top: -25px
}
</style>

And I would display the alert box in the html/markdown as

<div class="shadow alert alert-success">  /*Note the 'shadow' keyword*/
  This is an alert box
</div>

Quick note: If you want to use markdown inside of an alert or any <div> block, you can simply include markdown=”1” in the class:

<div class="alert alert-success" markdown="1">

> This is a blockquote
> - And a list
>     - And a nested element with a **bold**

</div>

Which would look like:

This is a blockquote

And a list

And a nested element with a bold

In Conclusion:

We only looked at a few ways you can edit the css of a notebook or webpage, but there are many more markdown and html attributes you can change with css … EXPLORE!

Useful Links:

My github
CSS zen garden: For css examples, inspect the page
The greatest source of css help on the planet!
Inspect this page or elements on any webpage!