First Letter

One of the most over looked attributes in CSS is the :first-letter attribute. With this attribute you can add a lot of style to your site, with very little code. If you wanted to make your pages have theme similar to books in the Dark Ages, this attribute is perfect for that.

The :first-letter attribute, allows you to change the attributes of the first letter in a HTML element. You can change thing such as the margin, padding, font properties and many more. W3Schools.com list the following as the attributes you can change using :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

As you can see that gives you a lot of control on how you want to make your first letter appear. You can use the font-properties to make the first letter larger then the rest of the text, and if you add a decorative background to the first letter, you could even make your own Dark Age book style to your page.

Here is an example code that will change the first letter to a green color, and increase the size by 250% on any paragraph elements.

p:first-letter{
 color:#8cb939;
 font-size: 250%;
 }

Topics: CSS, Design, Web Development