Style guide spelling and comment fix and moving items to relevant section (pandas-dev#40691)

Co-authored-by: JHM Darbyshire (MBP) <[email protected]>

Author: attack68

doc/source/user_guide/style.ipynb

@@ -243,7 +243,7 @@
     "Table styles are flexible enough to control all individual parts of the table, including column headers and indexes. \n",
     "However, they can be unwieldy to type for individual data cells or for any kind of conditional formatting, so we recommend that table styles are used for broad styling, such as entire rows or columns at a time.\n",
     "\n",
-    "Table styles are also used to control features which can apply to the whole table at once such as greating a generic hover functionality. The `:hover` pseudo-selector, as well as other pseudo-selectors, can only be used this way.\n",
+    "Table styles are also used to control features which can apply to the whole table at once such as creating a generic hover functionality. The `:hover` pseudo-selector, as well as other pseudo-selectors, can only be used this way.\n",
     "\n",
     "To replicate the normal format of CSS selectors and properties (attribute value pairs), e.g. \n",
     "\n",
@@ -295,7 +295,7 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "Next we just add a couple more styling artifacts targeting specific parts of the table, and we add some internally defined CSS classes that we need for the next section. Be careful here, since we are *chaining methods* we need to explicitly instruct the method **not to** ``overwrite`` the existing styles."
+    "Next we just add a couple more styling artifacts targeting specific parts of the table. Be careful here, since we are *chaining methods* we need to explicitly instruct the method **not to** ``overwrite`` the existing styles."
    ]
   },
   {
@@ -308,11 +308,6 @@
     "    {'selector': 'th.col_heading', 'props': 'text-align: center;'},\n",
     "    {'selector': 'th.col_heading.level0', 'props': 'font-size: 1.5em;'},\n",
     "    {'selector': 'td', 'props': 'text-align: center; font-weight: bold;'},\n",
-    "    # internal CSS classes\n",
-    "    {'selector': '.true', 'props': 'background-color: #e6ffe6;'},\n",
-    "    {'selector': '.false', 'props': 'background-color: #ffe6e6;'},\n",
-    "    {'selector': '.border-red', 'props': 'border: 2px dashed red;'},\n",
-    "    {'selector': '.border-green', 'props': 'border: 2px dashed green;'},\n",
     "], overwrite=False)"
    ]
   },
@@ -394,7 +389,7 @@
     "\n",
     "*New in version 1.2.0*\n",
     "\n",
-    "The [.set_td_classes()][tdclass] method accepts a DataFrame with matching indices and columns to the underlying [Styler][styler]'s DataFrame. That DataFrame will contain strings as css-classes to add to individual data cells: the `<td>` elements of the `<table>`. Here we add our `.true` and `.false` classes that we created previously. We will save adding the borders until the [section on tooltips](#Tooltips).\n",
+    "The [.set_td_classes()][tdclass] method accepts a DataFrame with matching indices and columns to the underlying [Styler][styler]'s DataFrame. That DataFrame will contain strings as css-classes to add to individual data cells: the `<td>` elements of the `<table>`. Rather than use external CSS we will create our classes internally and add them to table style. We will save adding the borders until the [section on tooltips](#Tooltips).\n",
     "\n",
     "[tdclass]: ../reference/api/pandas.io.formats.style.Styler.set_td_classes.rst\n",
     "[styler]: ../reference/api/pandas.io.formats.style.Styler.rst"
@@ -406,6 +401,10 @@
    "metadata": {},
    "outputs": [],
    "source": [
+    "s.set_table_styles([  # create internal CSS classes\n",
+    "    {'selector': '.true', 'props': 'background-color: #e6ffe6;'},\n",
+    "    {'selector': '.false', 'props': 'background-color: #ffe6e6;'},\n",
+    "], overwrite=False)\n",
     "cell_color = pd.DataFrame([['true ', 'false ', 'true ', 'false '], \n",
     "                           ['false ', 'true ', 'false ', 'true ']], \n",
     "                          index=df.index, \n",
@@ -622,7 +621,7 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "The only thing left to do for our table is to add the highlighting borders to draw the audience attention to the tooltips. **Setting classes always overwrites** so we need to make sure we add the previous classes."
+    "The only thing left to do for our table is to add the highlighting borders to draw the audience attention to the tooltips. We will create internal CSS classes as before using table styles. **Setting classes always overwrites** so we need to make sure we add the previous classes."
    ]
   },
   {
@@ -631,6 +630,10 @@
    "metadata": {},
    "outputs": [],
    "source": [
+    "s.set_table_styles([  # create internal CSS classes\n",
+    "    {'selector': '.border-red', 'props': 'border: 2px dashed red;'},\n",
+    "    {'selector': '.border-green', 'props': 'border: 2px dashed green;'},\n",
+    "], overwrite=False)\n",
     "cell_border = pd.DataFrame([['border-green ', ' ', ' ', 'border-red '], \n",
     "                           [' ', ' ', ' ', ' ']], \n",
     "                          index=df.index, \n",
@@ -1381,7 +1384,7 @@
    "source": [
     "### HTML Escaping\n",
     "\n",
-    "Suppose you have to display HTML within HTML, that can be a bit of pain when the renderer can't distinguish. You can use the `escape` formatting option to handle this. Even use it within a formatter that contains HTML itself."
+    "Suppose you have to display HTML within HTML, that can be a bit of pain when the renderer can't distinguish. You can use the `escape` formatting option to handle this, and even use it within a formatter that contains HTML itself."
    ]
   },
   {
@@ -1400,7 +1403,16 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "# df4.style.format(escape=True)"
+    "df4.style.format(escape=True)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "df4.style.format('<a href=\"https://pandas.pydata.org\" target=\"_blank\">{}</a>', escape=True)"
    ]
   },
   {