ADVERTISEMENT
ADVERTISEMENT

Styling First Letters with CSS ::first-letter

By using the CSS ::first-letter selector, lean how to style first letters?
Submitted by Apurva Mathur, on June 20, 2022

CSS provides us with pseudo-element property which helps us to design some specific part of the element. These are one of the common and very interesting ways of designing the parts of the specific elements. We must have seen on many WebPages the first letter of the content is displayed in a very artistic manner. This thing is achieved by using pseudo elements.

Whenever you are using pseudo-element it is important to know that we always use this with the following syntax:

::first-letter, ::before, ::after, etc.

Observe that :: is used with pseudo-element (using double colons is important).

Let us see now, how we can style the first letter using the ::first-letter?

Example:

<html>
   <head>
      <style>
         body{
         text-align: center;
         }
         h1::first-letter {
         font-family: "Gill Sans Ultra Bold Condensed";
         font-size: 60px;
         color: greenyellow;
         text-shadow: 5px 8px 9px gold;
         }
         h1{
         color: red;
         font-family: "Book Antiqua";
         }
         h2::first-letter{
         font-family: "Gill Sans Ultra Bold Condensed";
         font-size: 60px;
         color:purple;
         text-shadow: 5px 8px 9px #b3d4fc;
         }
         h2{
         color: #4CAF50;
         }
         h3::first-letter{
         font-family: "Lucida Console";
         font-size: 2cm;
         color:darkcyan;
         }
      </style>
   </head>
   <body>
      <h1> Include help welcomes you </h1>
      <h2>Our aim is to make you "an expert in Computer programming languages".</h2>
      <h3>IncludeHelp is a FREE site and will remain FREE in future as well</h3>
   </body>
</html>

Output:

Example: Styling First Letters with CSS

Explanation:

If you see the code you'll observe that the property used in the CSS part is really basic the only concept you need to understand is the working of first-letter in the code, in the above code h1::first-letter will only and only apply the CSS properties to the first letter written inside h1 tag. If you have more than one h1 tag in the code then in that case it will style the first letter of all the h1 tags.

Just play with your imagination by giving more color/font/shadow property to the first-letter pseudo-element.

CSS Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT


Comments and Discussions!



ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.