Spans

html
css
visual editor
revealjs
Author

Mine Çetinkaya-Rundel

Published

July 8, 2022

Spans

You can apply styles to inline text by creating spans using [] to surround the text you want to style and {} to define the style you want to apply.

For example, to achieve the styling in the following sentence:

To draw attention to a specific part of the text, you might want to make it red with a yellow background; like this.

You can use the following:

To draw attention to a specific part of the text, you might want to make it [red]{style="color: red;"} with a [yellow background]{style="background-color: yellow;"}; [like this]{style="color: red; background-color: yellow;"}.

Some tips for using spans:

  • If you’re authoring in RStudio using the visual editor, you can create a span by selecting the text you want to format and using the Format -> Span command.

Creating a span using the visual editor Span Attributes menu. This menu has four elements: ID, Classes, CSS Styles, and Other. The CSS styles element in the menu shows background-color: yellow;.

  • You can also define a CSS class and apply it to the span. For example,
.important {
  background-color: yellow;
  color: red;
}

Creating a span using the visual editor Span Attributes menu. This menu has four elements: ID, Classes, CSS Styles, and Other. The Classes element in the menu shows .important.

  • Spans can also be used to define fragments in Quarto revealjs presentations. Use the left arrow on your keyboard to advance the slides below to

    ## Fragments
    
    ::: columns
    ::: {.column width="50%"}
    [This shows up first,]{.fragment fragment-index="1" style="color:orange;"}
    :::
    
    ::: {.column width="50%"}
    [then this,]{.fragment fragment-index="2" style="color: blue;"}
    :::
    :::
    
    [then this.]{.fragment fragment-index="3" style="color: pink;"}

Learn more

Site Resources