Post
Ask Question

HTML For Beginners: Part 4

Introduction

 
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 


            Similar Articles