style attribute of HTML em element

Last update on August 19 2022 21:51:12 (UTC/GMT +8 hours)

HTML em tag style attribute

1. style attribute can be used to describe the style of the em element.

2. Though technically possible, it is not recommended to use style attribute to describe the presentation of em element (or any other element). You should use a separate file to write styles for elements of an HTML page.

3. Though technically possible, it is not recommended to use style attribute for hiding elements.

4. You can use style attribute only to test the presentation of an em element. Later, which must be removed to a separate CSS file. Or, you can use it for some special purposes like to show users how an element would look after applying certain style rules.

Syntax

<em style="StyleRuless......" >text content</em>

Example of using style attribute with HTML em element

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>HTML em tag example - HTML tutorial | w3resource</title>
</head>
<body>
<p>We are learning HTML with  <em style="background-color:lightyellow; color: maroon; font-weight:bold">w3resource HTML tutorial.</em></p>
</body>
</html>

Result

View this example in a separate browser window

Example style attribute of em element

Pictorial presentation of the above example

em style

Note

Though text content of an em element gets a special style (it is italicized), the key purpose of using em is semantic - emphasizing the content. style attribute has nothing to do with semantic.

Example of using a separate stylesheet with HTML em element to achieve the same result as above (recommended):

CSS code > em-style.css

em {
      background-color: lightyellow;
        color: maroon;
        font-weight: bold;
        }

HTML code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>HTML em tag example - HTML tutorial | w3resource</title>
<link rel='stylesheet' href='em-style.css' type='text/css'> 
</head>
<body>
<p>We are learning HTML with  <em>w3resource HTML tutorial.</em></p>
</body>
</html>

Result

separate-stylesheet attribute with html em element

View this example in a separate browser window

Example style attribute of em element

Previous: title attribute of HTML em element
Next: event attributes of HTML em element