PSEUDO-CLASS

::first-letter

The ::first-letter pseudo-element applies styles to the first letter of the first line of a block-level element, but only when not preceded by other content (such as images or inline tables).

Syntax


p::first-letter {
  font-size: 120%;
}
A set of CSS properties that can be used with the ::first-letter pseudo-element:
  • Font properties: font, font-style, font-feature-settings, font-kerning, font-language-override, font-stretch, font-synthesis, font-variant, font-variant-alternates, font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, font-variant-position, font-weight, font-size, font-size-adjust, line-height, font-family
  • Background properties: background, background-color, background-image, background-clip, background-origin, background-position, background-repeat, background-size, background-attachment, background-blend-mode
  • Padding properties: margin, margin-top, margin-right, margin-bottom, margin-left
  • Fields properties: padding, padding-top, padding-right, padding-bottom, padding-left
  • Frames properties: border, border-style, border-color, border-width, border-radius, border-image
  • Color: color
  • Properties: text-decoration, text-shadow, text-transform, letter-spacing, word-spacing, line-height, text-decoration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align

Examples

Increase the font size and make the first letter a color. 

	  
	<p>The June 1992 constitution established a democratic system of government and dramatically improved protection of fundamental human rights. In May 1993, Colorado Party candidate Juan Carlos Wasmosy was elected as Paraguay's first civilian president in almost forty years, in what international observers deemed free and fair elections.</p>
	
	<p>With support from the United States, the Organization of American States, and other countries in the region, the Paraguayan people rejected an April 1996 attempt by then Army Chief General Lino Oviedo to oust President Wasmosy.</p>
	
	
	

	
		
	
			p::first-letter {
  			font-size: 120%;
			color:green;
}

The June 1992 constitution established a democratic system of government and dramatically improved protection of fundamental human rights. In May 1993, Colorado Party candidate Juan Carlos Wasmosy was elected as Paraguay's first civilian president in almost forty years, in what international observers deemed free and fair elections.

With support from the United States, the Organization of American States, and other countries in the region, the Paraguayan people rejected an April 1996 attempt by then Army Chief General Lino Oviedo to oust President Wasmosy.

The disadvantage of this method is that all tags p will accept this property.
To avoid this, you must use a class to which you assign a pseudo-class. 

	  
	<p class="fltr">The June 1992 constitution established a democratic system of government and dramatically improved protection of fundamental human rights. In May 1993, Colorado Party candidate Juan Carlos Wasmosy was elected as Paraguay's first civilian president in almost forty years, in what international observers deemed free and fair elections.</p>
	
	<p>With support from the United States, the Organization of American States, and other countries in the region, the Paraguayan people rejected an April 1996 attempt by then Army Chief General Lino Oviedo to oust President Wasmosy.</p>

	
		
	
		.fltr::first-letter {
font-size: 120%;
color:green;
  }

The June 1992 constitution established a democratic system of government and dramatically improved protection of fundamental human rights. In May 1993, Colorado Party candidate Juan Carlos Wasmosy was elected as Paraguay's first civilian president in almost forty years, in what international observers deemed free and fair elections.


With support from the United States, the Organization of American States, and other countries in the region, the Paraguayan people rejected an April 1996 attempt by then Army Chief General Lino Oviedo to oust President Wasmosy.