Jupyterlab Notebook used for testing inline CSS styles on HTML tags embedded in Markdown text

css_test.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Inline CSS Demos\n",
    "\n",
    "## Table\n",
    "\n",
    "<table style=\"border-spacing: 10px; border-collapse: separate; display: inline-table; margin: 1em; border: dashed 5px;\">\n",
    "  <caption><code>border-collapse: separate</code></caption>\n",
    "  <tbody>\n",
    "    <tr><th>Browser</th> <th>Layout Engine</th></tr>\n",
    "    <tr><td style=\"border: solid 3px; border-color: orange blue;\">Firefox</td> <td style=\"border: solid 3px; border-color: gold blue;\">Gecko</td></tr>\n",
    "    <tr><td style=\"border: solid 3px; border-color: black red;\">Edge</td> <td style=\"border: solid 3px; border-color: black red;\">EdgeHTML</td></tr>\n",
    "    <tr><td style=\"border: solid 3px; border-color: blue gold;\">Safari</td> <td style=\"border: solid 3px; border-color: red yellow green blue;\">Webkit</td></tr>\n",
    "    <tr><td style=\"border: solid 3px; border-color: aqua;\">Chrome</td> <td style=\"border: solid 3px; border-color: navy blue teal aqua\">Blink</td></tr>\n",
    "    <tr><td style=\"border: solid 3px; border-color: silver blue;\">Opera</td> <td style=\"border: solid 3px; border-color: red;\">Blink</td></tr>\n",
    "  </tbody>\n",
    "</table>\n",
    "\n",
    "<table style=\"border-collapse: collapse; display: inline-table; margin: 1em; border: dashed 5px;\">\n",
    "  <caption><code>border-collapse: collapse</code></caption>\n",
    "  <tbody>\n",
    "    <tr><th>Browser</th> <th>Layout Engine</th></tr>\n",
    "    <tr><td style=\"border: solid 3px; border-color: orange blue;\">Firefox</td> <td style=\"border: solid 3px; border-color: gold blue;\">Gecko</td></tr>\n",
    "    <tr><td style=\"border: solid 3px; border-color: black red;\">Edge</td> <td style=\"border: solid 3px; border-color: black red;\">EdgeHTML</td></tr>\n",
    "    <tr><td style=\"border: solid 3px; border-color: blue gold;\">Safari</td> <td style=\"border: solid 3px; border-color: red yellow green blue;\">Webkit</td></tr>\n",
    "    <tr><td style=\"border: solid 3px; border-color: aqua;\">Chrome</td> <td style=\"border: solid 3px; border-color: navy blue teal aqua\">Blink</td></tr>\n",
    "    <tr><td style=\"border: solid 3px; border-color: silver blue;\">Opera</td> <td style=\"border: solid 3px; border-color: red;\">Blink</td></tr>\n",
    "  </tbody>\n",
    "</table>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Box Sizing\n",
    "\n",
    "<div style=\"width: 300px; float: left; background: lightgrey; margin-right: 50px\">\n",
    "    <p>Parent container</p>\n",
    "    <div id=\"example-element\" class=\"transition-all\" style=\"box-sizing: content-box; width: 100%; border: 10px solid rgb(91, 109, 205); padding: 5px;\">\n",
    "        <p>Child container</p>\n",
    "    </div>\n",
    "</div>\n",
    "\n",
    "<div style=\"width: 300px; float: left; background: lightgrey\">\n",
    "    <p>Parent container</p>\n",
    "    <div id=\"example-element\" class=\"transition-all\" style=\"box-sizing: border-box; width: 100%; border: 10px solid rgb(91, 109, 205); padding: 5px;\">\n",
    "        <p>Child container</p>\n",
    "    </div>\n",
    "</div>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Background\n",
    "\n",
    "<div style=\"border: 1px solid #D29BE8; width: 280px; height: 280px; margin-right: 10px; float: left; background: #9BD5E8;\"></div>\n",
    "<div style=\"border: 1px solid #D29BE8; width: 280px; height: 280px; margin-right: 10px; float: left; background: url(https://i.stack.imgur.com/jBli3.png);\"></div>\n",
    "<div style=\"border: 1px solid #D29BE8; width: 280px; height: 280px; margin-right: 10px; float: left; background: left 5% / 15% 10% repeat url(https://www.python.org/static/community_logos/python-powered-w-100x40.png);\"></div>\n",
    "<div style=\"border: 1px solid #D29BE8; width: 280px; height: 280px; margin-right: 10px; float: left; background: content-box radial-gradient(crimson, skyblue);\">:(</div>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Font\n",
    "\n",
    "<div style=\"width: 250px; float: left; margin: 20px; font: 1.2em 'Fira Sans', sans-serif;\">\n",
    "London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.\n",
    "</div>    \n",
    "\n",
    "<div style=\"width: 250px; float: left; margin: 20px; font: italic 1.2em 'Fira Sans', serif;\">\n",
    "London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.\n",
    "</div>    \n",
    "\n",
    "<div style=\"width: 250px; float: left; margin: 20px; font: italic small-caps bold 16px/2 cursive;\">\n",
    "London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.\n",
    "</div>    \n",
    "\n",
    "<div style=\"width: 250px; float: left; margin: 20px; font: small-caps bold 24px/1 sans-serif;\">\n",
    "London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.\n",
    "</div>    "
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Border\n",
    "\n",
    "<div style=\"border: 0.5rem outset pink; outline: 0.5rem solid khaki; box-shadow: 0 0 0 2rem skyblue; border-radius: 12px; font: bold 1rem sans-serif; margin: 2rem; padding: 1rem; outline-offset: 0.5rem;\">I have a border, an outline, AND a box shadow! Amazing, isn't it?</div>\n"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}