CODEWITHSUNDEEP
htmlcss
Satz
Satz

Reputation: 105

Apply Style for first letter in paragraph only using CSS

I have lot of paragraphs in my page 

<div>
 <p>Sample Text</p>
 <p>Abc</p>
 <p>Third Sample</p>
</div>

In each of the paragraph the first letter should be Capitalized and Font-Size is increased via CSS. All the paragraph Content in dynamically loaded. Please suggest me how to solve this without using javascript/jQuery.

Upvotes: 3

Views: 1355

Answers (4)

Dr M L M J
Dr M L M J

Reputation: 2397

You can Try

<div id="mydiv">
    <p>sample Text</p> 
    <p>abc</p> 
    <p>third Sample</p> 
    <p>i think it is working</p>
    <p>isn't it ?</p>

</div>

And CSS 

#mydiv p::first-letter {
    color: red;
    font-size: 24px;
    font-family:arial unicode ms;
    text-transform: uppercase;
}
#mydiv p {
    color:green;
    font-size:16px;
    font-family:arial unicode ms;
}

JSFIDDLE

Upvotes: 1

Kisspa
Kisspa

Reputation: 584

div >p::first-letter{
   color:red;
   font-size:20pt;
 }

Upvotes: 0

bumbumpaw
bumbumpaw

Reputation: 2528

The ::first-letter selector is used to add a style to the first letter of the specified selector.

Note: The following properties can be used with ::first-letter :

font properties color properties background properties margin properties padding properties border properties text-decoration vertical-align (only if float is 'none') text-transform line-height float clear

Note: The ::first-letter selector can only be used with block-level elements.

check w3school for more info and online testing.

Upvotes: 0

user1133297
user1133297

Reputation:

Here you are 

p::first-letter
{ 
text-transform: uppercase;
font-size: 25px; /* Change this to your choice */
}

Upvotes: 8

Related Questions