So far, we have mostly seen "block" elements. They appear on the next line, like paragraphs.

There are also "inline" elements. They appear on the same line that they are written on.

Block & Inline Elements

• CSS divides HTML into two types: inline and block.
• After block elements, browsers render a new line.
• Inline elements: img, a, br, em, strong
• Block elements: p, h1, ul, li, almost everything else.

Element: span

• Inline element.
• Each new span is rendered next to surrounding content, and only wraps when it reaches the edge of the containing element.
• Can be used to apply styles to text inline so as not to break the flow of content.

span is used to apply a specific style inline

.highlight {
  color: teal;
}
<p>Paragraph with <span class="highlight">teal</span> text.</p>

Paragraph with teal text.