Skip to main content
Feedback

Typography CSS

warning

The content on this page is outdated and will not receive updates. For the most up-to-date functionality, refer to Setting up and managing flows.

This topic provides examples of the main CSS classes/selectors you can use to customize general typographic elements.

Default player CSS

You can use the following main classes/selectors to apply additional CSS styling to headings and body text in a flow running the default player.

Class/SelectorDescription
.flowThe main class for the basic page formatting elements within a flow, such as the page color, default font-size and color, and so on.

For example, to change the default color and size for body text:
.flow {color: red;font-size:1.3em}
.flow h1``.flow .h1
.flow h2
.flow .h2
.flow h3
.flow .h3
.flow h4
.flow .h4
.flow h5
.flow .h5
.flow h6
.flow .h6		The basic heading classes used for HTML headings within a flow.

HTML headings <h1> to <h6> are available. .h1 to .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

For example, to change the color of all flow top-level h1 headings:
.flow h1, .flow .h1 {color: red;}
.flow pThe class used for basic paragraph elements within a flow.

For example, to change the color of all paragraph text within flow presentation components:
.flow p {color: blue;}
.flow aThe class used for basic hyperlink elements within a flow.

For example, to change the color of all hyperlink text within flow presentation components:
.flow a {color: orange;}
.flow blockquoteThe class used for inline <blockquote> elements within a flow.

For example, to change the background color of quoted text within flow presentation components:
.flow blockquote {background-color: #cccccc}
.flow codeThe class used for inline <code> elements within a flow.

For example, to change the background color of coded text within flow presentation components:
.flow code {background-color: #cccccc}
.flow olThe main class applied to ordered lists.

For example, to change the type of list-item marker in ordered lists to roman numerals:
.flow ol {list-style-type:upper-roman}
.flow ulThe main class applied to unordered lists.

For example, to change the type of list-item marker in unordered lists to squares:
.flow ul {list-style-type:square}
.flow preThe class used for inline ``` elements within a flow.

For example, to change the background color of pre-formatted text within flow presentation components:
.flow pre {background-color: #cccccc}

Default legacy player CSS

You can use the following classes/selectors to apply additional CSS styling to headings and body text in a flow running the default legacy player.

Class/SelectorDescription
.mw-bsThe main class for the basic page formatting elements within a flow, such as the page color, default font-size and color, and so on.

For example, to change the default color and size for body text:
.mw-bs {color: red;font-size:1.3em}
.mw-bs h1``.mw-bs .h1
.mw-bs h2``.mw-bs .h2
.mw-bs h3``.mw-bs .h3
.mw-bs h4``.mw-bs .h4
.mw-bs h5``.mw-bs .h5
.mw-bs h6``.mw-bs .h6		The basic heading classes used for HTML headings within a flow.

HTML headings <h1> to <h6> are available. .h1 to .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

For example, to change the color of all flow top-level h1 headings:
.mw-bs h1, .mw-bs .h1 {color: red;}
.mw-bs pThe class used for basic paragraph elements within a flow.

For example, to change the color of all paragraph text within flow presentation components:
.mw-bs p {color: blue;}
.mw-bs aThe class used for basic hyperlink elements within a flow.

For example, to change the color of all hyperlink text within flow presentation components:
.mw-bs a {color: orange;}
.mw-bs blockquoteThe class used for inline <blockquote> elements within a flow.

For example, to change the background color of quoted text within flow presentation components:
.mw-bs blockquote {background-color: #cccccc}
.mw-bs codeThe class used for inline <code> elements within a flow.

For example, to change the background color of coded text within flow presentation components:
.mw-bs code {background-color: #cccccc}
.mw-bs olThe main class applied to ordered lists.

For example, to change the type of list-item marker in ordered lists to roman numerals:
.mw-bs ol {list-style-type:upper-roman}
.mw-bs ulThe main class applied to unordered lists.

For example, to change the type of list-item marker in unordered lists to squares:
.mw-bs ul {list-style-type:square}
.mw-bs preThe class used for inline ``` elements within a flow.

For example, to change the background color of pre-formatted text within flow presentation components:
.mw-bs pre {background-color: #cccccc}
On this Page