htmlitalicstachyons-css

tachyons.io: emphasize a single word in italics

My problem

I am using the tachyons.io framework to style an HTML page. I would like to emphasize a single word in a sentence with italics fonts, without discontinuing the sentence flow by a line break.

The manual

The manual suggests using <p class="i"></p>, but using p adds a line break.

What have I tried

Apart from reading the manual, I tried using an internal p class="i" or class="i". The former broke the sentence with a new line, the latter did not change the word style.

My question

How can I emphasize a single word with italics in tachyons.io, without breaking the sentence with a newline?

Solution

  • Use a <span>: <span class="i"> ... </span>.

    (or, alternatively, an <i>.)

    Example:

    <link href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.9.1/tachyons.css" rel="stylesheet"/>
<p>
Only one <span class="i">word</span> is in Italics here.
</p>

<p>
Can also use <i>plain HTML</i> for that.
</p>