Scribd
Upload
37 views

HTML Style and Text

The document discusses various HTML elements and their attributes that can be used to style and format text. It explains how the style attribute can be used to specify CSS properties and values to style elements. It also introduces several HTML formatting elements like <b>, <i>, <em>, <small>, <mark>, <del>, <ins>, <sub>, and <sup> that can be used to format text as bold, italic, emphasized, small, marked, deleted, inserted, subscript, and superscript respectively. Examples are provided for each element to demonstrate their usage.

Uploaded by

VASANTHAKUMAR. A CSE 2020
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
37 views

HTML Style and Text

The document discusses various HTML elements and their attributes that can be used to style and format text. It explains how the style attribute can be used to specify CSS properties and values to style elements. It also introduces several HTML formatting elements like <b>, <i>, <em>, <small>, <mark>, <del>, <ins>, <sub>, and <sup> that can be used to format text as bold, italic, emphasized, small, marked, deleted, inserted, subscript, and superscript respectively. Examples are provided for each element to demonstrate their usage.

Uploaded by

VASANTHAKUMAR. A CSE 2020
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

HTML Styles

<!DOCTYPE html>
<html>
<body>
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:36px;">I am big</p>
</body>
</html>
The HTML Style Attribute

Setting the style of an HTML element, can be done with the style
attribute.

The HTML style attribute has the following syntax:

<tagname style="property:value;">

The property is a CSS property. The value is a CSS value.

HTML Background Color

The background-color property defines the background color for an


HTML element.

Example
<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
HTML Text Color

The color property defines the text color for an HTML element:

Example
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
HTML Fonts

The font-family property defines the font to be used for an HTML


element:

Example
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
</body>
</html>
HTML Text Size

The font-size property defines the text size for an HTML element:

Example
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
</body>
</html>
HTML Text Alignment

The text-align property defines the horizontal text alignment for an


HTML element:

Example
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
</body>
</html>

HTML Text Formatting

Text Formatting
<!DOCTYPE html>
<html>
<body>
<p><b>This text is bold</b></p>
<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>
HTML Formatting Elements

In the previous chapter, you learned about the HTML style attribute.

HTML also defines special elements for defining text with a special
meaning.
HTML uses elements like <b> and <i> for formatting output, like bold
or italic text.

Formatting elements were designed to display special types of text:

 <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

HTML <b> and <strong> Elements

The HTML <b> element defines bold text, without any extra
importance.

Example
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
</body>
</html>

The HTML <strong> element defines strong text, with added semantic
"strong" importance.
Example
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><strong>This text is strong.</strong></p>
</body>
</html>
HTML <i> and <em> Elements

The HTML <i> element defines italic text, without any extra
importance.

Example
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><i>This text is italic.</i></p>
</body>
</html>

The HTML <em> element defines emphasized text, with added semantic
importance.
Example
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><em>This text is emphasized.</em></p>
</body>
</html>
HTML <small> Element

The HTML <small> element defines smaller text:

Example
<!DOCTYPE html>
<html>
<body>
<h2>HTML <small>Small</small> Formatting</h2>
</body>
</html>
HTML <mark> Element

The HTML <mark> element defines marked or highlighted text:

Example
<!DOCTYPE html>
<html>
<body>
<h2>HTML <mark>Marked</mark> Formatting</h2>
</body>
</html>
HTML <del> Element

The HTML <del> element defines deleted (removed) text.


Example
<!DOCTYPE html>
<html>
<body>
<p>The del element represents deleted (removed) text.</p>
<p>My favorite color is <del>blue</del> red.</p>
</body>
</html>
HTML <ins> Element
The HTML <ins> element defines inserted (added) text.
Example
<!DOCTYPE html>
<html>
<body>
<p>The ins element represent inserted (added) text.</p>
<p>My favorite <ins>color</ins> is red.</p>
</body>
</html>
HTML <sub> Element

The HTML <sub> element defines subscripted text.

Example
<!DOCTYPE html>
<html>
<body>
<p>This is <sub>subscripted</sub> text.</p>
</body>
</html>
HTML <sup> Element

The HTML <sup> element defines superscripted text.

Example
<!DOCTYPE html>
<html>
<body>
<p>This is <sup>superscripted</sup> text.</p>
</body></html>

You might also like