Inline style refers to text formatting you add only to individual words or phrases in your article text. Bold, italics, and underline are often used inline styles, so we keep them easily accessible using icons in the editor control panel.
But the article editor offers a variety of inline styles, available in the Inline style dropdown.
Before you begin
These inline style options are available in the new article editor. If you see this callout at the top of the editor, you'll need to select Try it out to use some of them:
How to add inline styles
Add inline styles to text in two ways:
- For text you're adding: Put your cursor where you'd like to add inline style, select the Inline style you'd like to use, and then enter the text. All text you enter in that line will be added with the inline style until you deselect the style.
- For existing text: Highlight the text, then select the Inline style you want. It will be applied to your selected text.
How to remove inline styles
Remove inline styles in two ways:
- To "escape" an inline style at the end of a line or word, place the cursor at the end of the word, select Inline style then de-select the applied style.
- To remove inline styles from an entire word or phrase, highlight the text, select Inline style, then de-select the applied style.
Available inline styles
Here's a list of all the available inline styles, when to use them, what they do, and samples of what they look like out of the box.
Computer code
Computer code is generally used for computer code, as the name implies:
- Selecting this option wraps the text in
<code>tags. - Looks like this out of the box:
Sample - Refer to the Mozilla Developer Network's <code> HTML inline code element documentation for more information on this element type.
Keyboard input
Keyboard input is generally used for textual user input from a keyboard, voice input, or any other text entry device:
- Selecting this option wraps the text in
<kbd>tags, which browsers usually format using their default monospace font. - Looks like this out of the box: Sample
- Refer to the Mozilla Developer Network's <kbd> HTML keyboard input element documentation for more information on this element type.
Variable
Variable is generally used for the name of a variable in a mathematical expression or a programming context.
- Selecting this option wraps the text in
<var>tags, which browsers usually format in italics. - Looks like this out of the box: Sample
- Refer to the Mozilla Developer Network's <var> HTML variable element documentation for more information on this element type.
Sample output
Sample output is generally used for sample or quoted output from a computer program.
- Selecting this option wraps the text in
<samp>tags, which browsers usually format using their default monospace font. - Looks like this out of the box: Sample
- Refer to the Mozilla Developer Network's <samp> HTML sample output element documentation for more information on this element type.
Citation
Citation is generally used for marking up the title of a creative work.
- Selecting this option wraps the text in
<cite>tags, which most browsers display in italics. - Looks like this out of the box: Sample
- Refer to the Mozilla Developer Network's <cite> HTML citation element documentation for more information on this element type.
Deleted text
Deleted text is generally used to indicate text that has been deleted from a document.
- Selecting this option wraps the text in
<del>tags, which most browsers display with a line through it like a strikethrough. - Looks like this out of the box:
Sample - Refer to the Mozilla Developer Network's <del> HTML deleted text element documentation for more information on this element type.
Inserted text
Inserted text is generally used to indicate text added to a document.
- Selecting this option wraps the text in
<ins>tags, which most browsers display with an underlined treatment. - Looks like this out of the box: Sample
- Refer to the Mozilla Developer Network's <ins> HTML inserted text element documentation for more information on this element type.
Strikethrough
Strikethrough is generally used for things which are no longer relevant or obsolete to add a strikethrough line through them:
- Selecting this option wraps the text in
<s>tags. - Looks like this out of the box:
Sample - Don't use for document edits; in the HTML standard, the deleted text style should be used for that.
- Refer to the Mozilla Developer Network's <s> HTML strikethrough element documentation for more information on this element type.
Subscript
Subscript is generally used for text which should be displayed as subscript for typographical reasons, such as in formulas like H2O:
- Selecting this option wraps the text in
<sub>tags, which most browsers display half a character below the normal line, often in a smaller font. - Looks like this out of the box: Sample
- Refer to the Mozilla Developer Network's <sub> HTML subscript element documentation for more information on this element type.
Superscript
Superscript is generally used for text which should be displayed as superscript for typographical reasons, like footnote references[1]:
- Selecting this option wraps the text in
<sup>tags, which most browsers display half a character above the normal line, often in a smaller font. - Looks like this out of the box: Sample
- For footnote references, consider also adding hyperlinks to anchors to jump readers to the correct resource.
- Refer to the Mozilla Developer Network's <sup> HTML superscript element documentation for more information on this element type.
Change inline styles
To give any of these inline style elements a more specific style, add Custom CSS in Customize > Style for the given HTML element, for example:
/* Set inserted text inline style to use light green background color */
ins {
background-color: #d4fcbc;
}