# Inline Text

> See [MDN: \<span>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span)

Webstudio provides several components for inline text formatting within paragraphs and other text containers.

## Overview

Inline formatting components allow you to style specific portions of text without affecting the entire text block. These components are typically used within [Paragraph](/university/core-components/paragraph.md), [Text](/university/core-components/text.md), or [Heading](/university/core-components/heading.md) components.

## Components

### Span

The `<span>` element is a generic inline container for styling text.

**Use cases:**

* Apply custom colors to specific words
* Add backgrounds to highlighted text
* Apply multiple styles to a text portion

**Properties:**

| Property | Type   | Description       |
| -------- | ------ | ----------------- |
| `id`     | string | Unique identifier |
| `class`  | string | CSS class names   |

### Bold

The `<strong>` element indicates text with strong importance.

**Use cases:**

* Important warnings or key terms
* Emphasize critical information
* Highlight product names or features

**Properties:**

| Property | Type   | Description       |
| -------- | ------ | ----------------- |
| `id`     | string | Unique identifier |
| `class`  | string | CSS class names   |

> **Note**: Bold has semantic meaning for screen readers. Use it for important content, not just visual styling.

### Italic

The `<em>` element indicates emphasized text.

**Use cases:**

* Technical terms on first use
* Titles of works (books, movies)
* Foreign words or phrases
* Emphasis in speech

**Properties:**

| Property | Type   | Description       |
| -------- | ------ | ----------------- |
| `id`     | string | Unique identifier |
| `class`  | string | CSS class names   |

### Superscript

The `<sup>` element displays text slightly above the normal line.

**Use cases:**

* Footnote references¹
* Mathematical exponents (x²)
* Trademark symbols (™)
* Ordinal indicators (1st, 2nd)

**Properties:**

| Property | Type   | Description       |
| -------- | ------ | ----------------- |
| `id`     | string | Unique identifier |
| `class`  | string | CSS class names   |

### Subscript

The `<sub>` element displays text slightly below the normal line.

**Use cases:**

* Chemical formulas (H₂O)
* Mathematical subscripts
* Footnotes (in some styles)

**Properties:**

| Property | Type   | Description       |
| -------- | ------ | ----------------- |
| `id`     | string | Unique identifier |
| `class`  | string | CSS class names   |

## Using Rich Text Editing

The easiest way to apply inline formatting is through rich text editing:

1. Double-click on a text component to enter edit mode
2. Select the text you want to format
3. Use the formatting toolbar:
   * **B** for Bold
   * *I* for Italic
   * Link icon for hyperlinks

For Superscript and Subscript, you'll need to add the component manually and position it within your text.

## Styling Tips

### Custom Highlights

```
Paragraph
└── Span (background: yellow, padding: 2px 4px)
    └── "highlighted text"
```

### Gradient Text

Apply a gradient to text using Span:

1. Add Span around text
2. Set background to gradient
3. Add `-webkit-background-clip: text`
4. Set color to transparent

### Multiple Styles

Nest formatting components for combined effects:

```
Paragraph
└── Bold
    └── Italic
        └── "bold and italic text"
```

## Accessibility Considerations

1. **Use semantic elements**: Bold (`<strong>`) conveys importance to screen readers
2. **Don't rely on color alone**: Add additional indicators for important information
3. **Maintain contrast**: Styled text should still be readable
4. **Use sparingly**: Too much formatting reduces readability

## Related Components

* [Text](/university/core-components/text.md) - General text container
* [Paragraph](/university/core-components/paragraph.md) - Block text content
* [Link](/university/core-components/link.md) - Clickable text


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.webstudio.is/university/core-components/inline-text.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.