What is the proper way to make a paragraph with some words having different styles using CSS and javascript

Question

I've a paragraph, with several long lines of texts. I need to make some words into different style. What would be the proper way to do it without creating too many tags?

How about when using react-intl format message?

<div className="main"> 
Select the Gear icon, and then choose Users > Manage users
</div>


.main {
font-size:14px;
}

I want to make words Gear, Users and Manage users, different style.

Answer 1

You can use one of the built-in tags to achieve this.

• <b> - Bold text
• <strong> - Important text
• <i> - Italic text
• <em> - Emphasized text
• <mark> - Marked text
• <small> - Small text
• <del> - Deleted text
• <ins> - Inserted text
• <sub> - Subscript text
• <sup> - Superscript text

 .main { font-size:14px; } 

 <div className="main"> Select the <b>Gear</b> icon, and then choose <b><i>Users</i></b> > <em><ins><sub>Manage users</sub></ins></em> </div> 

Or you can use the span tag to create inline elements in your text and then you can style them as you want.

 .main { font-size:14px; } #gear { font-size: 1.1rem; color: red; font-weight: bold; } #users { font-size: 1.3rem; color: blue; text-decoration: underline; } #manage-users { font-size: 0.9rem; color: gray; text-decoration: overline; } 

 <div className="main"> Select the <span id="gear">Gear</span> icon, and then choose <span id="users">Users</span> > <span id="manage-users">Manage users</span> </div> 

Update

The code below is an example how to style each word differently when you use react-intl FormattedMessage . StackBlitz link.

render() {
    const style = {
      color: 'red',
      fontWeight: 'bold'
    }
    return (
      <div>
        <p>
          <FormattedMessage
              id="userHint"
              defaultMessage={`Select the {gear} icon, and then choose {users} > {manageUsers}`}
              values={{
                gear: <b>Gear</b>, 
                users: <i>Users</i>, 
                manageUsers: <span style={style}>Manage users</span>
              }}
          />
        </p>
      </div>
    );
  }