antora-ui/docs/modules/ROOT/pages/inline-text-styles.adoc

= Inline Text Styles
: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.
This list includes elements in the shell (i.e., frame) and in the document content.
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 (<strong>)

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]
----
A bold <strong>word</strong>, or a bold <strong>phrase of text</strong>.
----

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*.

[#italic]
== Italic text (<em>)

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]
----
An italic <em>word</em>, or an italic <em>phrase of text</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 (<code>)

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]
----
A monospace <code>word</code>, or a monospace <code>phrase of text</code>.
----

Since `<code>` 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 (<mark>)

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]
----
Let&#8217;s add some <mark>highlight</mark> to it.
----

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.