Before reading this article please visit the following links:
HTML Styling![]()
• Every HTML element has a default style (background color is White and text color is Black).
• Changing the default style of an HTML element can be done with the style attribute.
• This example changes the default background color from White to Light Grey.
Example
- <body style="background-color:lightgrey">
- <h1> This is a big room</h1>
- <p>This is a small room.</p>
- </body>
HTML Style AttributeThe HTML style attribute has the following syntax:
Example: style="property:value"The property is a CSS property. The value is a CSS value.
HTML Text ColorThe color property defines the text color to be used for an HTML element.
Example
- <body>
- <h1 style="color:blue"> I love ice -cream </h1>
- <p style="color:red"> I love chocolates.</p>
- </body>
HTML Fonts![]()
The font-family property defines the font to be used for an HTML element:
Example
- <body>
- <h1 style="font-family:verdana"> I love ice -cream </h1>
- <p style="font-family:courier"> I love chocolates.</p>
- </body>
HTML Text SizeThe font-size property defines the text size to be used for an HTML element:
Example
- <body>
- <h1 style="font-size:300%"> I love ice -cream </h1>
- <p style="font-size:160%"> I love chocolates.</p>
- </body>
HTML Text AlignmentThe text-align property defines the horizontal text alignment for an HTML element:
Example
- <body>
- <h1 style="text-align:center">Centered Heading</h1>
- <p>I am a girl.</p>
- </body>
HTML Formatting Elements![]()
Formatting elements were designed to display special types of text as in the following:
- Bold text
- Important text
- Italic text
- Emphasized text
- Marked text
- Small text
- Deleted text
- Inserted text
- Subscripts
- Superscripts
HTML Bold and Strong FormattingThe HTML <b> element defines bold text, without any extra importance.
Example
- <p>I love ice - cream.</p>
- <p><b> I love chocolates</b></p>
HTML Italic and Emphasized Formatting The HTML <i> element defines italic text, without any extra importance.
Example
- <p>I love ice - cream.</p>
- <p><i> I love chocolates</i></p>
The HTML <em> element defines emphasized text, with added semantic importance.
Example
- <p>I love ice - cream.</p>
- <p><em> I love chocolates</em></p>
HTML Small FormattingThe HTML <small> element defines small text.
Example
- <h>HTML <small>Small</small> Formatting</h>
HTML Marked FormattingThe HTML <mark> element defines marked or highlighted text.
Example
- <h>HTML <mark>Marked</mark> Formatting</h>
HTML Deleted Formatting
The HTML <del> element defines deleted (removed) text.
Example
- <p>My favorite color is <del>blue</del> purple .</p>
HTML Inserted Formatting
The HTML <ins> element defines inserted (added) text.
Example
- <p>My favorite <ins>color</ins> is purple</p>
HTML Subscript Formatting
The HTML <sub> element defines subscripted text.
Example
- <p>This is <sub>subscripted</sub> text.</p>
![]()
HTML Superscript FormattingThe HTML <sup> element defines superscripted text.
Example
- <p>This is <sup>superscripted</sup> text.</p>
Summary
- Use the style attribute for styling HTML elements.
- Use background-color for background color.
- Use color for text colors.
- Use font-family for text fonts.
- Use font-size for text sizes.
- Use text-align for text alignment.
HTML Text Formatting Elements: Tag Description
- <b>: Defines bold text
- <em>: Defines emphasized text
- <i>: Defines italic text
- <small>: Defines smaller text
- <strong>: Defines important text
- <sub>: Defines subscripted text
- <sup>: Defines superscripted text
- <ins>: Defines inserted text
- <del>: Defines deleted text
- <mark>: Defines marked/highlighted text