Tutorials Point


  CSS Home

  CSS Reference
  Pseudo Classes & Elements

Copyright © 2014 by tutorialspoint



  Home     References     Discussion Forums     About TP  

CSS Pseudo-element :first-letter


previous next AddThis Social Bookmark Button


Advertisements

Description:

The :first-letter pseudo-element is used to add special effect to the first letter of a text.

The following properties apply to the this pseudo- element:

  • font properties
  • color properties
  • background properties
  • margin properties
  • padding properties
  • border properties
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • float
  • clear

Example:

Following is the example which demonstrates how to use :first-letter element to add special effect to the first letter of elements in the document .

<style type="text/css">
p:first-letter { font-size: 3em; text-color:red; }
p.normal:first-letter { font-size: 10px; }
</style>
<p class="normal"> First character of this paragraph will 
be normal and will have font size 10 px;</p>

<p>The first character of this paragraph will be 3em big
and in red color as defined in the CSS rule above. Rest of the
characters in this paragraph will remain normal. This example 
shows how to use :first-letter pseduo element to give effect to
the first characters  of any HTML element.</p>

This will produce following black link:

First character of this paragraph will be normal and will have font size 10 px;

The first character of this paragraph will be 3em big and in red color as defined in the CSS rule above. Rest of the characters in this paragraph will remain normal. This example shows how to use :first-letter pseduo element to give effect to the first characters of any HTML element.

To Become more comfortable - Do Online Practice



previous next Printer Friendly

Advertisements


  

Advertisements