Inline Text Styles

This page describes how to style text in the contents of the page which is visually emphasized.

1. Bold text (<strong>)

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

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:

A bold word, or a bold phrase of text.

2. Italic text (<em>)

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

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:

An italic word, or an italic phrase of text.

3. Monospace text (<code>)

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

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:

A monospace word, or a monospace phrase of text.

4. Highlighted text (<mark>)

How highlighted (or marked) text appears on your site depends on the CSS styles the UI applies to the <mark> HTML tag.

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:

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.