CSS Part 5

Set the font family: 

Following is the example which demonstrates how to set the font family of an element. Possible value could be any font family name.
<p style="font-family:georgia,garamond,serif;"> 
This text is rendered in either georgia, garamond, or the default serif font depending on which font  you have at your system. 
</p>

This will produce following result:

This text is rendered in either georgia, garamond, or the default serif font depending on which font you have at your system.

Set the font style: 

Following is the example which demonstrates how to set the font style of an element. Possible values are normal, italic and oblique.

<p style="font-style:italic;"> 

This text will be rendered in italic style 

</p>

This will produce following result:

This text will be rendered in italic style

Set the font weight: 

Following is the example which demonstrates how to set the font weight of an element. The font-weight property provides the functionality to specify how bold a font is. Possible values could be normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900. 

<p style="font-weight:bold;"> 

This font is bold. 

</p> 

<p style="font-weight:bolder;"> 

This font is bolder. 

</p> 

<p style="font-weight:900;"> 

This font is 900 weight. 

</p>

This will produce following result:

This font is bold.

This font is bolder.

This font is 900 weight.

Set the font size: 

Following is the example which demonstrates how to set the font size of an element. The font- size property is used to control the size of fonts. Possible values could be xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, size in pixels or in %

<p style="font-size:20px;"> 
This font size is 20 pixels 
</p> 
<p style="font-size:small;"> 
This font size is small 
</p> 
<p style="font-size:large;"> 
This font size is large 
</p>

This will produce following result:

This font size is 20 pixels

This font size is small

This font size is large

Set the font size adjust: 

Following is the example which demonstrates how to set the font size adjust of an element. This property enables you to adjust the x-height to make fonts more legible. Possible value could be any number.

<p style="font-size-adjust:0.61;"> 
This text is using a font-size-adjust value. </p> 

This will produce following result:

This text is using a font-size-adjust value.

Manipulating Text using CSS 

This tutorial will teach you how to manipulate text using CSS properties. You can set following text properties of an element:

•  The color property is used to set the color of a text. 
•  The direction property is used to set the text direction. 
•  The letter-spacing property is used to add or subtract space between the letters that make up a word. 
•  The word-spacing property is used to add or subtract space between the words of a sentence. 
•  The text-indent property is used to indent the text of a paragraph. 
•  The text-align property is used to align the text of a document. 
•  The text-decoration property is used to underline, overline, and strikethrough text. 
•  The text-transform property is used to capitalize text or convert text to uppercase or lowercase letters. 
• The white-space property is used to control the flow and formatting of text. 
• The text-shadow property is used to set the text shadow around a text. 

Set the text color: 

Following is the example which demonstrates how to set the text color. Possible value could be any color name in any valid format. 

<p style="color:red;"> 

This text will be written in red. </p>

This will produce following result: 

This text will be written in red.