revise inline text styles page

- update examples
- explain the browser default in each case
- explain more clearly what the default styleheet does
- add examples

1 files changed, 43 insertions, 16 deletions

diff --git a/docs/modules/ROOT/pages/inline-text-styles.adoc b/docs/modules/ROOT/pages/inline-text-styles.adoc
index e950ad4..f348701 100644
--- a/docs/modules/ROOT/pages/inline-text-styles.adoc
+++ b/docs/modules/ROOT/pages/inline-text-styles.adoc
@@ -2,6 +2,7 @@
 ifndef::env-site,env-github[]
 include::_attributes.adoc[]
 endif::[]
+:example-caption!:
 
 ////
 When creating a UI theme for Antora, there are certain elements in the UI that require support from the CSS to work correctly.
@@ -9,53 +10,79 @@ This list includes elements in the shell (i.e., frame) and in the document conte
 This document identifies these UI elements.
 ////
 
+This page describes how to style text in the contents of the page which is visually emphasized.
+
 [#bold]
 == Bold text
 
-How xref:antora:asciidoc:bold.adoc[text marked up as bold] appears on your site depends on the fonts loaded by the UI and any CSS styles it applies to the `<strong>` HTML tag.
+How xref:antora:asciidoc:bold.adoc[text marked as bold] appears on your site depends on the fonts loaded by the UI and the CSS styles the UI applies to the `<strong>` HTML tag.
 
 [source,html]
 ----
-<p>A bold <strong>word</strong>, and a <strong>bold phrase</strong>.</p>
+A bold <strong>word</strong>, or a bold <strong>phrase of text</strong>.
 ----
 
-In the default UI, the `strong` element, specified in [.path]_css/base.css_, uses the 500 weight fonts loaded by the typeface stylesheets.
+Since `<strong>` is a semantic HTML element, it automatically inherits default styling (`font-weight: bold`) from the browser.
+If you want to override the browser styles, you'll need to define properties on the `strong` selector in the stylesheet for your UI.
+
+In the default UI, the `<strong>` element is styled in the 500 font weight of the current typeface (Roboto).
+For example:
+
+[example]
+A bold *word*, or a bold *phrase of text*.
 
-[#italics]
+[#italic]
 == Italic text
 
-How xref:antora:asciidoc:italics.adoc[italicized text] appears on your site depends on the fonts loaded by the UI and any CSS styles it applies to the `<em>` HTML tag.
+How xref:antora:asciidoc:italic.adoc[italicized text] appears on your site depends on the fonts loaded by the UI and the CSS styles the UI applies to the `<em>` HTML tag.
 
 [source,html]
 ----
-<p>An italic <em>word</em>, and an <em>italic phrase</em>.</p>
+An italic <em>word</em>, or an italic <em>phrase of text</em>.
 ----
 
-In the default UI, the italic fonts (`font-style: italic`) loaded by the typeface stylesheets are applied to inline text enclosed in `<em>`.
+Since `<em>` is a semantic HTML element, it automatically inherits default styling (`font-style: italic`) from the browser.
+If you want to override the browser styles, you'll need to define properties on the `em` selector in the stylesheet for your UI.
+
+In the default UI, the `em` element is styled in the italic font variant of the current typeface (Roboto).
+For example:
+
+[example]
+An italic _word_, or an italic _phrase of text_.
 
 [#monospace]
 == Monospace text
 
-Technical content often requires text to be styled in a way that indicates it is a command or source code.
-Such text is usually emphasized using a fixed-width, i.e., monospace, font.
-Consequentially, how xref:antora:asciidoc:monospace.adoc[inline monospace text] is displayed depends on the fixed-width font loaded by your UI and any CSS styles it applies to the `<code>` HTML tag.
+How xref:antora:asciidoc:monospace.adoc[inline monospace text] is displayed depends on the fixed-width font loaded by your UI and the CSS styles it applies to the `<code>` HTML tag.
 
 [source,html]
 ----
-<p>A monospace <code>word</code>, and a <code>monospace phrase</code>.</p>
+A monospace <code>word</code>, or a monospace <code>phrase of text</code>.
 ----
 
-In the default UI, the `code` element, specified in [.path]_css/base.css_, uses a fixed-width font which is loaded by a corresponding typeface stylesheet.
+Since `<strong>` is a semantic HTML element, it automatically inherits default styling (`font-family: monospace`) from the browser.
+If you want to override the browser styles, you'll need to define properties on the `code` selector in the stylesheet for your UI.
+
+In the default UI, the `code` element is styled using the fixed-width font loaded by the stylesheet (Roboto Mono).
+For example:
+
+[example]
+A monospace `word`, or a monospace `phrase of text`.
 
 [#highlight]
 == Highlighted text
 
-How xref:antora:asciidoc:highlight.adoc[highlighted text] appears on your site depends on the CSS styles applied to the `<mark>` HTML tag.
+How xref:antora:asciidoc:highlight.adoc[highlighted (or marked) text] appears on your site depends on the CSS styles the UI applies to the `<mark>` HTML tag.
 
 [source,html]
 ----
-<p>Let&#8217;s <mark>highlight this phrase</mark>.</p>
+Let&#8217;s add some <mark>highlight</mark> to it.
 ----
 
-Since `<mark>` is a semantic HTML element, it automatically inherits default styling, such as `background-color`, from the browser.
-If you want to override the browser styles, you'll need to add the `mark` element and its new properties to the document content stylesheet.
+Since `<mark>` is a semantic HTML element, it automatically inherits default styling (`background-color: yellow`) from the browser.
+Here's an example:
+
+[example]
+Let's add some #highlight# to it.
+
+If you want to override the browser styles, you'll need to define properties on the `mark` selector in the stylesheet for your UI.