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>

Set The Font Variant

following is the example which demonstrates how to set the font variant of an element. Possible values are normal and small caps.

<p style=”font-variant:small-caps;”> This text will be rendered as small caps</p>

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>

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 pixel 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>

Shorthand Property

You can use the font property to set all the font properties at once. For example:

<p style=”font: italic small-caps bold 15px Georgia;”>

Applying all the properties on the text at once.

</p>

Manipulate Text using CSS

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 paragraph.

The text – decoration property is used to underline, over line, and strike through text.

The text-transform property is used to capitalize text or 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.

This text will be written in red.

</p>

 

Set the Text Direction

Following is the example which demonstrates how to set the direction of a text. Possible values are ltr or rtl.

<p style =”direction:rtl;”>

This text will be rendered from right to left

</p>

 

Set the Space between Characters

Following is the example which demonstrates how to set the space between characters. Possible values are normal or a number specifying space.

<p style=”letter-spacing:5px;”>

This text is having space between letters.

Set the Space between Words

Following is the example which demonstrates how to set the space between words. Possible values are normal or a number specifying space.

<p style=”word-spacing:5px; ”>

This text is having space between words.

</p>

Set the Text Indent

Following is the example which demonstrates how to indent the first line of a paragraph. Possible values are % or  a number specifying indent space.

<p style=”text-indent:1cm;”>

This text will have first line indented by 1cm and this line will remain at its actual position this is done by CSS textg-indent property.

</p>

Set the Text Alignment

Following is the example which demonstrates how to align a text. Possible values are left, right,centre,justify

<p style=”text-align:right;”>

This will be right aligned.

</p>

<p style=”text-align:center;”>

This will be center aligned.

</p>

<p style=”text-align:left;”>

This will be left aligned.

</p>

Decorating the Text

Following is the example which demonstrates how to decorate a text. Possible values are none, underline,overline,line-through, blink.

<p style=”text_decoration:underline;”>

This will be underfined

</p>

<p style=”text-decoration:line-through;”>

This will be striked through.

</p>

<p style =”text-decoration:overline;”>

This will have a over line.

</p>

<p style=”text-decoration:blink”;>

This text will have blinking effect

</p>

Set the Text Cases

Following is the example which demonstrates how to set the cases for a text. Possible values are none,capitalize,uppercase,lowercase…

<p style=”text-tranform:capitalize;”>

This will be capitalized

</p>

<p style=”text-transform:uppercase;”>

This will be in uppercase

</p>

<p style=”text-transform:lowercase;”>

This will be in lowercase

</p>

 

Set the White space between Text

Following is the example which demonstrates how white space inside an element is handled. Possible values are normal,pre,nowrap.

<p style=”white-space:pre;”> This text has a line break

and the white-space pre setting tells the browser to honor it just like the HTML pre tag.</p>

Set the Text shadow

Following is the example which demonstrates how to set the shadow around a text. This may not be supported by all the browsers.

<p style=”text-shadow:4px  4px  8px  blue;”>

if your browser supports the css text-shadow property, this text will have a blue shadow.</p>

 

Styling Links

Links can be styled with any CSS property(eg: color, font-family, background,etc)

special for links are that can be styled differently depending on what state they are in.

The four links states are:

• a:link – a normal, unvisited link
• a:visited – a link the user has visited
• a:hover – a link when the user mouses over it
• a:active – a link the moment it is clicked

 

Example

a:link{color:#FF0000;}   /*unvisited link */

a:visited{color:#00FF00;}  /*visited link  */

a:hover{color:#FF00FF;}   /* mouse over link   */

a:active{color:#0000FF;}/* selected link  */

 

Example

a:link{text-deorational:none;}

a:visited{text-decoration:none;}

a:hover{text-decoration:underline;}

a:active{text-decoration:underline;}

 

Example

a:link{background-color: #B2FF99;}

a:visied{background-color: #FFFF85;}

a:hover{background-color: #FF704D;}
a:active{background-color: #FF704D;}

When setting the style for several link states, there are some order rules:

• a:hover MUST come after a:link and a:visited
• a:active MUST come after a:hover