HTML For Beginners: Part 4

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
  1. <body style="background-color:lightgrey">  
  2.     <h1> This is a big room</h1>  
  3.     <p>This is a small room.</p>  
  4. </body>  
HTML Style Attribute

The 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 Color

The color property defines the text color to be used for an HTML element.

Example
  1. <body>  
  2.   <h1 style="color:blue"> I love ice -cream </h1>  
  3.   <p style="color:red"> I love chocolates.</p>  
  4. </body>  
HTML Fonts



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

Example

  1. <body>  
  2.   <h1 style="font-family:verdana"> I love ice -cream </h1>  
  3.   <p style="font-family:courier"> I love chocolates.</p>  
  4. </body>  
HTML Text Size

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

Example
  1. <body>  
  2.   <h1 style="font-size:300%"> I love ice -cream </h1>  
  3.   <p style="font-size:160%"> I love chocolates.</p>  
  4. </body>  
HTML Text Alignment

The text-align property defines the horizontal text alignment for an HTML element:

Example
  1. <body>  
  2.   <h1 style="text-align:center">Centered Heading</h1>  
  3.   <p>I am a girl.</p>  
  4. </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 Formatting

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

Example
  1. <p>I love ice - cream.</p>  
  2. <p><b> I love chocolates</b></p>  
HTML Italic and Emphasized Formatting

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

Example
  1. <p>I love ice - cream.</p>  
  2. <p><i> I love chocolates</i></p>  
The HTML <em> element defines emphasized text, with added semantic importance.

Example
  1. <p>I love ice - cream.</p>  
  2. <p><em> I love chocolates</em></p>  
HTML Small Formatting

The HTML <small> element defines small text.

Example
  1. <h>HTML <small>Small</small> Formatting</h>  
HTML Marked Formatting

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

Example
  1. <h>HTML <mark>Marked</mark> Formatting</h>  
HTML Deleted Formatting

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

Example
  1. <p>My favorite color is <del>blue</del> purple .</p>  
HTML Inserted Formatting

The HTML <ins> element defines inserted (added) text.

Example
  1. <p>My favorite <ins>color</ins> is purple</p>  
HTML Subscript Formatting

The HTML <sub> element defines subscripted text.

Example
  1. <p>This is <sub>subscripted</sub> text.</p>  


HTML Superscript Formatting

The HTML <sup> element defines superscripted text.

Example
  1. <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 

Up Next
    Ebook Download
    View all
    Learn
    View all