CSS Text Formatting

HTML provides limited facilities for text formatting, whereas, CSS provides complete text formatting presentation and style.

Text Color

Text color is changed by specifying any color to color property. The color value can be pecified as hexadecimal code like #00DDFF or a named color value like red.

Basic Syntax:
h1 { color: red; }


Example:
<!doctype html>  
<html>

    <head>
        <title>...</title>
    </head>
  
    <body>
       <h1 style="color: #00DDFF;">PHPDocs</h1>
    </body>

</html>

Typeface

Typeface is used to specify the font-family of the text.

The browser will keep going down the list of specified faces until it finds one that is installed on the system. If no font in the list is installed on the system, a font similar to the specified face will be used.

Basic Syntax:
h2 { font-family: Verdana, Arial, Helvatica;}


Example:
<!doctype html>  
<html>

    <head>
        <title>...</title>
    </head>
  
    <body>
       <h2 style="font-family: Verdana, Arial, Helvatica;">PHPDocs</h2>
    </body>

</html>

Text Size

CSS can be used to specify the text size. HTML can display text of size 7 at maximum. In CSS, font-size property is used to specify the size of text.

The size can be specified by using different units that are as follows:

  • Units: points (like 50pt, 70pt etc) and pixels (like 43px, 52px etc)
  • Predefined Keywords: small, medium, large etc
  • Percentage: 2%, 5% etc
Using Point:
p{ font-size: 50pt; }


Using Pixel:
p{ font-size: 43px; }


Using Keyword:
p{ font-size: large;}


Using Percentage:
p{ font-size: 700%; }