CSS HTML

The correct way to set texts in italics using CSS

October 26, 2021

The correct way to set texts in italics using CSS

In this article we will learn how the correct way to set texts in italics using CSS, fully natively and also following good web development practices

texts in italics using CSS cover

Hey you programmer, are you okay?

Watch this content on YouTube:

There are three main ways to italicize text with HTML/CSS, they are:

  • tag <em>;
  • tag <i>;
  • font-style;

Each one has its purpose and meaning, so it’s good to stay tuned and make good use of these resources. Let’s see them in detail now!

Tag <em> 

It should be used for semantic purposes, not just for styling text, for adding style use font-style

When you use the <em> tag you want to emphasize a text

For example:

<p>Todos deveriam estudar <em>HTML e CSS</em> antes de criar páginas web</p>

Tag <i> 

Similar to the <em> tag, it should not be used just to style the text between the <i> tag.

Its use is also semantic

And the big difference between the <em> and <i> tag is its purpose

You must use the <em> tag to emphasize a text, as mentioned earlier

The <i> tag is used for words from other languages, technical terms or even fictional characters’ thoughts, for example:

<p>Maçã em inglês se escreve <i>apple</i></p>

The font-style property:

Now, when we want to make the text in italics just for layout/design reasons, we use this CSS rule

The font-style rule must be used with the value italic, like this:

p {
 font-style: italic;
}

Let’s imagine we are adding a style to a <p>, you should just adjust the element to the one of your choice/need

We learned all the ways to italicize HTML/CSS texts, or at least the most used ones

Conclusion

In this article we learned how we transform texts in italics using CSS, and also the importance of respecting semantics

Recap:

  • <em>: for text emphases;
  • <i>: for texts in other languages, technical terms, thoughts of fictional characters;
  • font-style: to style text without semantics;

And that’s it for today, see you on the next post! 🙂

Want to learn more about HTML and CSS? Click here!

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x